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

Question

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

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

如您所见,窗口有3行(15*,70*,15*)和3列(相同).

如何重新设计矩形以适应角落的几何形状？如果不能用矩形完成,我需要另一个控件,我可以放置内容(Grid,StackPanel).

有任何想法吗？

提前致谢!

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中放置Content Presenter,但您可以将其添加到其中以向其添加内容.

窗户的身体区域必须小心处理.您可以将"边距"设置为负值,以允许正文的内容溢出到框架区域中.

编辑

例:

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

上面的左上角更改将ListBox分配给TopLeft usercontrol的Tag属性.在User控件中,我将ContentPresenter绑定到UserControl的Tag属性.ListBox被分配给标记,ContentPresenter从Tag获取ListBox.如果你想在几个方面做事,你可以在UserControl代码隐藏中重新定义自定义属性.

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

要注册自定义DependencyProperties,请查看此帖子.