wpf - 如何在 WPF 中获取此窗口布局？

Question

我正在尝试创建一个具有以下布局的窗口:

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

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

我怎样才能重新设计一个矩形来适应角的几何形状？如果不能用矩形完成，我将需要另一个控件，我可以在其中放置内容(Grid、StackPanel)。

有什么想法吗？

提前致谢!

孟菲斯

Answer 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 中放置一个 Content presenter，但您可以将它放在那里以向其添加内容。

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

编辑

例子:

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

上面对 Top left 的更改将 ListBox 分配给 TopLeft 用户控件的 Tag 属性。在用户控件中，我将 ContentPresenter 绑定(bind)到 UserControl 的 Tag 属性。 ListBox赋值给tag，ContentPresenter从Tag中获取ListBox。如果您需要多个区域的东西，您可以在 UserControl 代码隐藏中注册自定义属性。

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

用于注册自定义 DependencyProperties 检查 this post出。