如何在WPF中获得此窗口布局? [英] How to get this window layout in WPF?

问题描述

im尝试创建具有以下布局的窗口:

im trying to create a Window with the following layout:

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

您可以看到该窗口具有3行(15 *，70 *，15 *)和3列(相同).

As you can see the window has 3 rows (15*, 70*, 15*) and 3 columns (same).

如何重新设计矩形以适合角的几何形状? 如果无法使用矩形完成操作，则需要另一个控件来放置内容(网格，StackPanel).

How can I redesign a rectangle to fit the geometry of the corners? If it can't be done with rectangles i would need another control that I can place content (Grid, StackPanel) in.

有什么想法吗?

提前谢谢！

MemphiZ

推荐答案

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

This produces this layout. The limitation is that WPF does its bounds clipping to rectangles so any content that overflows the regions will be made invisible (i.e. Clipped).

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

You could partially work around this by applying padding to each grid element to a create a rectangular area that fits inside each region.

这篇关于如何在WPF中获得此窗口布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！