Быстро о Layout-ах WPF – Grid
- Быстро о Layout-ах WPF
- Быстро о Layout-ах WPF – Grid
В продолжение поста Быстро о Layout-ах WPF.
Grid позволяет организовывать очень сложные интерфейсы, так как в ячейки можно засунуть любой контент, включая и другие панели, в том числе и грид.
Grid можно разбить на ячейки добавлением столбцов и строк:
<Grid.RowDefinitions> <RowDefinition Height="3*"/> <RowDefinition Height="*"/> <RowDefinition Height="150"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="4*"/> <ColumnDefinition/> </Grid.ColumnDefinitions>
Ширина столбцов и высота строк может задаваться как конкретным значение, так и относительным (* – аналог % в html). Так же можно значение атрибута выставить в Auto – тогда ширина и высота будет зависеть от размеров контента.
В ячейки грида можно запихать любой контент, в том числе и другие панели. Запихивается с помощью свойств Grid.Column, Grid.Row и Grid.ColumnSpan, Grid.RowSpan. Нумерация столбцов и строк начинается с 0:
<Button Content="Button" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="3" />Button будет находиться в 2й строке, во 1м столбце и будет занимать 2 столбца и 3 строки.
Так же в гриде можно определить разделители – GridSplitter:
<GridSplitter Grid.Row="1" Grid.ColumnSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="Green" ShowsPreview="true" ResizeDirection="Rows" Height="5"/>
Для изменения размера строк надо указать HorizontalAlignment=”Stretch”, VerticalAlignment – Top, Bottom или Center, ResizeDirection=”Rows”.
Для изменения размера столбцов надо указать VerticalAlignment=”Stretch”, HorizontalAlignment – Top, Bottom или Center, ResizeDirection можно не указывать.
Вот в общем то и все..
Исходный код примера:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="WpfLayouts.Grid" x:Name="Window" Title="Grid" Width="640" Height="480"> <Grid x:Name="LayoutRoot" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="3*"/> <RowDefinition Height="*"/> <RowDefinition Height="150"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="4*"/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <GridSplitter Grid.Row="1" Grid.ColumnSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="Green" ShowsPreview="true" ResizeDirection="Rows" Height="5"/> <GridSplitter Grid.Column="2" Grid.RowSpan="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Red" ShowsPreview="true" Width="5"/> <Button Content="Button" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="3" Margin="8,9,8,8"/> </Grid> </Window>
Выглядит это так:
И вот что получается при изменении размеров столбцов\строк с помощью сплиттеров:
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
Только начал разбираться с WPF и очень удивился когда попал на русскоязычную статью. И еще больше удивился, когда посетил страницу “Обо мне”. Мы из одного города! Бывает же такое 
Большое спасибо за все три статейки по WPF! Обязательно буду почитывать Ваш блог.
Спасибо Приятно услышать добрые слова. Еще более приятно, что информация оказалась полезной.
ЗЫ можно и на ты..
> ЗЫ можно и на ты..
Ок!
Вообще я поражен WPF. И легкости с которой идет изучение. Запланированное время разработки уже сократилось раза в два! Сегодня доделываю то, что планировал на конец следующей недели
и WPF, и, как частный случай, Silverlight пошли навстречу разработчикам. Работать с ними легко и приятно
Но. Сейчас создаю расширения для Firefox-a. Там XUL + JScript и двигло Gecko. Так вот. Меня не покидает ощущение, что пишу на Сильверлайте..
Вот уж и не знаю, кто что и кого заимствовал. ) Или это такое слияние технологий в следствии следования желаниям коммюнити
Помнится лет шесть назад я встретил интересную утилитку, которая из файла с html-подобным синтаксисом генерировала GUI на Си. Тогда это выглядило достаточно смешно и непривычно. Хотя, выгода была понятна. А теперь это оказывается мейнстрим) Нужно было эту утилитку дорабатывать и развивать, сейчас бы уже имел продвинутое средство разработки и конкурировал бы с MS и Мозиллой 
Очень хорошая статья, все понятно.
Но есть одна ошибка-опечатка здесь:
“Для изменения размера столбцов надо указать VerticalAlignment=”Stretch”, HorizontalAlignment – Top, Bottom или Center, ResizeDirection можно не указывать.”
HorizontalAlignment не может принимать значения Top и Bottom (это же горизонтальное выравнивание).
Угу.. спасибо, что заметили..
HorizontalAlignment – возможные значения Left, Right, Center и Stretch. Кажется так. Проверить не могу – среды разработки под руками нет на данный момент.
я так понимаю грид должен работать как таблица?
у меня почему-то элементы раскиданные по ячейкам собираются в кучу как если бы они находились внутри одной ячейки 
Странно. точно по ячейкам раскиданы? Может тег не закрыт или еще что нибудь. Если можно – пример кода что ли закиньте.
блог ведет, а о нас забыла совсем :’(