Question

已解决的编辑：因为通过讨论不清楚网格的结构或它们的位置没有什么问题。然而，设计师误解了网格的位置。由于某种原因，它将网格放在窗口的左上角，而不是在窗口的内容部分内。一旦考虑到预期的其他所有内容。

我正在开发一个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，margin和其他垃圾才能将它放在正确的位置。

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

Answer 1

您的StudySessionPanel实际上放在1-2行（Row = 1，RowSpan = 2）和0-2列（没有列和ColumnSpan = 3）。如果您想将其放在单元格中，只需设置Grid.Row和Grid.Column。

WPF样式和网格布局问题

1 个答案: