WPF 设计布局与编译布局答案

【问题标题】：WPF Design Layout vs Compiled LayoutWPF 设计布局与编译布局
【发布时间】：2011-07-21 19:28:32
【问题描述】：

我发现 VS2010 中的设计与编译时的布局之间存在差异。见下图：

设计视图

已编译

我已阅读this，但我似乎无法挑选出任何对我有帮助的东西。为什么会这样？

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>

基本风格：

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

数据网格样式：

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

【问题讨论】：

如果您发布问题 xaml 将会很有帮助。
如果没有任何 xaml，这将很难诊断。
作为尝试定位问题根源的提示，请在您的网格上打开ShowGridLines。您将能够识别哪些组件已移动，这是解决问题的第一步。
@bevan，这可以在哪里完成？
转到构成表单基础的网格，并在属性编辑器或 xaml 中将 ShowGridLines 设置为 true。见msdn.microsoft.com/en-us/library/…

标签： c# wpf visual-studio-2010 .net-4.0

【解决方案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>

【讨论】：

这是一种更好的布局方式。不敢相信我一直没有这样做。感谢您的提示。

【解决方案2】：

对此的简单回答是，用于在 Visual Studio 中呈现显示的引擎中存在影响应用程序呈现的错误。您需要发布您的 XAML 代码以供其他人检查，但可能值得在 Expression Blend 中打开您的 XAML 以查看呈现是否更接近您在编译版本中看到的内容。

【讨论】：

我会试试看是否有帮助。