The Grid Control

A Grid (rács) valószínűleg a legösszetettebb panel típus. A Grid több sort és oszlopot tartalmazhat. A sorok magasságát valamint az oszlopok szélességét a fejlesztő határozza meg vagy abszolút módon pixelekkel méretezve, vagy a rendelkezésre álló terület százalékos arányában megadva, vagy auto módban, ami a tartalomhoz automatikusan igazítja a cellák méretét. Gridet használunk, ha egyéb panel típusok nem felelnek meg a feladathoz, például ha több oszlopra van szükségünk vagy gyakran más panelekkel kombinálva.

A grid alap beállítása szerint tartalmazhat bármilyen kontrollt amit a hozzárendelünk, azaz egyszerűen beleteszünk. Méretre igazítja őket, hogy kitöltsék a maximálisan rendelkezésre álló teret és egymás fölé helyezi őket.

<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>

Ahogy a fenti példában láthatjuk, az utoljára definiált kontroll kerül a legfelső pozícióba, ezáltal elfedi az elsőként definiált Button 1-et. Ez a viselkedés nem túl hasznos, ezért próbáljuk megosztani a rendelkezésre álló teret és ez az ami a Grid típus erőssége. A teret a ColumnDefinition és a RowDefinition tag-ekkel oszthatjuk fel. Nézzünk egy példát az oszlopokra:

<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>

Ebben a példában a területet egyszerűen két oszlopra osztottuk fel egyenlő arányban a "csillag szélességgel" (magyarázat később). A második gombon (Button 2) egy ún. Csatolt tulajdonságot (Attached property) alkalmaztunk, hogy a második pozícióba helyezzük (0 az első oszlop, 1 a második oszlop stb.). Ezt a tulajdonságot természetesen az első gomb kontrollon (Button 1) is alkalmazhattuk volna, de az alap beállítás szerint is az első oszlopba és az első sorba kerül és mi most pontosan ezt akartuk.

Látható, hogy a kontrollok kitöltik a rendelkezésre álló területet, mert ez az alap viselkedés amikor gyermek kontrollokat helyez el a griden. Ezt úgy éri el, hogy a HorizontalAlignment (vízszintes igazítás) és VerticalAlignment (függőleges igazítás) tulajdonságokat Strech-re állítja.

In some situations you may want them to only take up the space they need though and/or control how they are placed in the Grid. The easiest way to do this is to set the HorizontalAlignment and VerticalAlignment directly on the controls you wish to manipulate. Here's a modified version of the above example:

<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>

Ahogy a fenti ábrán látható, az első nyomógomb most felülre és középre került. A második nyomógomb pedig a grid közepére jobbra igazítva.

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.