Siatka (Grid) - jednostki

Dotychczas, w większości przypadków, używaliśmy gwiazdki dla określenia szerokości i wysokość, która mówi, że wiersz lub kolumna powinna zająć pewien procent całej dostępnej przestrzeni. Jednak dostępne są jeszce dwa inne sposoby na kreślanie szerokości i wysokości kolumn i wierszy: jednostki bezwzględne i automatyczna (Auto) szerokość/wysokość. Spróbujmy zrobić siatkę, gdzie wykorzystamy wszystkie trzy jednostki:

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

W tym przykładzie pierwszy przycisk ma szerokość gwiazdki, drugi ma szerokość ustawioną na Auto, natomiast trzeci ma sztywną wartość 100 pikseli.

Rezultat widoczny na zrzucie ekranu pokazuje, jak drugi przycisk ma dokładnie taką szerokość jaka jest niezbęrdna do narysowania jego długiego tekstu, trzeci przycisk jest szeroki dokładnie na 100 pikseli – tak jak zostało to zdefiniowane w kolumnie, natomiast trzeci przycisk, ze zmienną wartością szerokośći, bierze całą pozostałą przestrzeń.

Jeśli kilka kolumn (lub wierszy) ma zmienną (gwiazdkową) szerokość to automatycznie dzielą one między sobą pozostałą szerokość (wysokość) – czylię tę, która nie jest wykorzystywana przez kolumny (wiersze) o wartościach bezwględnych lub tych, które mają automatyczną szerokosć (wysokość). Jest to szczególnie widoczne podczas zmiany rozmiaru okna:

Na pierwszym zrzucie ekranu widać jak siatka rezerwuje miejsce dla ostatnich dwóch przycisków, nawet jeśli powoduje to, że pierwszy nie ma na tyle miejsca aby poprawnie wyświetlić swoją zawartość. Na drugim zrzucie ekranu widać, jak dwa ostatnie przyciski mają ciągle tę samą szerokość pozostawiając nadmiar do wykorzystania przez pierwszy przycisk.

Jest to bardzo użyteczna technika do wykorzystania podczas projektowania całego spektrum różnych okien dialogowych. Na przykład, wyobraź sobie prosty formularz kontaktowy, gdzie użytkownik może wprowadzić swoje imię, adres e-mail i komentarz. Pierwsze dwa pola mają zazwyczaj ściśle określoną wysokość, podczas gdy ostatnie pole zajmuje tyle miejsca ile tylko może oferując tym samym więcej miejsca na komentarz. W następnym rozdziale spróbujemy zbudować taki właśnie formularz kontaktowy z wykorzystaniem siatki oraz wierszy i kolumn o różnych wysokościach i szerokościach.