为什么两个按钮仍然重叠

Question

Here is my 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>

When I click left button, I want the top2 button go left to avoid overlapped with top1 button. Here is my background code:

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);
}

But in the result, top1 and top2 are still overlapped.

Why this happens? and how to resolve?

Answer 1

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

Answer 2

The buttons are horizontally centered within given space. To solve this, I have to double the margin:

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);
}

But this is correct only when the top2 doesn't reach over the edge of its layout. If top2 is partially out of left edge, we don't need to double the margin then. And both left side and right side of top2 are trimmed.