XAML UWP自适应按钮

Question

I am trying to implement two side-by-side responsive buttons and I want them to behave like on the image below.

This is my 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/>

Please, any help?

Answer 1

Use Grid with ColumnDefinition something like below.

<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>

and end output will be

Answer 2

You can use the open-source implementation of the UniformGrid for UWP instead of the relative panel.

Alternatively, you can try to put your buttons into the standard Grid control, though it may misbehave if resized to a rather small size. But as the buttons' minimal width is set to the same value in your case, you will not face this issue.

<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>