WPF mise en page Conception vs mise en page Compilé

Question

Je reçois des différences entre la conception dans VS2010 et la mise en page lors de la compilation. Voir les images ci-dessous:

Voir Design

Compilé

J'ai lu this et je ne semble pas être en mesure de choisir quoi que ce soit qui me aidera. Pourquoi cela arrive-t-il?

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

Je pense que vous verrez que cela fonctionne mieux. Il semble la même chose dans le concepteur et quand vous l'exécutez.

Tout ce que je l'ai fait est de supprimer vos marges et ajouter des lignes/colonnes à votre réseau (et un StackPanel pour le modèle d'étiquette/zone de texte).

<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

La réponse simpliste à cela est que le moteur utilisé pour rendre l'affichage dans Visual Studio a une bug qui a un impact sur le rendu de votre application. Vous aurez besoin de poster votre code XAML pour que les autres puissent le vérifier, mais cela peut valoir la peine d'ouvrir votre XAML dans Expression Blend pour voir si le rendu est plus proche de ce que vous voyez dans la version compilée.