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

您可以使用 UWP UniformGrid 的开源实现，而不是相关面板。

或者，您可以尝试将按钮放入标准的 Grid 控件中，但如果将其调整为相当小的尺寸可能会出现错误。但由于按钮的最小宽度在您的情况下设置为相同的值，因此您不会遇到此问题。

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

最终输出将是

XAML UWP 自适应按钮

XAML UWP Adaptive Buttons

xaml

uwp

windows-10-universal

uwp-xaml