1. 首页
  2. 问答
  3. WPF设计布局vs编译布局

WPF设计布局vs编译布局

2011-03-24 164 views
1

我在VS2010中的设计和编译时的布局有差异。看到图像波纹管：WPF设计布局vs编译布局

设计视图 enter image description here

编译 enter image description here

我已阅读并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>

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>

来源

2011-03-24 Prisoner

+0

如果您发布的问题XAML这将是有益的。 – 2011-03-24 02:42:26

+0

没有任何xaml，这将很难诊断。 – ChrisWue 2011-03-24 02:44:06

+0

添加了XAML。 – Prisoner 2011-03-24 02:51:07

回答

2

我想你会发现这个效果更好。它在设计师和运行时看起来是一样的。

我所做的一切就是删除边距并将行/列添加到网格（以及模板标签/文本框的堆叠面板）。

<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

来源

2011-03-24 03:32:41 grantnz

+0

这是一个更好的布局方式。不能相信我一直都没有这样做过。感谢您的提示。 – Prisoner 2011-03-29 15:47:59

0

的简单答案，这是一个用于呈现在Visual Studio中显示的发动机具有影响渲染应用程序的错误。您需要发布您的XAML代码供其他人检查，但值得在Expression Blend中打开XAML以查看渲染是否与您在编译版本中看到的更接近。

来源

2011-03-24 02:43:07

+0

我会给它一个去看看是否有帮助。 – Prisoner 2011-03-24 02:51:29

相关问题

 相关问题