Útmutató: Rács használata automatikus elrendezéshez

Ez a példa bemutatja, hogyan használható rács az automatikus elrendezési megközelítésben egy honosítható alkalmazás létrehozásához.

A felhasználói felület honosítása időigényes folyamat lehet. A honosítóknak gyakran a szöveg fordítása mellett újra kell méreteznie és áthelyeznie az elemeket. A múltban minden olyan nyelvhez, amelyhez a felhasználói felületet igazították, szükséges volt a kiigazítás. Most már a Windows Presentation Foundation (WPF) képességeivel olyan elemeket tervezhet, amelyek csökkentik a beállítás szükségességét. Az alkalmazások könnyebb átméretezésére és áthelyezésére vonatkozó megközelítést nevezzük auto layout.

Az alábbi Extensible Application Markup Language (XAML) példa bemutatja, hogyan lehet egy gridet használni néhány gomb és szöveg elhelyezéséhez. Figyelje meg, hogy a cellák magassága és szélessége be van állítva Auto; ezért a képet tartalmazó gombot tartalmazó cella igazodik a képhez. Mivel az Grid elem alkalmazkodik a tartalmához, hasznos lehet, ha az automatikus elrendezési megközelítést alkalmazza a honosítható alkalmazások tervezésére.

példa

Az alábbi példa egy rács használatát mutatja be.

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

Az alábbi ábrán a kódminta kimenete látható.

Rács

Lásd még

• Az automatikus elrendezés áttekintésének használata
• Használjon automatikus elrendezést egy gomb létrehozásához