Элемент управления Grid

Оценить
(1 голос)

Панель Grid используется для расположения по рядам и столбцам (аналогично таблице HTML или элементу управления TableLayoutPanel в WinForms).

Обычным применением для элемента управления Grid являются диалоги или формы ввода данных, где метки и значения существуют бок о бок; мы можем использовать столбцы сетки для выравнивания элементов по горизонтали, а ряды — для выравнивания их по вертикали.

Столбцы создаются в сетке при помощи элемента Grid.ColumnDefinitions. Например, этот фрагмент кода XAML создает сетку с тремя столбцами:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinitionx/ColumnDefinition>

<ColumnDefinitionx/ColumnDefinition>

<Co lumnDe f ini t ionx / Co lumnDe f ini t i on>

</Grid.ColumnDefinitions>

</Grid>

Аналогичным образом, элемент Grid.RowDefinitions определяет ряды внутри сетки:

<Grid>

<Grid.RowDefinitions>

<RowDe f ini t ionx /RowDe f ini t ion>

<RowDefinitionx/RowDefinition>

<RowDe f ini t ionx /RowDe f ini t ion>

</Grid.RowDefinitions>

</Grid>

Визуальный конструктор WPF имеет также интерактивные свойства, которые позволяют добавлять и удалять ряды и столбцы, а также производить изменение их размеров. На рис. 16.12 в окне показана сетка из двух столбцов и шести рядов. Обратите внимание, что визуальный конструктор показывает линии сетки, разграничивающие ряды и столбцы, и что слева и сверху элемента управления Grid имеется затененная граничная область. Эта гра­ничная область не только показывает нам текущий размер (ширину или высоту) столбца или ряда, но мы также можем использовать эту граничную область для создания новых рядов или столбцов (простым щелчком в том месте, где мы хотим разместить новый элемент). Мы можем также перетащить линии границ рядов или столбцов для увеличения или уменьшения размеров ряда или столбца. Описание: image425

Показанное на рис. 16.13 диалоговое окно легко получить при помощи панели Grid (код XAML показан в листинге 16.1). Вероятно, элемент управления Grid является самой гибкой и важной панелью практически для всех вариантов компоновки. Поэтому при добавлении нового элемента окна в проект WPF это окно будет по умолчанию содержать элемент управления Grid.

Листинг 16.1. Реализация диалога при помощи панели Grid

<Window х:Class="ContosoAvalon.Grid"

xmlns="http: //schemas .microsoft. com/winfx/2006/xaml/presentation" xmlns: x="http: //schemas .microsoft. com/winfx/2006/xaml" Title="Grid" Height="300" Width="300">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="80*"x/ColumnDefinition> <ColumnDefinition Width="*"x/ColumnDef inition> <ColumnDefinition Width="*"x/ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDe f ini t ionx /RowDe f ini t ion>

<RowDefinition></RowDefinition>

<RowDe f i ni t ionx / RowDe f in i t i on>

<RowDe f ini t i onx / RowDe f ini t i on>

<RowDefinitionx/RowDefinition>

<RowDe f ini t ionx/RowDe f ini t ion>

<RowDefinitionX/RowDefinition>

<RowDefinitionx/RowDefinition>

</Grid.RowDefinitions>

<TextBox Margin="5,5" BorderBrush="Gray" Grid.Со1шпп="1" Grid.Row="4"> </TextBox>

<Label Grid.Со1шпп="1" Grid.Row="5">{Date}</Label>

<Button Margin="5,5" Grid.Со1шпп="1" Grid.Row="6">0K</Button>

<Button Margin="5,5" Grid.Column="2" Grid.Row="6">Cancel</Button>

</Grid>

</Window>

В этом коде XAML необходимо отметить три вещи.

□    Для выравнивания элементов управления желательным образом мы использовали кон­цепцию объединения столбцов.

□    Для того чтобы дать каждой метке, текстовому полю (и прочим элементам) некоторое свободное пространство, мы использовали свойство Margin. Без указания свойства Margin любой элемент управления автоматически заполнит ту ячейку, в которой он на­ходится (а это означает, что у нас совершенно не останется расстояния между элемен­тами управления — как в горизонтальном, так и в вертикальном направлении).

□    В определениях столбцов элемента Grid мы используем звездочку для того, чтобы ука­зать пропорциональный размер. Иначе говоря, второй и третий столбцы делят между собой поровну все пространство, которое остается после визуализации первого столбца. Мы можем также настроить коэффициент "пропорциональности" (для этого надо ука­зать число, например: ColumnDefinition.Width="2*").

Элемент управления StackPanel
Стили и шаблоны
Привязка данных
Перенаправленные события
Начинаем компоновку

Добавить комментарий


Защитный код
Обновить

© 2017 www.visualstudios.ru. Все права защищены.