Misaligned button after compilation

Question

I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?

Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.

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>

Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.

Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment. Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.