Siatka (Grid)

Siatka jest prawdopodobnie jednym z najbardzieł złożonych paneli. Może ona posiadać wiele wierszy i kolumn, których szerokość lub wysokość może być określona w wartościach bezwzględnych, w postaci procentu dostępnego miejsca lub w sposób automatyczny – gdzie wiersz lub kolumna będą samodzielnie dostosowywać swój rozmiar w zależności od zawartości. Używaj siatki tam, gdzie inne panele nie są w stanie sobie poradzić – czyli wtedy, gdy potrzeba wielu kolumn często wraz z innymi panelami.

W najprostszej formie siatka po prostu weźmie kontrolki wewnątrz niej i rozciągnie je na całe dostępne miejsce, nakładając jedną na drugą.

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

Jak widać, ostatnia kontrolka znajduje się na samej górze, co, w tym przypadku, powoduje, że nie można zobaczyć pierwszego przycisku. Nie jest to super użyteczne w większości przypadków, dlatego spróbujmy podzielić dostępną przestrzeń, z czym siatka radzi sobie bardzo dobrze. Można to zrobić za pomocą właściwości ColumnDefinitions oraz RowDefinitions, jednak w pierwszym przykładzie ograniczymy się tylko do kolumn.

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

W tym przykładzie po prostu podzieliliśmy dostępne miejsce pomiędzy dwie kolumny o dokładnie takiej samej szerokości z wykorzystaniem „szerokości gwiazdkowej” (wyjaśnimy to pojęcie później). Na drugim przycisku wykorzystaliśmy tak zwaną właściwość dołączoną, po to, aby umieścić go w drugiej kolumnie (0 odpowiada pierwszej kolumnie, 1 odpowiada drugiej kolumnie, i tak dalej). Mógłbym ustawić tę właściwość dołączoną również na pierwszym przycisku, jednak jest to niepotrzebne ponieważ jej wartość domyślnie wskazuje na pierwszą kolumną i pierwszy wiersz, co, w tym przypadku, nam odpowiada.

Jak widać, przyciski zajęły całą dostępną przestrzeń, co jest domyślnym zachowaniem, kiedy siatka układa podlegające jej kontrolki. Dzieje się tak przez właściwości przycisków HorizontalAlignment (wyrównanie w poziomie) oraz VerticalAlignment (wyrównanie w pionie) ustawione na Rozciągnij (Stretch).

W niektórych sytuacjach możesz chcieć, aby kontrolki zajmowały tylko tyle miejsca ile potrzebują niezależnie od ich ułożenia w siatce. Najłatwiejszym sposobem aby to osiągnąć jest ustawienie właściwości HorizontalAlignment oraz VerticalAlignment bezpośrednio na kontrolkach, które chcesz zmienić. Poniżej zmieniona wersja wcześniejszego przykładu:

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

Jak widać na powyższym zrzucie ekranu, pierwszy przycisk jest teraz wyrównany do góry i wyśrodkowany w poziomie względem kolumny. Drugi przycisk jest wycentrowany w pionie i przyciągnięty do prawej strony kolumny.

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.