WPF Layout Discrepancy Between Design and Runtime

Question

I have used the answer to this question as the basis for styling an app I am building.

All looks good in design mode, I get the following:

But at runtime I get a large gap above my content, which in this case is a MediaElement:

The code for my MainWindow is:

<local:MyWindow x:Class="DebriefSuite.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DebriefSuite"        
        Height="439.091" Width="600" 
        Style="{DynamicResource MyWindowStyle}"
        WindowStyle="None">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="6*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Row="0" Grid.Column="0">
            <MediaElement Name="meVideo" Height="Auto" Width="Auto" IsMuted="True"/>
        </Grid>        
    </Grid>
</local:MyWindow>

The code Resource code in my App.xaml is as in the linked question, but I will include it anyway:

<Application.Resources>
    <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter"/>

    <Color x:Key="WindowBackgroundColor">#FF2D2D30</Color>
    <Color x:Key="HighlightColor">#FF3F3F41</Color>
    <Color x:Key="BlueColor">#FF007ACC</Color>
    <Color x:Key="ForegroundColor">#FFF4F4F5</Color>

    <SolidColorBrush x:Key="WindowBackgroundColorBrush" Color="{StaticResource WindowBackgroundColor}"/>
    <SolidColorBrush x:Key="HighlightColorBrush" Color="{StaticResource HighlightColor}"/>
    <SolidColorBrush x:Key="BlueColorBrush" Color="{StaticResource BlueColor}"/>
    <SolidColorBrush x:Key="ForegroundColorBrush" Color="{StaticResource ForegroundColor}"/>

    <Style x:Key="WindowButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="contentPresenter"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                      Margin="{TemplateBinding Padding}"
                      RecognizesAccessKey="True"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource HighlightColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="{DynamicResource BlueColorBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="contentPresenter" Property="Opacity" Value=".5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MyWindowStyle" TargetType="local:MyWindow">
        <Setter Property="Icon" Value="Icon.ico"/>
        <Setter Property="Foreground" Value="{DynamicResource ForegroundColorBrush}"/>
        <Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}"/>
        <Setter Property="ResizeMode" Value="CanResizeWithGrip"/>
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyWindow">
                    <Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}" Background="{StaticResource WindowBackgroundColorBrush}">
                        <Grid>
                            <Border BorderThickness="1">
                                <AdornerDecorator>
                                    <Grid x:Name="LayoutRoot">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="25"/>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="15"/>
                                        </Grid.RowDefinitions>
                                        <ContentPresenter Grid.Row="1" Grid.RowSpan="2" Margin="7"/>
                                        <Rectangle x:Name="HeaderBackground" Height="25" Fill="{DynamicResource WindowBackgroundColorBrush}" VerticalAlignment="Top" Grid.Row="0"/>
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
                                            <Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="minimize" Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                        <Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                    Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"/>
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                            <Grid Margin="1,0,1,0">
                                                <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="restore" Visibility="Collapsed" Style="{StaticResource WindowButtonStyle}">
                                                    <Button.Content>
                                                        <Grid Width="30" Height="25" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
                                                            <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1"/>
                                                        </Grid>
                                                    </Button.Content>
                                                </Button>
                                                <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="maximize" Style="{StaticResource WindowButtonStyle}">
                                                    <Button.Content>
                                                        <Grid Width="31" Height="25">
                                                            <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                        Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"/>
                                                        </Grid>
                                                    </Button.Content>
                                                </Button>
                                            </Grid>
                                            <Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="close"  Style="{StaticResource WindowButtonStyle}">
                                                <Button.Content>
                                                    <Grid Width="30" Height="25" RenderTransform="1,0,0,1,0,1">
                                                        <Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                    Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5"/>
                                                    </Grid>
                                                </Button.Content>
                                            </Button>
                                        </StackPanel>
                                        <!--<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True" Grid.Row="0">
                                            <Image Source="Icon.ico"/>
                                            <TextBlock x:Name="WindowTitleTextBlock" Grid.Row="0" Text="{TemplateBinding Title}" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" VerticalAlignment="Center"  Margin="8 -1 0 0"  FontSize="14"  Foreground="{TemplateBinding Foreground}"/>
                                        </StackPanel>-->
                                        <Grid Grid.Row="2">
                                            <Path x:Name="ResizeGrip" Visibility="Collapsed" Width="12" Height="12" Margin="1" HorizontalAlignment="Right"
                                    Stroke="{StaticResource BlueColorBrush}" StrokeThickness="1" Stretch="None" Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3"/>
                                        </Grid>
                                    </Grid>
                                </AdornerDecorator>
                            </Border>
                            <Border BorderBrush="{StaticResource BlueColorBrush}" BorderThickness="1" Visibility="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Converter={StaticResource bool2VisibilityConverter}}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="WindowState" Value="Maximized">
                            <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed"/>
                            <Setter TargetName="Restore" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="LayoutRoot" Property="Margin" Value="7"/>
                        </Trigger>
                        <Trigger Property="WindowState" Value="Normal">
                            <Setter TargetName="Maximize" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="Restore" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
                                <Condition Property="WindowState" Value="Normal"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="WindowChrome.WindowChrome">
            <Setter.Value>
                <WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False"/>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Can anyone point me in the right direction as to where this formatting difference is coming from?

Many thanks.

Answer 1

You are seeing the box filling up the bigger space in the design, because thats the maximum size MediaElement can take up. But your actual image is smaller than the size allocated for the MediaElement contro, so it appears smaller at runtime.

So if you want the image to fill up the space try using its stretch property as required. Refer here for example: MediaElement.Stretch Property