Различные способы выполнения размещения доступны в SilverLight

В Silverlight предусмотрено три способа для управления размещения панели Canvas (холст), Grid (сетка) и Stack (стек). Каждая из этих методологий подходит для различных ситуаций согласно требованиям к размещению. Все эти элементы управления размещением наследуются от класса Панель. В следующих разделах тщательно разбирается каждый из них, чтобы можно было понять, как они работают.

Как на самом деле работает размещение Canvas (холст)?

Canvas – это простейшая методология для управления размещением. Она поддерживает абсолютное позиционирование при помощи координат ‘X’ и ‘Y’. ‘Canvas.Left (холст левый)’ помогает задать координату X, в то время как ‘Canvas.Top (холст верхний)’ помогает задать координаты ‘Y’.

Ниже приведен простой фрагмент кода, показывающий, как прямоугольный объект устанавливается в нужное положение с координатами (50,150) при помощи ‘Canvas’.

<Canvas x:Name="MyCanvas">
<Rectangle Fill="Blue" Width="100" 
Height="100" 
Canvas.Left="50" 
Canvas.Top="150"/>
</Canvas>

Ниже показано, как выглядит изображение на экране. Когда вы выполните код, программа просмотра XAML поместит прямоугольный объект в позицию с абсолютными координатами ‘X” и ‘Y’.

Как можно реализовать размещение сетки?

Размещение по сетке помогает вам помещать элементы управления при помощи строк и столбцов. Это очень похоже на определенную в HTML таблицу.

Ниже показана простая таблица с двумя столбцами и двумя строками, заданная при помощи ‘Grid’.  Показано, как выглядит табличное представление данных на экране. При помощи ‘Grid.ColumnDefinition (задание столбца сетки)’ были определены два столбца, и при помощи ‘Grid.RowDefinition (задание строки сетки)’ были определены две строки. Затем были созданы 4 текстовых поля, которые после этого были определены в каждой секции при помощи ‘Grid.Column’ и ‘Grid.Row’. Например, чтобы указать позицию первого столбца, необходимо установить ‘Grid.Column’ в ‘0’ и ‘Grid.Row’ в ‘0’. Для всех секций использовался одна и та же схема, и можно увидеть, что все текстовые поля размещены в соответствующих секциях.

Как можно реализовать размещение стека?

Название соответствует поведению. Стек позволяет расположить ваши элементы интерфейса вертикально или горизонтально.

Например, ниже показаны 4 элемента, которые размещены в элементе панели стека. Можно видеть, как стек выравнивает / ставит элементы один над другим. Можно расставить элементы интерфейса горизонтально или вертикально в зависимости от типа вашего размещения.