Как получить этот макет окна в WPF? - PullRequest
Новая
       14

Как получить этот макет окна в WPF?

2 голосов
/ 05 августа 2011

я пытаюсь создать окно со следующим макетом:

Макет http://www.x -toolz.com / downloads / layout.jpg

Как видите, в окне 3 строки (15 *, 70 *, 15 *) и 3 столбца (одинаковые).

Как мне изменить дизайн прямоугольника, чтобы он соответствовал геометрии углов? Если это невозможно сделать с помощью прямоугольников, мне понадобится другой элемент управления, в который я могу поместить содержимое (Grid, StackPanel).

Есть идеи?

Заранее спасибо!

MemphiZ

Ответы [ 2 ]

5 голосов
/ 05 августа 2011

Вы можете сделать это с сеткой из 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>

Мне не удалось добавить Content Contest в UserControl, но вы добавили бы его туда, чтобы добавить к нему контент.

Область тела окна должна быть обработана с некоторой осторожностью. Вы можете установить Margin в отрицательные значения, чтобы содержимое тела могло вытекать в области рамки.

Here is what the Top and Left Side look like.

Редактировать

Пример: 

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

Приведенное выше изменение в верхнем левом углу назначает ListBox свойству Tag пользовательского элемента управления TopLeft. В пользовательском элементе управления я связал ContentPresenter со свойством Tag пользовательского элемента управления. ListBox назначен тегу, ContentPresenter получает ListBox из тега. Вы можете повторно настраивать пользовательские свойства в коде UserControl, если вам нужны вещи в нескольких областях. 

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

Для регистрации пользовательских DependencyProperties проверьте этот пост out.

2 голосов
/ 05 августа 2011 
<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 выполняет ограничение границ по прямоугольникам, поэтому любой контент, который выходит за пределы областей, будет сделан невидимым (т.е. обрезанным).

Вы можете частично обойти эту проблему, применив отступы к каждому элементу сетки, чтобы создать прямоугольную область, которая вписывается в каждую область.

Example

...