The Grid - Units

Zatím jsme k nastavování šířky a výšky nejvíce používali hvězdičkovou notaci, která říká, že sloupec či řádek má zabírat dané procento prostoru (je to relativní jednotka). WPF poskytuje ještě dva další způsoby nastavování šířky a výšky: absolutní jednotky a Auto. Pojďme vytvořit Grid, ve kterém využijeme všechny způsoby.

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

V tomto příkladu má levé tlačítko šířku nastavenou na 1*, prostřední má automatickou šířku a poslední má fixní šířku 100 pixelů

Výsledek je zobrazen na screenshotu, kde prostřední button zabírá přesně tolik prostoru, aby se do něj vešel text. Třetí button zabírá přesně 100 pixelů a ten první má variabilní šířku a je mu vyhrazen zbylý prostor.

V gridu může mít několik sloupců (či řádek) variabilní rozměr (hvězdičková notace). Tyto sloupce (či řádky) sdílí prostor, který nezabírají sloupce (či řádky) s fixním nebo automatickým rozměrem. Nejlépe si toho všimneme při změně velikosti okna.

On the first screenshot, you will see that the Grid reserves the space for the last two buttons, even though it means that the first one doesn't get all the space it needs to render properly. On the second screenshot, you will see the last two buttons keeping the exact same amount of space, leaving the surplus space to the first button.

This can be a very useful technique when designing a wide range of dialogs. For instance, consider a simple contact form where the user enters a name, an e-mail address and a comment. The first two fields will usually have a fixed height, while the last one might as well take up as much space as possible, leaving room to type a longer comment. In one of the next chapters, we will try building a contact form, using the grid and rows and columns of different heights and widths.