В первой части данной статьи, которую опубликовал вчера, я описал три контейнера – StackPanel, WrapPanel и DockPanel. Но модель организации пользовательского интерфейса (Layout) строится не только на этих элементах. Надо обязательно рассмотреть такой контейнер, как Grid (сетка). Ее очень часто используют для создания такого интерфейса, который можно было бы масштабировать – и все масштабы сохранялось бы на главной форме.
Итак, узнаем что такое Grid. C помощью него можно разбить наше окно на множество ячеек, в которые можно будет поместить какие-либо контейнеры (можно даже Grid). Это позволяет нам четко разделить главное окно программы, и расположить все элементы строго на свои места. При масштабировании (как я уже сказал выше) эти элементы также будут занимать свои места (если мы это укажем).
Пример работы с сеткой мы уже видели в самом первом примере, повторяться не буду. Давайте попробуем создать сетку – и разделить ее на несколько ячеек. Так как мы будем создавать внутри окна таблицу, то надо вспомнить составные части таблицы. У нее есть строки и колонки. Поэтому нам надо будет определить в своей программе строки (Row) и колонки (Column) и задать их размеры. Скопируйте код:
<Window x:Class="WpfApplication6.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" WindowStartupLocation="CenterScreen">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
Grid.ColumnDefinitions>
Grid>
Window>
В объявлении Grid мы добавили свойство ShowGridLines, которое приняло значение истина. Оно, как не трудно догадаться из перевода этого свойства, отображает разделительные полосы между строками и колонками. Символ процента (*) эквивалентен символу процента (%) в HTML, то есть он показывает, что наша строка (или колонка) будет занимать всю длину (высоту) окна. Поэтому у строки мы указываем только высоту, а длина будет максимальна. У колонки мы также объявляем только ширину, а высота будет максимальной. Нажмите F5 в Visual Studio и просмотрите результат. Попробуйте изменить размеры окна – у нас строки и колонки также изменят размер.
Также можно размеры строк и колонок задать в абсолютных значениях (например: Height=”200”) либо задать относительно-абсолютный размер (Width=”50*”). Кроме того, если у нас есть какой-либо контент внутри ячейки – сделать так, чтобы высота и ширина ее изменялась в зависимости от размеров контента (Height=”Auto”, Width=”Auto”). Попробуйте сами это сделать.
Когда мы разделяем наше окно на строки и колонки, каждой из них назначается свой номер (нумерация будет начинаться с нуля, не забывайте). Но эти параметры покажут, где надо разместить контент (будет занята соответствующая ячейка). Мы можем воспользоваться двумя дополнительными свойствами (который указывать не обязательно) – это Grid.RowSnap и Grid.ColumnSnap. Они принимают значения с единицы. Они позволяют вытянуть наш контент на определенное количество ячеек. Например, если мы хотим, чтобы наша кнопка вытянулась на две соседних колонки – мы укажем Grid.ColumnSnap=”2”. Вставьте нижележащий код в Visual Studio и запустите:
<Window x:Class="WpfApplication6.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" WindowStartupLocation="CenterScreen">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
Grid.ColumnDefinitions>
<Button Content="Button" Grid.Column="0" Grid.Row="0" Grid.RowSpan="1" Grid.ColumnSpan="2"/>
Grid>
Window>
Попробуйте поменять какие-либо параметры, попробуйте на практике – что такое Grid.
Статьи получаются объемными, так что на этом закончим. Но завтра я расскажу о новых элементах-контейнерах, которые можно использовать для построения богатых пользовательских интерфейсов в WPF. Но вот окно программы, которое чуть посложнее:
Комментариев нет:
Отправить комментарий