WPF - авторастягивающийся Grid

Про WPF надо немного рассказать, давно я уже этого не делал. Про WPF я рассказываю только то, что мне больше всего понравилось. Пока я еще не много чего изучил в этой технологии, так что мне много что нравится. Например — сегодняшняя тема.

Сегодня расскажу про Grid, а точнее о том, как сделать авторастягивающиеся элементы. То есть — чтобы при растягивании главного окна растягивались и элементы, которые в этом окне располагаются (а то у меня раньше все это не очень красиво выглядело).

Для этой цели необходимо использовать Grid (все элементы на страницы обернуть в Grid). Но — надо перед этим произвести некоторые настройки. Я все прописываю руками, можно наверно как-то это с помощью различных настроек сделать. Но руками — проще и быстрее.

После начального тега Grid поместите следующий код:

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition Height="*"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

В дизайнере вы увидите три полосы. Это значит что у нас главное окно разделено на три равных части (мы их высоту не задали). Теперь, в каждую из ячеек можно помещать содержимое, причем содержимое займет максимум — только размер ячейки, не больше.

Теперь ниже поместите такой код:

<TextBlock Background="WhiteSmoke" Grid.Row="0" />

<TextBlock Background="LightBlue" Grid.Row="1"/>

<TextBlock Background="LightPink" Grid.Row="2"/>

Но, если вы не укажете к какой строке относится элемент (TextBlock в нашем случае), то все элементы будут помещены по умолчанию — в первую (нулевую) строку. Так что Grid.Row надо писать. В результате у меня получился флаг России. Его можно растягивать — цвета тоже пропорционально растянутся.

Можно не только строки делать, но и колонки. Для этого всего-лишь надо то же самое прописать, но — для колонок. Добавить после </Grid.RowDefinitions> следующий код:

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

Теперь главное окно разделилось пополам — на две колонки. Чтобы поместить элементы во вторую колонку — надо прямо об этом написать (так как по умолчанию, элементы помещаются в крайнюю левую колонку под номером ноль). Перед закрывающим </Grid> добавьте код:

<TextBlock Background="WhiteSmoke" Grid.Row="2" Grid.Column="1"/>

<TextBlock Background="LightBlue" Grid.Row="1" Grid.Column="1"/>

<TextBlock Background="LightPink" Grid.Row="0" Grid.Column="1"/>

Теперь у нас два флага — прямой и обратный. Их можно растягивать, элементы внутри тоже растянуться. Теперь использую эти знания в своих программах.