TOC

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

Panele:

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.

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!