Есть три элемента управления, используемые для макета в Silverlight. Сетка, Стеклопанель и Холст.
Контроль холста
Silverlight предоставляет элемент Canvas, который можно использовать для группировки связанного содержимого. Элемент Canvas может иметь вложенные дочерние элементы. Обычно он используется, когда дети должны быть расположены в точных координатах x и y.
Элемент управления StackPanel
Элемент управления StackPanel представляет собой простую панель макета, которая упорядочивает содержимое в одну строку, которая может быть ориентирована по горизонтали или вертикали (по умолчанию). Элемент управления StackPanel позволяет нам размещать объекты один поверх другого или рядом друг с другом.
Grid Control
Элемент управления Grid позволяет определять информацию о строках и столбцах в одном месте с помощью тегов RowDefinition и ColumnDefinition.
Чтобы получить лучшее представление об этих элементах управления, я создал новый проект и перетащил элемент управления canvas в свою основную форму:
Если я посмотрю на свой код XAML, то увижу, что Margin показывает мне, где расположен элемент управления canvas:
<Canvas Height="100"
HorizontalAlignment="Left"
Margin="108,86,0,0"
Name="canvas1"
VerticalAlignment="Top"
Width="200" />
Если я перемещу этот элемент управления, это число изменится. Что происходит, когда я нажимаю на эти стрелки?
Позиция все та же. Это просто интерпретируется по-разному:
<Canvas Height="100"
HorizontalAlignment="Right"
Margin="0,0,148,421"
Name="canvas1"
VerticalAlignment="Bottom"
Width="200" />
Нажав на эти стрелки, я изменил HorizontalAlignment и VerticalAlignment, а также изменил Margin.
Давайте предположим, что я хочу центрировать свой элемент управления canvas прямо по центру панели содержимого, я бы зашел в окно свойств и изменил и VerticalAlignment, и HorizontalAlignment на «Stretch». Следующее, что я делаю, это устанавливаю все поля на «0». Маржа содержит 4 числа, разделенных запятыми. И они представляют левую сторону, верх, правую сторону и низ:
В любом случае, если заменить все поля на «0», мой элемент управления canvas будет посередине:
Давайте продолжим и посмотрим, как это с Grid Control. Я удаляю этот элемент управления canvas и перетаскиваю элемент управления Grid в свою основную форму:
Мой код XAML показывает, что в моей ContentPanel есть новый Grid Control:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid Height="302"
HorizontalAlignment="Left"
Margin="67,156,0,0"
Name="grid1"
VerticalAlignment="Top"
Width="314" />
Назначение таблицы — добавить ряд строк и столбцов, а затем расположить элементы управления в каждой из этих ячеек, созданных по определению этих строк и столбцов.
Итак, позвольте мне определить две строки и два столбца, добавив немного кода. Сначала я должен закрыть Грид. Я удаляю косую черту сразу после ширины и добавляю одну </ Grid>
Теперь я могу добавить свой код между ними:
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
Я определил две строки: первый 80 пикселей в высоту, второй 80 пикселей плюс то, что осталось от этой области. Если бы я просто поставил там звездочку, он бы заполнил весь контроль. И я определил два столбца размером 100 плюс и 100 пикселей:
Если в основной форме навести курсор на элемент управления сеткой, я могу добавить дополнительные строки и столбцы, просто щелкнув мышью. Если я хочу избавиться от строки или столбца, я просто выбираю его и перетаскиваю.
Щелчок правой кнопкой мыши внутри моего Grid Control дает мне больше возможностей. Или я могу пойти в окно свойств и там выбрать RowDefinition или ColumnDefinition. Это вызывает Редактор Коллекции, где я могу добавить больше строк или столбцов и установить их свойства:
В любом случае, зачем мне определять строки и столбцы? Например, я мог бы хотеть кнопку в левой нижней области:
<Button Width="100"
Height="100"
Content="Hi"
Grid.Row="1"
Grid.Column="0" />
Элемент управления кнопки обычно не имеет свойства Grid.Row или GridColumn. Он получает эти свойства только тогда, когда находится внутри Grid. Эти свойства называются «прикрепленными свойствами».
Кнопка находится в строке 1 и в столбце 0.
Давайте посмотрим на элемент управления StackPanel.
StackPanel довольно прост. Все элементы управления, содержащиеся в StackPanel, отображаются в вертикальной стопке.
Сейчас я перетаскиваю элемент управления StackPanel в основную форму. Затем я добавляю несколько текстовых блоков, набирая код:
<StackPanel Height="168"
HorizontalAlignment="Left"
Margin="39,46,0,0"
Name="stackPanel1"
VerticalAlignment="Top"
Width="378">
<TextBlock Text="FirstOne" />
<TextBlock Text="SecondOne" />
<TextBlock Text="ThirdOne" />
<TextBlock Text="FourthOne" />
</StackPanel>
Обратите внимание, что, как и раньше с элементом управления Grid, я закрыл </ StackPanel>, чтобы иметь возможность добавлять свой код.
У меня есть четыре текстовых блока, сложенных друг на друга.
Давайте продолжим и добавим файл CanvasPage.xaml в мой проект. Я перетаскиваю элемент управления canvas на правую страницу, созданную. Предположим, мне нужно расположить различные элементы управления в очень определенных местах на экране. Это то, для чего предназначен Canvas. Вместо использования полей для определения положения элементов управления внутри холста, с помощью прикрепленных свойств элементы управления определяют свойства left и top относительно верхнего левого угла самого холста.
Я перетащил два текстовых блока в свой элемент управления canvas. Глядя на мой код XAML, я замечаю, что оба текстовых блока имеют свойство top и свойство left:
<TextBlock Canvas.Left="26"
Canvas.Top="23"
Height="30"
Name="textBlock1"
Text="TextBlock" />
<TextBlock Height="30"
Name="textBlock2"
Text="TextBlock"
Canvas.Left="170"
Canvas.Top="171" />
Если я переместу холст, чтобы изменить его положение, свойства «top» и «left» текстовых блоков внутри холста останутся прежними.
Продолжение следует…
Источник: http://andreahaubner.blog.com/2011/02/21/layout-controls-in-silverlight/