Контейнер Grid(сітка, таблиця) - Одиниці

Раніше ми, зазвичай, використовували зірочки ширини/висоти, щоб встановити відсоток простору, який займає рядок або стовпчик. Однак, є ще 2 способи задати висоту та ширину: значення в абсолютних одиницях та автоматичне. Давайте створимо Grid, де вони поєднуються:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

У цьому прикладі перша клітинка має ширину в одну зірку, друга має автоматично встановлену ширину, а третя статично займає 100 пікселів.

Результат можна побачити на скріншоті. Друга кнопка займає лише те місце, яке потрібне щоб показати увесь її довгий текст. Третя кнопка займає рівно 100 пікселів, а перша кнопка зі змінною шириною займає решту простору.

У елементі Grid, де один чи кілька колонок (або рядків) мають змінну (виражену у зірках) ширину (або висоту), вони автоматично займають ширину/висоту, не використану стовпцями/рядками із абсолютною чи автоматичною шириною/висотою. Це легко помітити при зміні розміру вікна:

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

Це дуже корисна техніка для верстання різноманітних діалогових вікон. Наприклад: вікно, яке містить 3 поля, призначені для введення ім'я користувача, його електронної адреси та коментаря відповідно. Два перші поля, як правило мають фіксовану висоту, в той час як третє займає весь доступний простір, щоб дати можливість написати довгий коментар. В наступному розділі ми створимо контактну форму, де використаємо Grid зі стовпцями й колонками різної висоти та ширини.