WPF Design Layout против скомпилированного макета

Question

Я получаю различия между дизайном в VS2010 и макетом при компиляции. Смотрите изображения ниже:

Представление «Дизайн»

Составлено

Я прочитал это , и мне кажется, что я не могу выбрать что-нибудь, что поможет мне. Почему это происходит?

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>

Answer 1

Я думаю, вы обнаружите, что это работает лучше.Он выглядит одинаково и в дизайнере, и когда вы его запускаете.

Все, что я сделал, это удалил поля и добавил строки / столбцы в вашу сетку (и панель стека для метки / текстового поля шаблона).

<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>

Answer 2

Упрощенный ответ на этот вопрос заключается в том, что в движке, используемом для визуализации дисплея, в Visual Studio есть ошибка, которая влияет на визуализацию вашего приложения.Вам нужно будет опубликовать свой код XAML, чтобы другие могли проверить, но, возможно, стоит открыть свой XAML в Expression Blend, чтобы увидеть, ближе ли рендеринг к тому, что вы видите в скомпилированной версии.