1. 首页
  2. 问答
  3. WPF样式和网格布局问题

WPF样式和网格布局问题

2012-02-13 161 views
0

已解决编辑： 因为通过讨论并不清楚，网格结构或它们的位置没有什么错。然而，设计师歪曲了网格的位置。出于某种原因，它将网格放置在窗口的左上角，而不是在窗口的内容部分。一旦这是所有其他一切排列如预期。WPF样式和网格布局问题

我正在WPF项目上工作，并遇到了与我的表单造型有关的问题。我需要一个自定义窗口，一个没有所有窗口的东西;所以我创建了一个可以应用于我所有窗口的自定义窗口样式。在这种风格下，我创建了一个网格，以便我可以更轻松地放置默认窗口样式的默认元素。然后在我的仪表板窗口上，我应用了默认的窗口样式，并且所有外观都很好。但是，一旦我尝试在仪表板窗口内放置一个网格，事情就会开始变得诡异。 为了弥补这一点，我添加了一个Adorner Decorator到默认样式的网格中，并将其放置在该网格的内容位置。这允许我将我的内容放置在仪表板窗口中，但它不遵循仪表板网格所制作的网格规则。 所以我试图做的是创建一个自定义窗口样式，可以应用到我的所有窗口，并能够使用网格切片指定满足该窗口默认样式的区域。

这是Windows风格的有意义的部分，它为寄宿生（拖动标签），页眉，页脚，控制栏按钮（最大值，最小值，关闭）和内容设置了一个网格。

<Style x:Key="DefaultWindowStyle" TargetType="{x:Type Window}" > 
    <Setter Property="Margin" Value="5" /> 
    <Setter Property="ResizeMode" Value="NoResize" /> 
    <Setter Property="WindowStyle" Value="None" /> 
    <Setter Property="Background" Value="MidnightBlue" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Window}"> 
       <Grid Name="WindowGrid"> 
        <Grid.RowDefinitions> 
         <RowDefinition Name="TopBorderRow" Height="5" /> 
         <RowDefinition Name="TitleBarRow" Height="30" /> 
         <RowDefinition Name="RContentRow" Height="*" /> 
         <RowDefinition Name="BottomBorderRow" Height="5" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Name="LeftBorderCol" Width="5" /> 
         <ColumnDefinition Name="CContentCol" Width="*" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Width="30" /> 
         <ColumnDefinition Name="RightBorderCol" Width="5" /> 
        </Grid.ColumnDefinitions> 

        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="6" Cursor="SizeNS" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Left" VerticalAlignment="Stretch" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Width="5" Grid.Row="0" Grid.Column="5" Grid.RowSpan="4" Cursor="SizeWE" HorizontalAlignment="Right" VerticalAlignment="Stretch" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="0" Cursor="SizeNWSE" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="0" Grid.Column="5" Cursor="SizeNESW" HorizontalAlignment="Right" VerticalAlignment="Top" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="0" Cursor="SizeNESW" HorizontalAlignment="Left" VerticalAlignment="Bottom" /> 
        <s:ResizeThumb Style="{StaticResource ThumbAsBorderStyle}" Height="5" Width="5" Grid.Row="3" Grid.Column="5" Cursor="SizeNWSE" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> 

        <s:DragLabel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Style="{DynamicResource DefaultWindowTitle}" Content="{TemplateBinding Title}"/> 

        <s:TitleBarButton x:Name="Minimize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="2"> 
         <Image> 
          <Image.Style> 
           <Style TargetType="{x:Type Image}"> 
            <Setter Property="Source" Value="{DynamicResource ButtonMinimize}" /> 
            <Style.Triggers> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Source" Value="{DynamicResource ButtonMinimizeHover}"/> 
             </Trigger> 
            </Style.Triggers> 
           </Style> 
          </Image.Style> 
         </Image> 
        </s:TitleBarButton> 
        <s:TitleBarButton x:Name="Maximize" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="3"> 
         <Image> 
          <Image.Style> 
           <Style TargetType="{x:Type Image}"> 
            <Setter Property="Source" Value="{DynamicResource ButtonMaximize}" /> 
            <Style.Triggers> 
             <Trigger Property="IsMouseOver" Value="True"> 
              <Setter Property="Source" Value="{DynamicResource ButtonMaximizeHover}"/> 
             </Trigger> 
            </Style.Triggers> 
           </Style> 
          </Image.Style> 
         </Image> 
        </s:TitleBarButton> 
        <s:TitleBarButton x:Name="Close" Style="{StaticResource TitleBarButton}" Grid.Row="1" Grid.Column="4"> 
          <Image> 
           <Image.Style> 
            <Style TargetType="{x:Type Image}"> 
             <Setter Property="Source" Value="{DynamicResource ButtonClose}" /> 
             <Style.Triggers> 
              <Trigger Property="IsMouseOver" Value="True"> 
               <Setter Property="Source" Value="{DynamicResource ButtonCloseHover}"/> 
              </Trigger> 
             </Style.Triggers> 
            </Style> 
           </Image.Style> 
          </Image> 
        </s:TitleBarButton> 

        <AdornerDecorator Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="4"> 
         <ContentPresenter /> 
        </AdornerDecorator> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

