CODEWITHSUNDEEP
c#wpfvisual-studio-2010.net-4.0
Prisoner
Prisoner

Reputation: 27628

WPF Design Layout vs Compiled Layout

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>

Upvotes: 1

Views: 855

Answers (2)

grantnz
grantnz

Reputation: 7423

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

Upvotes: 2

Brian Lyttle
Brian Lyttle

Reputation: 14579

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.

Upvotes: 0

Related Questions