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

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

У найбазовішій формі, Grid бере передані йому контроли, і розтягує їх для заповнення максимуму вільного місця і розташовує їх один поверх іншого:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Як ви можете бачити, останній контрол зайняв найвищу позицію, котра в данному випадку означає, що ви не можете навіть побачити першу кнопку. Це не зручно у більшості ситуацій, тому давайте спробуємо розділити простір, так як Grid може це робити. Ми зробимо це використовуючи ColumnDefenition та RowDefenition. У першому прикладі, ми виконаємо поділ на стовпці:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

У цьому прикладі, ми просто поділили доступний простір на два стовпці, котрі поділили його навпіл, використовуючи "star width" або "відносна ширина" (цьому дамо пояснення пізніше). На другій кнопці, я використав так звані Attached property (прикріплену властивість) для розміщення кнопки у другому стовпці (0 це перший стовпець, 1 - другий, і так далі). Я можу також використати цю властивість і на першій кнопці, але для неї автоматично присвоюється перший стовпець і перший рядок, те що нам і було потрібно тут.

Як ви можете бачити, контроли займають усе вільне місце, що є стандартною поведінкою при наповненні дочірніми контролами. Це робиться з встановленям властивостей HorizontalAlignment та VerticalAlignment у дочірнього контролу у стан Stretch(розтягування).

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

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Як ви можете бачити на останньому знімку, перша кнопка зараз знаходиться посередені зверху. А друга кнопка розташована посередині, з правої сторони.

Summary

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