Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Настройка Grid

43

Если бы Grid был просто коллекцией строк и колонок пропорциональных размеров, от него было бы мало толку. К счастью, он не таков. Чтобы открыть полный потенциал Grid, можно изменять способы установки размеров каждой строки и колонки. Элемент Grid поддерживает следующие стратегии изменения размеров:

Абсолютные размеры

Выбирается точный размер с использованием независимых от устройства единиц измерения. Это наименее удобная стратегия, поскольку она недостаточно гибка, чтобы справиться с изменением размеров содержимого, изменением размеров контейнера или локализацией.

Автоматические размеры

Каждая строка и колонка получает в точности то пространство, которое нужно, и не более. Это один из наиболее удобных режимов изменения размеров.

Пропорциональные размеры

Пространство разделяется между группой строк и колонок. Это стандартная установка для всех строк и колонок.

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

Режим изменения размеров устанавливается с помощью свойства Width объекта ColumnDefinition или свойства Height объекта RowDefinition, присваивая ему некоторое число или строку. Например:

<Grid.ColumnDefinitions>
            <!-- Устанавливаем абсолютные размеры -->
            <ColumnDefinition Width="100"></ColumnDefinition>
            <!-- Устанавливаем автоматические размеры -->
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <!-- Пропорциональные размеры -->
            <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

Этот синтаксис пришел из мира Интернета, где он применяется на страницах HTML с фреймами. Если вы используете смесь пропорциональной установки размеров с другими режимами, то пропорционально изменяемая строка или колонка получит все оставшееся пространство.

Чтобы разделить оставшееся пространство неравными частями, можно назначить вес (weight), который должен указываться перед звездочкой. Например, если есть две строки пропорционального размера, и требуется, чтобы высота первой была равна половине высоты второй, необходимо разделить оставшееся пространство следующим образом:

<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

Это сообщит Grid о том, что высота второй строки должна быть вдвое больше высоты первой строки. Для разделения дополнительного пространства можно указывать любые числа.

Легко организовать программное взаимодействие между объектами ColumnDefinition и RowDefinition. Нужно просто знать, что свойства Width и Height — это объекты типа GridLength. Чтобы создать GridLength, представляющий определенный размер, просто передайте соответствующее значение конструктору GridLength. Для создания объекта GridLength, представляющего пропорциональный размер (*), необходимо передать число конструктору GridLength и значение GridUnitType.Start в качестве второго аргумента конструктора. Для обозначения автоматического изменения размера используется статическое свойство GridLength.Auto.

Ниже представлен пример компоновки Grid с использование автоматических и пропорциональных размеров:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Элемент Grid" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" Margin="5" BorderBrush="LightBlue"
                 BorderThickness="5"></TextBox>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Margin="0,0,0,5" Padding="5">OK</Button>
            <Button Margin="5,0,5,5" Padding="5">Cancel</Button>
        </StackPanel>
    </Grid>
</Window>
Настраиваемые размеры Grid
Пройди тесты