TOC

This article is currently in the process of being translated into Ukrainian (~91% done).

Контейнери:

Контейнер 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

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!