WPF Beginner - A simple XAML layout not working as expected

Question

Hi, I've just started learning WPF, and followed a book to make this sample calculator application in XAML. The XAML code is attached below. I don't have any UI specific code in the xaml.cs file.

However, I'm seeing a difference between design time and runtime. As you can see in the attached screenshot, the upper left button of the calculator is bigger than the rest.

Even more confusingly, the designer when I edit the XAML shows the button correctly.

I've tried to determine why is that, and I'm stumped. Can anyone help?

I'm using VS2008, targeting framework 3.5, if it's any help.

Here's the XAML:

<Window x:Class="TestWpf2008.Calculator"

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:TestWpf2008"
  Title="Calculator" FontFamily="Calibri" FontSize="15"   
  SizeToContent="WidthAndHeight" Loaded="Window_Loaded">
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Dictionary1.xaml"/>
            <ResourceDictionary>
                <SolidColorBrush x:Key="MyTitleColor" Color="Chocolate" />
                <Style TargetType="Button">
                    <Setter Property="Margin" Value="6"/>
                </Style>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>
<Grid Background="{StaticResource PrettyBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontSize="24" 
               Name="Header"
               VerticalAlignment="Center" HorizontalAlignment="Center">Calculator</TextBlock>
    <TextBox Grid.ColumnSpan="4" Grid.Column="0" Grid.Row="1" Name="Display" 
             HorizontalContentAlignment="Left" Margin="5" />
    <Button Grid.Row="2" Grid.Column="0" Click="Button_Click">7</Button>
    <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">8</Button>
    <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">9</Button>

    <Button Grid.Row="3" Grid.Column="0" Click="Button_Click">4</Button>
    <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">5</Button>
    <Button Grid.Column="2" Grid.Row="3" Click="Button_Click">6</Button>

    <Button Grid.Row="4" Grid.Column="0" Click="Button_Click">1</Button>
    <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">2</Button>
    <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">3</Button>


    <Button Grid.Row="5" Grid.Column="0" Click="Button_Click">0</Button>

    <Button Grid.Row="5" Grid.Column="3" Tag="{x:Static local:Operation.PLUS}" 
            Click="Op_Click">+</Button>
    <Button Grid.Row="4" Grid.Column="3" Tag="{x:Static local:Operation.MINUS}"
            Click="Op_Click">-</Button>
    <Button Grid.Row="3" Grid.Column="3" Tag="{x:Static local:Operation.TIMES}"
            Click="Op_Click">*</Button>
    <Button Grid.Row="2" Grid.Column="3" Tag="{x:Static local:Operation.DIVIDE}"
            Click="Op_Click">/</Button>

    <Button Grid.Row="5" Grid.Column="1" >.</Button>
    <Button Grid.Row="5" Grid.Column="2" Tag="{x:Static local:Operation.EQUALS}"
            Click="Op_Click">=</Button>

</Grid> </Window>

Answer 1

From MSDN

It is legal to define resources within a ResourceDictionary that is specified as a merged dictionary, either as an alternative to specifying Source, or in addition to whatever resources are included from the specified source. However, this is not a common scenario; the main scenario for merged dictionaries is to merge resources from external file locations. If you want to specify resources within the markup for a page, you should typically define these in the main ResourceDictionary and not in the merged dictionaries.

So you just have to move the style out from the merged resourcedictionary

but i suggest that you should

move

<ResourceDictionary> 
    <ResourceDictionary.MergedDictionaries> 
        <ResourceDictionary Source="Dictionary1.xaml"/>
    </ResourceDictionary.MergedDictionaries> 
</ResourceDictionary> 

to Application.Resources in App.xaml

keep

<Style TargetType="Button"> 
    <Setter Property="Margin" Value="6"/> 
</Style>

in Window.Resources

because thats what you usally would do with merged resourcedictionarys because of the easy reuse between projects of your 'Dictionary1.xaml'