Dela via

Gör så här: Använda ett rutnät för automatisk layout

I det här exemplet beskrivs hur du använder ett rutnät i den automatiska layoutmetoden för att skapa ett lokalt program.

Lokalisering av ett användargränssnitt kan vara en tidskrävande process. Ofta måste lokalisatörer ändra storlek på och flytta element förutom att översätta text. Tidigare har varje språk som ett användargränssnitt anpassats för nödvändig justering. Nu med funktionerna i Windows Presentation Foundation (WPF) kan du utforma element som minskar behovet av justering. Metoden för att skriva applikationer som enklare kan ändra storlek och positioneras kallas auto layout.

Följande XAML-exempel (Extensible Application Markup Language) visar hur du använder ett rutnät för att placera några knappar och text. Observera att cellernas höjd och bredd är inställda på Auto. Därför justeras cellen som innehåller knappen med en bild så att den passar bilden. Eftersom elementet Grid kan anpassas till innehållet kan det vara användbart när du använder den automatiska layoutmetoden för att utforma program som kan lokaliseras.

Exempel

I följande exempel visas hur du använder ett rutnät.

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

Följande bild visar utdata från kodexemplet.

Rutnätsexempel
Rutnät

Se även