为什么2个按钮仍然重叠

Question

这是我的xaml：

   <Grid>
        <Button x:Name="top1" Content="top" Width="200" Height="50" VerticalAlignment="Top" HorizontalAlignment="Center"/>
        <Button x:Name="top2" Content="top" Width="100" Height="25" VerticalAlignment="Top" HorizontalAlignment="Center"/>
        <Button x:Name="left" Content="left" Width="200" Height="50" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,0" Click="Button_Click"/>
    </Grid>

当我点击左键时，我希望top2按钮向左移动以避免与top1按钮重叠。这是我的背景代码：

private void Button_Click(object sender, RoutedEventArgs e)
{
     var offset = this.top1.ActualWidth + this.top2.ActualWidth / 2;
     this.top2.Margin = new Thickness(0, 0, offset, 0);
}

但结果中，top1和top2仍然重叠。

为什么会这样？以及如何解决？

Answer 1

  

使用行定义，列定义和设置按钮可见性可以解决问题

Answer 2

按钮在给定空间内水平居中。 要解决这个问题，我必须加倍利润：

private void Button_Click(object sender, RoutedEventArgs e)
{
     var offset = this.top1.ActualWidth + this.top2.ActualWidth;
     this.top2.Margin = new Thickness(0, 0, offset, 0);
}

但只有当top2没有到达其布局的边缘时，这才是正确的。如果top2部分位于左边缘之外，那么我们不需要将边距加倍。并且top2的左侧和右侧都被修剪。