Delen via

Procedure: Een raster gebruiken voor automatische indeling

In dit voorbeeld wordt beschreven hoe u een raster gebruikt in de automatische lay-outbenadering voor het maken van een lokaliseerbare toepassing.

Lokalisatie van een gebruikersinterface (UI) kan een tijdrovend proces zijn. Lokalisaties moeten vaak de grootte en positie van elementen wijzigen, naast het vertalen van tekst. In het verleden vereiste elke taal waarvoor een gebruikersinterface werd aangepast een aanpassing. Met de mogelijkheden van Windows Presentation Foundation (WPF) kunt u nu elementen ontwerpen die de noodzaak van aanpassing verminderen. De methode voor het schrijven van toepassingen die gemakkelijker kunnen worden aangepast en verplaatst, wordt auto layoutgenoemd.

In het volgende voorbeeld van Extensible Application Markup Language (XAML) ziet u hoe u een raster gebruikt om enkele knoppen en tekst te plaatsen. U ziet dat de hoogte en breedte van de cellen zijn ingesteld op Auto; daarom wordt de cel met de knop met een afbeelding aangepast aan de afbeelding. Omdat het Grid-element zich aan de inhoud kan aanpassen, kan het nuttig zijn bij het gebruik van de automatische lay-outbenadering voor het ontwerpen van toepassingen die kunnen worden gelokaliseerd.

Voorbeeld

In het volgende voorbeeld ziet u hoe u een raster gebruikt.

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

In de volgende afbeelding ziet u de uitvoer van het codevoorbeeld.

rastervoorbeeld
Netwerk

Zie ook

  • Last updated on