Компоновка в Silverlight

Стандартные элементы компоновки

При построении пользовательского интерфейса важное место занимает компоновка - размещение содержимое внутри формы приложения. Компоновка осуществляется при помощи контейнеров компоновки - Grid, UniformGrid, StackPanel, WrapPanel, DockPanel, Canvas. Благодаря им гораздо проще осуществлять позиционирование элементов в окне приложения. Различные контейнеры могут содержать внутри себя другие контейнеры. Также различные элементы управления могут содержать контейнеры компоновки. Все контейнеры компоновки являются наследниками класса Panel, поэтому поддерживают все те же свойства, которые есть у класса Panel, например, свойство Children, с помощью которого можно получить все вложенные в контейнер элементы.

Grid

Это наиболее мощный и часто используемый контейнер, напоминающий обычную таблицу. Он содержит столбцы и строки, количество которых задается пользователем. Например, количество строк и столбцов можно задать с помощью свойств RowDefinitions и ColumnDefinitions соответственно. Чтобы задать позицию элемента управления, в разметке элемента нужно прописать значения свойств Grid.Column и Grid.Row, тем самым указывая в каком столбце и строке будет находиться элемент. Кроме того, если мы хотим растянуть элемент управления на несколько строк или столбцов, то укажем свойства Grid.ColumnSpan и Grid.RowSpan, как в следующем примере:

    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Grid.Row="0" Content="Кнопка 11"  />
        <Button Grid.Column="2" Grid.Row="2" Content="Кнопка 33"  />
        <Button Grid.Column="0" Grid.Row="1" Content="Кнопка по середине" Grid.ColumnSpan="3"  />
    </Grid>

То есть у нас получится следующая картина:

Но если в предыдущем случае у нас строки и столбцы были равны друг другу, то теперь попробуем их настроить столбцы по ширине, а строки - по высоте. Есть три варианта настройки:

• Автоматическая настройка, когда столбец или строка занимает то место, которое им нужно

<ColumnDefinition Width="Auto" />
<RowDefinition Height="Auto" />

• Абсолютные размеры, когда высота и ширина указываются в единицах, независимых от устройства

<ColumnDefinition Width="150" />
<RowDefinition Height="150" />

Также абсолютные размеры можно задать в пикселях, дюймах, сантиметрах или точках:

пиксели	px
дюймы	in
сантиметры	cm
точки	pt

Например,

<ColumnDefinition Width="1 in" />
<RowDefinition Height="10 px" />

• Пропорциональные размеры.

Например, ниже задаются два столбца, второй из которых имеет ширину в четверть от ширины первого:

<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.25*" />

По умолчанию границы между столбцами и строками в элементе Grid не видимы, для их отображения нажо задать свойство ShowGridLines="True" у элемента Grid

StackPanel

Это более простой элемент конпоновки. Он располагает все элементы в ряд либо по горизонтали, либо по вертикали в зависимости от свойства Orientation. Например,

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0">Horizontal StackPanel</TextBlock>
        <StackPanel Orientation="Horizontal" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Background="Blue" Width="40" Height="40"/>
            <Button Background="White" Width="40"  Height="40"/>
            <Button Background="Red" Width="40" Height="40"/>
        </StackPanel>
        <StackPanel Orientation="Vertical" Grid.Row="1" VerticalAlignment="Center">
            <TextBlock>Vertical StackPanel</TextBlock>
            <Button Background="Blue" Width="40" Height="40"/>
            <Button Background="White" Width="40"  Height="40"/>
            <Button Background="Red" Width="40" Height="40"/>
        </StackPanel>
    </Grid>
</Window>

И еще пример использования StackPanel

<UserControl x:Class="TestApplication.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="250" d:DesignWidth="300">
    <StackPanel>
        <TextBlock Text="Stack" HorizontalAlignment="Center" />
        <Button Content="Button1" />
        <Button Content="Button2" />
        <Button Content="Right Button" HorizontalAlignment="Right" />
        <Button Content="Left Button" HorizontalAlignment="Left" />
    </StackPanel>
</UserControl>

Canvas

Для размещения на этой панели необходимо указать для элементов точные координаты. Либо можно указать координаты относительно левой, правой, нижней и верхней границ Canvas, используя свойства Canvas.Left и Canvas.Top. Например,

 
<Canvas Background="Lavender">
            <Button Background="AliceBlue" Content="Top Left" Canvas.Top="20" Canvas.Left="20" />
            <Button Background="Blue" Content="Top Right" Canvas.Top="20" Canvas.Left="210"/>
            <Button Background="Aquamarine" Content="Bottom Left" Canvas.Top="200" Canvas.Left="20"/>
            <Button Background="DarkGreen" Content="Bottom Right" Canvas.Top="200" Canvas.Left="210"/>
 </Canvas>
 

Кроме этих панелей компоновки имеются еще несколько, но уже не входящие в стандартную комплектацию Silverlight, а являющиеся частью сторонних библиотек. Так, Silverlight Toolkit, который вы можете найти на сайте http://silverlight.codeplex.com/, подключает в проект такие панели, как DockPanel и WrapPanel, которые имеются в WPF, но отсутствуют в Silverlight.

GridSplitter

GridSplitter собственно не контейнер, в некотором случае он помогает создавать интерфейсы наподобие элемента SplitContainer в WinForms, только более функциональные. Он представляет собой некоторый разделитель между столбцами или строками, путем сдвига которого можно регулировать ширину столбцов и высоту строк.

Чтобы использовать GridSplitter, надо добавить в проект ссылку на библиотеку System.Windows.Controls и затем еще подключить соответствующее пространство имен Silverlight xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls". Во-вторых, GridSplitter надо поместить в определенную ячейку элемента Grid:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <controls:GridSplitter Grid.Column="1" ShowsPreview="False" Width="3" 
        HorizontalAlignment="Center" VerticalAlignment="Stretch" />
        <Canvas Grid.Column="0" Background="Lavender">
            <TextBlock>Левая панель</TextBlock>
            <Button Content="Левая кнопка" Canvas.Top="20"/>
        </Canvas>
        <Canvas Grid.Column="2" Background="LightGreen">
            <TextBlock>Правая панель</TextBlock>
            <Button Content="Правая кнопка" Canvas.Top="20"/>
        </Canvas>
    </Grid>

Двигая центральную линию, разделяющую правую и левую части, мы можем устанавливать их ширину. Но в отличие от элемента SplitContainer здесь можно установить различное количество динамически регулируемых частей окна. Немного усовершенствуем предыдущий пример:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <controls:GridSplitter Grid.Column="1"  Grid.Row="0" ShowsPreview="False" Width="3" 
        HorizontalAlignment="Center" VerticalAlignment="Stretch" />
        <controls:GridSplitter Grid.Row="1" Grid.ColumnSpan="3" Height="3" 
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        <Canvas Grid.Column="0" Grid.Row="0">
            <TextBlock>Левая панель</TextBlock>
            <Button Content="Левая кнопка" Canvas.Top="20"/>
        </Canvas>
        <Canvas Grid.Column="2" Grid.Row="0" Background="LightGreen">
            <TextBlock>Правая панель</TextBlock>
            <Button Content="Правая кнопка" Canvas.Top="20"/>
        </Canvas>
        <Canvas Grid.ColumnSpan="3" Grid.Row="2" Background="#dfffff">
            <TextBlock Canvas.Left="60">Нижняя панель</TextBlock>
            <Button Content="Правая кнопка" Canvas.Top="30" Canvas.Left="60"/>
        </Canvas>
    </Grid>