如何在WPF中获得此窗口布局？

Question

我试图创建一个具有以下布局的窗口：

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

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

如何重新设计矩形以适合角的几何形状？ 如果无法使用矩形完成操作，则需要另一个控件，可以在其中放置内容（网格，堆栈面板）。

有任何想法吗？

提前致谢！

MemphiZ

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中，但是您可以将其放入其中以添加内容。

窗口的主体区域必须小心处理。 您可以将“边距”设置为负值，以使主体的内容溢出到框架区域中。

编辑

例：

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

上面对左上角的更改将ListBox分配给TopLeft用户控件的Tag属性。 在用户控件中，将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，请查看此帖子 。

Answer 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会将边界裁剪到矩形，因此溢出区域的任何内容都将变为不可见（即，被裁剪）。

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