XAML UWP Adaptive Buttons

Question

J'essaie d'implémenter deux boutons réactifs côte à côte et je veux qu'ils se comportent comme sur l'image ci-dessous.

Ceci est mon XAML:

<RelativePanel x:Name="contentPanel"> 
     <Button x:Name="submitButton" Content="Submit" 
       Margin="0,40,0,0" 
       MinWidth="250" 
       RelativePanel.AlignLeftWithPanel="True"/> 

     <Button x:Name="annulerButton" Content="Cancel" 
       Margin="5,40,0,0" 
       MinWidth="250" 
       RelativePanel.RightOf="submitButton" 
       RelativePanel.AlignRightWithPanel="True"/> 
<RelativePanel/> 

S'il vous plaît, toute aide?

Answer 1

Utilisez Grid avec ColumnDefinition quelque chose comme ci-dessous.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Button x:Name="submitButton" Content="Submit" Margin="5" Grid.Column="0" HorizontalAlignment="Stretch" /> 
    <Button x:Name="annuleButton" Content="Cancel" Margin="5" Grid.Column="1" HorizontalAlignment="Stretch"/> 
</Grid> 

et la sortie de fin sera

Answer 2

Vous pouvez utiliser l'implémentation open-source du UniformGrid pour UWP au lieu du panneau relatif. Alternativement, vous pouvez essayer de placer vos boutons dans le contrôle Grid standard, bien qu'il puisse mal se comporter si redimensionné à une taille plutôt petite. Mais comme la largeur minimale des boutons est définie sur la même valeur dans votre cas, vous ne rencontrerez pas ce problème.

<Grid x:Name="contentPanel"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Button x:Name="submitButton" Content="Submit" 
      Margin="0,40,0,0" 
      MinWidth="250" 
      Grid.Column="0"/> 
    <Button x:Name="annulerButton" Content="Cancel" 
      Margin="5,40,0,0" 
      MinWidth="250" 
      Grid.Column="1"/> 
</Grid>