XAML UWP自适应按钮

Question

我正在尝试实现两个并排的响应式按钮，我希望它们的行为类似于下图。

这是我的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/>

请帮忙吗？

Answer 1

您可以将UniformGrid的开源实现用于UWP而不是相对面板。

或者，您可以尝试将按钮放入标准网格控件中，但如果将其重新调整为相当小的尺寸，则可能会出现异常。但是作为按钮＆＃39;在您的情况下，最小宽度设置为相同的值，您将不会遇到此问题。

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

Answer 2

将Grid与ColumnDefinition之类的内容结合使用。

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

和结束输出