【问题标题】：How to get this window layout in WPF?如何在 WPF 中获取此窗口布局？
【发布时间】：2011-10-20 09:52:08
【问题描述】：

我正在尝试使用以下布局创建一个窗口：

Layout http://www.x-toolz.com/downloads/layout.jpg

如您所见，窗口有 3 行（15*、70*、15*）和 3 列（相同）。

如何重新设计矩形以适应角的几何形状？如果它不能用矩形来完成，我需要另一个控件，我可以在其中放置内容（网格、StackPanel）。

有什么想法吗？

提前致谢！

孟菲斯

【问题讨论】：

其中哪些形状需要包含内容？
窗口是否在八角形内，您希望内容如何布局？
agent-j: 所有这些 :) 我想要一个所有 9 种形状的网格。
Bob Vale：对不起，我不明白你的问题。整个东西都在窗户里，基本上就是窗户……
@MemphiZ 你回答了我对agent-j的一半问题，网格部分的内容呢，它们是否被裁剪，按比例旋转？

标签： wpf layout window

【解决方案1】：

您可以使用包含 9 个单元格的网格来做到这一点。创建 8 个用户控件来保存您的外部内容。如果你想调整它的大小，你将不得不使用一点魔法。

每个角落的用户控件都有一个 2x2 的网格，对于左上角的面板，我将举一个小例子。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
    mc:Ignorable="d"
    x:Class="TopLeft"
    x:Name="UserControl"
    d:DesignWidth="480" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*"/>
            <RowDefinition Height="0.5*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Stroke="Black" Grid.RowSpan="2" Fill="Black"/>
        <Rectangle Fill="Black" Stroke="Black" Grid.ColumnSpan="2"/>
        <Path Grid.Column="1" Data="M0.5,0.5 L239.5,0.5 120,120 0.5,239.5 z" Fill="Black" Grid.Row="1" Stretch="Fill" Stroke="Black" />
    </Grid>
</UserControl>

在上面的示例中，一个 2 x 2 的网格，右下角有一条对角线路径。如果您的主窗口要调整大小，您必须决定您的边框区域是相应调整大小还是作为窗口主体周围的静态框架。

这是窗口：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MegaPanel"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.3*"/>
            <RowDefinition Height="0.3*"/>
            <RowDefinition Height="0.3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.3*"/>
            <ColumnDefinition Width="0.3*"/>
            <ColumnDefinition Width="0.3*"/>
        </Grid.ColumnDefinitions>
        <local:TopLeft Margin="0"/>
    </Grid>
</Window>

我未能在 UserControl 中放置内容演示者，但您可以将其放入其中以向其中添加内容。

必须小心处理窗口的主体区域。您可以将 Margin 设置为负值，以允许正文内容溢出到框架区域。

编辑

例子：

<local:TopLeft Margin="0">
    <local:TopLeft.Tag>
        <ListBox/>
    </local:TopLeft.Tag>
</local:TopLeft>

上面对左上角的更改将 ListBox 分配给 TopLeft 用户控件的 Tag 属性。在 User 控件中，我将 ContentPresenter 绑定到 UserControl 的 Tag 属性。 ListBox 分配给标签，ContentPresenter 从标签中获取 ListBox。如果您想要多个领域的内容，您可以在 UserControl 代码隐藏中注册自定义属性。

<ContentPresenter Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,125,125" Content="{Binding Tag, ElementName=UserControl}"/>

要注册自定义 DependencyProperties，请检查 this post out。

【讨论】：

这是一个非常好的开始！我试图添加 ContentPresenter 但不幸的是我无法让它工作。如果我将 ContentPresenter 添加到 UserControl 然后在窗口中设置内容正在显示但黑色的东西消失了......你能告诉我如何正确添加 ContentPresenter 吗？
你要添加什么样的内容？它有背景颜色吗？如果是这样，使其透明或部分透明。实际上，内容演示者将坐在 UserControls 根网格面板中。
感谢您的示例。它有效，但 Bob Vale 的回答更容易实施，请查看我对他回答的评论。无论如何都非常感谢！

【解决方案2】：

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="15*" />
        <RowDefinition Height="15*" />
        <RowDefinition Height="40*" />
        <RowDefinition Height="15*" />
        <RowDefinition Height="15*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="15*" />
        <ColumnDefinition Width="15*" />
        <ColumnDefinition Width="40*" />
        <ColumnDefinition Width="15*" />
        <ColumnDefinition Width="15*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Blue">
        <!-- Top Left Content Goes Here -->
    </Grid>
    <Grid Grid.Column="2" Grid.Row="0" Background="Aqua">
        <!-- Top Middle Content Goes Here-->
    </Grid>
    <Grid Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Gold">
        <!-- Top Right Content Goes Here -->
    </Grid>
    <Grid Grid.Column="0" Grid.Row="2" Background="Magenta">
        <!-- Middle LEft Content goes here -->
    </Grid>
    <Grid Grid.Column="4" Grid.Row="2" Background="Lime">
        <!-- Middle Right Content goes here -->
    </Grid>
    <Grid Grid.Column="0" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Red">
        <!-- Bottom Left Content Goes Here -->
    </Grid>
    <Grid Grid.Column="2" Grid.Row="4" Background="DarkGoldenrod">
        <!-- Bottom Middle Content Goes Here-->
    </Grid>
    <Grid Grid.Column="3" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Silver">
        <!-- Bottom Right Content Goes Here -->
    </Grid>
    <!-- This is used to shape the center" -->
    <Polygon x:Name="main" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="White" Points="0,15 15,0 55,0 70,15 70,55 55,70 15,70 0,55" Stretch="Fill" StrokeThickness="0"/>

    <Grid Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Background="Pink" >
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=main}" />
        </Grid.OpacityMask>
        <!-- Centre Content Goes Here-->
    </Grid>

    </Grid>


</Grid>
</Window>

这会产生这种布局。限制是 WPF 会将其边界裁剪为矩形，因此任何溢出区域的内容都将变为不可见（即裁剪）。

您可以通过对每个网格元素应用填充以创建适合每个区域的矩形区域来部分解决此问题。

【讨论】：

我选择了这个作为答案，因为它更容易实现，并且不必为每个角创建形状。太棒了，谢谢！
一个问题：如果我将 Poligons 填充设置为透明，它看起来很奇怪。任何想法如何解决这个问题？我想让我的桌面通过那里...