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

debugcn 发表于 Dev

Tom Xue

在如下 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>

Nico Zhu - MSFT

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

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

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

满足您的要求。请使用Grid面板替换Canvas和设置工具栏面板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>