為什么兩個按鈕仍然重疊

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的左側和右側。