WPF Design Layout vs Compiled Layout

Question

I'm getting differences between the design in VS2010 and the layout when compiled. See the images bellow:

Design View enter image description here

Compiled enter image description here

I have read this and I don't seem to be able to pick anything out that will help me. Why does this happen?

XAML:

<Window x:Class="iAdvert_Desktop.TemplateDesigner"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="622" Width="610" AllowsTransparency="False" Opacity="1" Background="White" ResizeMode="NoResize">
    <Window.Resources>
        <ResourceDictionary Source="Pages/BaseStyle.xaml" />
    </Window.Resources>
    <Grid>
        <Canvas Height="281" VirtualizingStackPanel.VirtualizationMode="Standard" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="500" Background="#FF383838" PreviewMouseLeftButtonDown="canvas1_PreviewMouseLeftButtonDown" PreviewMouseMove="canvas1_PreviewMouseMove" PreviewMouseLeftButtonUp="canvas1_PreviewMouseLeftButtonUp" Margin="45,30,0,0" Panel.ZIndex="5"></Canvas>
        <DataGrid AutoGenerateColumns="False" CanUserAddRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" DataContext="{Binding}" HeadersVisibility="Column" Height="143" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" HorizontalGridLinesBrush="#ccc" Margin="45,356,0,0" Name="dataGrid1" VerticalAlignment="Top" VerticalGridLinesBrush="#ccc" VirtualizingStackPanel.VirtualizationMode="Standard" Background="#FFF6F6F6" Width="500">
            <DataGrid.Resources>
                <ResourceDictionary Source="Pages/DataGridStyle.xaml" />
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="Delete">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ContentControl HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                                <Image Source="/iAdvert-Desktop;component/Images/icons/delete.png" Height="12" MouseLeftButtonUp="Image_MouseLeftButtonUp"></Image>
                            </ContentControl>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="0.5*" Binding="{Binding Path=TemplateCellID}" Header="ID"></DataGridTextColumn>
                <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellWidth}" Header="Width"></DataGridTextColumn>
                <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellHeight}" Header="Height"></DataGridTextColumn>
                <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellTop}" Header="Top"></DataGridTextColumn>
                <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellLeft}" Header="Left"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
        <Button Content="Add Cell" Height="23" Name="button1" Width="75" Click="button1_Click" Margin="470,317,43,243" />
        <TextBox Style="{StaticResource TextBoxStyle}" Height="26" HorizontalAlignment="Right" Margin="0,504,271,0" Name="textBox1" VerticalAlignment="Top" Width="178" />
        <TextBlock Style="{StaticResource TextDescription}" Height="26" HorizontalAlignment="Left" Margin="45,504,0,0" Name="textBlock1" Text="Template Name" VerticalAlignment="Top" />
        <Button Content="Save Template" Height="23" HorizontalAlignment="Left" Margin="450,505,0,0" Name="button2" VerticalAlignment="Top" Width="95" Click="button2_Click" />
    </Grid>
</Window>

BaseStyle:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TextHeader" TargetType="TextBlock">
        <Setter Property="Background" Value="#FF333333" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="16" />
    </Style>
    <Style x:Key="TextDescription" TargetType="TextBlock">
        <Setter Property="Background" Value="#FF333333" />
        <Setter Property="Padding" Value="5" />
        <Setter Property="Foreground" Value="White" />
    </Style>
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#FF333333" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="BorderBrush" Value="{x:Null}" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Padding" Value="5" />
            </Trigger>
        </Style.Triggers>
        <Setter Property="Background" Value="#FF333333" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BorderBrush" Value="#FF333333" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="5" />
    </Style>
    <Style x:Key="TextBoxStyle" TargetType="TextBox">
        <Setter Property="BorderBrush" Value="#FF333333" />
        <Setter Property="Height" Value="26" />
    </Style>
</ResourceDictionary>

