如何将这三个按钮放在底部中央？

Question

在如下的UWP xaml设计中，我将整个屏幕分为3列和3行。对于第2行第1列，我需要放置一个画布，其中包含一个RelativePanel。面板内部会有一些按钮。 我的目的是在面板上制作动画。

我希望将这3个按钮放在屏幕的底部/中央，但是失败了。 附上我的布局图片，但这不是我想要的。 有人可以帮忙吗？ 谢谢！

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="10*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="15*" />
        <RowDefinition Height="3*"/>
    </Grid.RowDefinitions>

    <Canvas x:Name="toolbarCanvas" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center">
        <RelativePanel x:Name="toolbarPanel">
            <Button x:Name="bt1" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.LeftOf="bt2"/>
            <Button x:Name="bt2" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
            <Button x:Name="bt3" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.RightOf="bt2" />

        </RelativePanel>
    </Canvas>

</Grid>

Answer 1

  

如何将这三个按钮放在底部中心？

Canvas是一个布局面板，支持子元素相对于画布左上角的绝对定位。

<Canvas Width="640" Height="480" >
    <Rectangle Canvas.Left="30" Canvas.Top="30" 
       Fill="Red" Width="200" Height="200" />
</Canvas>

根据您的要求。请使用Grid面板替换Canvas并按如下所示设置toolbarPanel VerticalAlignment HorizontalAlignment属性。

<Grid x:Name="toolbarGrid" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center">
    <RelativePanel x:Name="toolbarPanel" VerticalAlignment="Bottom"  HorizontalAlignment="Center">
        <Button x:Name="bt1" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.LeftOf="bt2"/>
        <Button x:Name="bt2" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
        <Button x:Name="bt3" Margin="50,0,50,0" Height="100" Width="100" VerticalAlignment="Center" RelativePanel.RightOf="bt2" />

    </RelativePanel>
</Grid>