而这里就是我试图把在正确的格槽装元素（那些由仪表盘窗口中创建）的仪表盘窗口的代码。网格造成的打击看起来好像所有的行和列都在正确的位置，并且它们的元素应该简单地适合，但是它们具有奇怪的边缘。因此，StudySessionPanel（128x234）应该完全适合第1行第2列，但正如您所看到的，它需要colsaps，边距和其他垃圾，才能将其放置在正确的位置。

Title="Dashboard" 
    Style="{DynamicResource DefaultWindowStyle}" mc:Ignorable="d" 
    Height="840" Width="1024"> 

    <Grid Name="DashboardGrid" Width="1024" Height="840"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="63" /> 
      <RowDefinition Height="128" /> 
      <RowDefinition Height="234" /> 
      <RowDefinition Height="18"/> 
      <RowDefinition Height="380" /> 
      <RowDefinition Height="16" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="16" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="234" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="280" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="417" /> 
      <ColumnDefinition Width="15.25" /> 
      <ColumnDefinition Width="16" /> 
     </Grid.ColumnDefinitions> 

     <cc:PanelStudySession x:Name="StudySessionPanel" Grid.ColumnSpan="3" Margin="15,66,16,62" Grid.RowSpan="2" Grid.Row="1"> 
     </cc:PanelStudySession> 

     <cc:PanelPerformance x:Name="PerformancePanel" Grid.Column="3" Grid.ColumnSpan="4" Margin="0,66,10,62" Grid.Row="1" Grid.RowSpan="2"> 
     </cc:PanelPerformance> 

     <cc:PanelProgress x:Name="ProgressPanel" Grid.Column="1" Grid.ColumnSpan="4" Margin="0,190,10,62" Grid.Row="2" Grid.RowSpan="3"> 
     </cc:PanelProgress> 

     <cc:PanelHistory x:Name="HistoryPanel" Grid.Column="5" Grid.ColumnSpan="2" Margin="0,190,15,62" Grid.Row="2" Grid.RowSpan="3">  
     </cc:PanelHistory> 

    </Grid>

这与边缘的图像，以及行/列跨越 How it looks with margins

How it looks without margins

忽略设计元素进行排序的排队，尽管其中一些得到切碎。在演讲者中运行时看起来是一样的。

Placement when ignoring designer

来源

2012-02-13 Siegeon

+0

问题是？ – 2012-02-13 19:30:44

+0

对不起，我不是更清楚。从放置中可以看出，虽然它应该在指定的单元格中，但它不是，所以对于上面的例子，我将它放到了一个给它一个奇怪设置的地方。 – Siegeon 2012-02-13 19:56:55

+0

您的示例中充满了对您的自定义代码的引用，这意味着其他人无法在Visual Studio中轻松检查您的xaml。您应该提供一个仅使用默认WPF控件的示例。 – 2012-02-13 22:45:42

回答

1

你StudySessionPanel实际上被置于行1-2（行= 1，ROWSPAN = 2）和列0-2（没有列和ColumnSpan = 3）。只要设置Grid.Row和Grid.Column如果你想把它放在一个单元格中。

来源

2012-02-13 19:38:02 RandomEngy

+0

是的，这是主要问题，如果我将它设置为其特定的行/列它甚至不关闭正确的位置。 – Siegeon 2012-02-13 19:57:46

+0

那么，当你设置特定的行/列时究竟发生了什么错误？ – RandomEngy 2012-02-13 20:52:57

+0

查看附加图片 – Siegeon 2012-02-13 22:31:31

相关问题

 相关问题