Het Grid - Eenheden

Tot dusver hebben we meestal de sterbreedte/-hoogte gebruikt, die aangeeft dat een rij of kolom een ​​bepaald percentage van de gecombineerde ruimte moet innemen. Er zijn echter twee andere manieren om de breedte of hoogte van een kolom of rij op te geven: absolute eenheden en de automatische breedte/hoogte. Laten we proberen een raster te maken waarin we deze combineren:

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

In dit voorbeeld heeft de eerste knop een sterbreedte, de tweede breedte is automatisch ingesteld en de laatste bevat een statische breedte van 100 pixels.

Het resultaat is te zien op de schermafbeelding, waar de tweede knop alleen precies de hoeveelheid ruimte inneemt die nodig is om de langere tekst weer te geven, de derde knop neemt precies 100 pixels in en de eerste knop, met de variabele breedte, neemt de rest.

In een raster waar één of meer kolommen (of rijen) een variabele (ster) breedte hebben, kunnen ze automatisch de breedte/hoogte delen die niet wordt gebruikt door de kolommen/rijen die een absolute of automatische breedte/hoogte gebruiken. Dit wordt duidelijker wanneer we het formaat van het venster wijzigen:

Op de eerste schermafbeelding ziet u dat het raster de ruimte voor de laatste twee knoppen reserveert, ook al betekent dit niet dat de eerste alle ruimte krijgt die het nodig heeft om correct te renderen. Op de tweede schermafbeelding ziet u dat de laatste twee knoppen exact dezelfde hoeveelheid ruimte behouden en de overtollige ruimte overlaten aan de eerste knop.

Dit kan een zeer nuttige techniek zijn bij het ontwerpen van een breed scala aan dialogen. Overweeg bijvoorbeeld om een eenvoudig contactformulier te maken waar de gebruiker een naam, een e-mailadres en een opmerking invoert. De eerste twee velden hebben meestal een vaste hoogte, terwijl de laatste net zoveel mogelijk ruimte in beslag kan nemen, waardoor er ruimte overblijft om een ​​langere opmerking te typen. In één van de volgende hoofdstukken gaan we proberen om een contactformulier te maken, gebruikmakend van het raster met rijen en kolommen van verschillende hoogtes en breedtes.