Warum die 2 Tasten sind noch überlappen

Question

Hier meine XAML ist:

<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> 

Wenn ich Knopf links klicken, ich die top2-Taste gehen Sie nach links wollen mit top1 Taste zu vermeiden überlappt. Hier ist mein Hintergrund 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); 
} 

Aber im Ergebnis top1 und top2 noch überlappen.

Warum das passiert? und wie löst man?

Answer 1

Verwenden von Zeilendefinitionen, Spaltendefinitionen und Einstellung Sichtbarkeit für Taste könnte das Problem

Answer 2

Die Tasten lösen sind horizontal innerhalb gegebenen Raum zentriert. Um dies zu lösen, ich habe die Marge zu verdoppeln:

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

Dies ist aber nur dann richtig, wenn die top2 über den Rand seines Plans nicht erreicht. Wenn Top2 teilweise außerhalb der linken Kante ist, brauchen wir den Rand nicht zu verdoppeln. Und sowohl die linke Seite als auch die rechte Seite von top2 sind getrimmt.