DataGridStyle:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type DataGrid}">
        <Setter Property="ItemsControl.AlternationCount" Value="2" />
        <Setter Property="BorderBrush" Value="#FF333333" />
    </Style>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Control.Foreground" Value="White" />
        <Setter Property="Control.Background" Value="#333" />
        <Setter Property="Control.Padding" Value="5" />
    </Style>
    <Style TargetType="{x:Type DataGridRow}">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Control.Background" Value="#f1f1f1" />
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Control.Background" Value="#f9f9f9" />
            </Trigger>
            <Trigger Property="DataGridRow.IsSelected" Value="True">
                <Setter Property="Control.Background" Value="#ccc" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <Style TargetType="{x:Type DataGridCell}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid>
                        <ContentPresenter VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FrameworkElement.Height" Value="20" />
    </Style>
    <Style x:Key="CenterCell" TargetType="{x:Type DataGridCell}">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid>
                        <ContentPresenter HorizontalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="CenterTextCell" TargetType="{x:Type TextBlock}">
        <Setter Property="TextAlignment" Value="Center" />
    </Style>

</ResourceDictionary>

As a tip on trying to locate the source of the problem, turn on `ShowGridLines` on your Grid. You'll be able to identify *which* components have moved, the first step in working aroudn the problem. — Bevan, Mar 24 '11 at 02:53
Go to the Grid that forms the base of your form, and set ShowGridLines to true, either in the property editor or in your xaml. See http://msdn.microsoft.com/en-us/library/system.windows.controls.grid.showgridlines.aspx — Bevan, Mar 24 '11 at 02:57
I don't think that will help because @Prisoner is just using the grid as a simple container and not using rows & columns to lay out the controls (the layout is done with margins). — grantnz, Mar 24 '11 at 03:09

score 2 · Accepted Answer · answered Mar 24 '11 at 03:32

I think you'll find that this works better. It looks the same in the designer and when you run it.

All I have done is remove your margins and add rows/columns to your grid (and a stackpanel for the template label/textbox).

<Grid Margin="10">
    <Grid.RowDefinitions>            
        <RowDefinition Height="301"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
        <Canvas Grid.Row="0" Background="#FF383838" ></Canvas>
        <Button Grid.Row="1" Content="Add Cell" Height="23" Width="75" HorizontalAlignment="Right" Margin="0,10,0,10" />
        <DataGrid Grid.Row="2" AutoGenerateColumns="False" DataContext="{Binding}" HeadersVisibility="Column" 
                  HorizontalGridLinesBrush="#ccc" VerticalGridLinesBrush="#ccc" VirtualizingStackPanel.VirtualizationMode="Standard" Background="#FFF6F6F6" >
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Delete">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ContentControl HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">                            
                        </ContentControl>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="0.5*" Binding="{Binding Path=TemplateCellID}" Header="ID"></DataGridTextColumn>
            <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellWidth}" Header="Width"></DataGridTextColumn>
            <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellHeight}" Header="Height"></DataGridTextColumn>
            <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellTop}" Header="Top"></DataGridTextColumn>
            <DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellLeft}" Header="Left"></DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
    <Grid Grid.Row="3" Margin="0,10,0,10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>

        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal">
            <TextBlock Style="{StaticResource TextDescription}" Height="26" Name="textBlock1" Text="Template Name" />
            <TextBox Style="{StaticResource TextBoxStyle}" Height="26" Name="textBox1" Width="178" />
        </StackPanel>
        <Button Grid.Column="1" Content="Save Template" Height="23" Width="95"  />
    </Grid>
</Grid>

enter image description here

This is a much better way of doing the layout. Can't believe I haven't been doing it the whole time. Thanks for the tips. — Prisoner, Mar 29 '11 at 15:47

score 0 · Answer 2 · answered Mar 24 '11 at 02:43

The simplistic answer to this is that the engine used to render the display in Visual Studio has a bug in it that impacts rendering of your application. You would need to post your XAML code for others to check but it may be worth opening your XAML in Expression Blend to see if the rendering is closer to what you see in the compiled version.

WPF Design Layout vs Compiled Layout

2 Answers2