Derlemeden sonra yanlış hizalı düğmesi

Question

Uygulamam için basit bir arayüz oluşturuyordum. GUI tasarımını hazırladığımda her şey iyi gitti, WPF ve XAML uygulamalarını kullanıyorum. Her şey çok iyi derlendikten ve uygulamanın çalışmasından sonra sorun çıktı. Uygulama çalışırken yanlış hizalanan bu tek düğme var. Sorunu aradım ve hiçbir şey bulamadım. Bunu nasıl düzelteceğinizle ilgili bir fikrin var mı?

Beklenen sonuç solda, gerçek sonuç kayan pencerede. Hizalanmış düğmenin XAML kodu, yüzer pencerenin altındadır.

Answer 1

<Window x:Class="WPFAlignment.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Grid.Resources> 
     <Style TargetType="Button"> 
      <Setter Property="Margin" Value="3"/> 
     </Style> 
     <Style TargetType="TextBlock"> 
      <Setter Property="Margin" Value="3"/> 
     </Style> 
    </Grid.Resources> 
    <Grid Width="500"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="2*"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Button Content="LoadFingerPrint"/> 
      <Button Grid.Column="1" Content="Load File"/> 
     </Grid> 
     <Grid Grid.Row="1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <TextBlock Text="File Path:" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center"/> 
      <TextBlock Grid.Row="1" 
         Text="Key Size:" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center"/> 
      <TextBlock Grid.Row="2" 
         Text="Initial Vector:" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center"/> 

      <DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3"> 
       <TextBox Margin="2"/> 
      </DockPanel> 
      <Grid Grid.Column="1" 
        Grid.ColumnSpan="3" 
        Grid.Row="1" 
        VerticalAlignment="Center"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <CheckBox Content="128bit" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Left"/> 
       <CheckBox Grid.Column="1" 
          Content="192bit" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Left"/> 
       <CheckBox Grid.Column="2" 
          Content="256bit" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Right"/> 
      </Grid> 
       <DockPanel LastChildFill="True" 
          Grid.Column="1" 
          Grid.Row="2" 
          Grid.ColumnSpan="3"> 
       <TextBox Margin="2"/> 
      </DockPanel> 
     </Grid> 
     <Grid Grid.Row="2"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Button Content="Encrypt"/> 
      <Button Grid.Column="1" 
        Content="Decrypt"/> 
      <Button Grid.Column="2" 
        Content="Abort"/> 
     </Grid> 
    </Grid> 
</Grid> 

bu deneyin ve hizalama görebilir mi? Elinizde bulunan tüm bu kenar boşlukları var. Bence sorun bu.

Temel olarak, konumlandırma için kapsayıcıları kullanın: Izgara, DockPanel, StackPanel vb. Ve bunların içinde göreceli olmak için, VerticalAlignment örneğindeki gibi Hizalamalar kullanın. Ayrıca, birçok Denetim için bazı ortak değerler ayarlamak için Düğmelerin Kenar Boşluğu ile yaptığım gibi Stilleri kullanın.