Grid kontrollen - Enheder

Indtil videre har vi mest bruge stjernebredde/-højde, hvilket angiver, at en række eller kolonne skal optage en bestemt procentdel af den samlede plads. Der er dog to andre måder at angive bredde eller højde på en kolonne eller række: Absolutte enheder samt Auto bredde/højde. Lad os prøve at lave et Grid, hvor vi blander disse:

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

I dette eksempel har den første knap en stjernebredde, den anden har sin bredde sat til Auto, og den sidste har en statisk bredde på 100 pixels.

Resultatet kan ses på skærmbilledet, hvor den anden knap kun optager nøjagtig den plads, den behøver for at gengive sin længere tekst. Den tredje knap tager nøjagtig de 100 pixels, den var blevet lovet, og den første knap med den variable bredde tager resten.

I et Grid hvor en eller flere kolonner (eller rækker) har en variables (stjerne) bredde, vil de automatisk komme til at dele den bredde/højde, som ikke allerede bruges af kolonner/rækker, der bruger en absolut eller Auto bredde/højde. Dette bliver mere tydeligt, når vi ændrer størrelse på vindues:

På det første skærmbillede ser du, at Grid kontrollen reserverer plads til de sidst to knapper, også selv om det betyder, at den første ikke får al den plads, den behøver for at gengives korrekt. På det det andet skærmbillede vil du se, at de sidste to knapper beholder nøjagtig den samme plads og efterlader den overskydende plads til den første knap.

Dette kan være en meget anvendelig teknik ved design af en lang række dialoger. Forestil dig f.eks. en simpel kontaktformular, hvor brugeren indtaster et navn, en e-mail-adresse og en kommentar. De to første felter vil normalt have en fast højde, mens den sidste kunne tage så meget plads som muligt og give mulighed for at indtaste en længere kommentar. I næste kapitel vil vi prøve at opbygge en kontaktformular ved hjælp af gitteret og rækker og kolonner med forskellige højder og bredder.