Nasıl yapılır: Otomatik Düzen için Kılavuz Kullanma

Bu örnek, yerelleştirilebilir bir uygulama oluşturmak için otomatik düzen yaklaşımında bir kılavuzun nasıl kullanılacağını açıklar.

A 'nın yerelleştirilmesi kullanıcı arabirimi (UI) zaman alan bir işlem olabilir. Genellikle Yerelleştiricilerin, metni çevirmenin yanı sıra öğeleri yeniden boyutlandırmasına ve yeniden konumlandırmasına ihtiyacı vardır. Geçmişte, bir tarafından Kullanıcı arabirimi gerekli ayarlama için uyarlanan her dil. Artık özellikleri sayesinde Windows Presentation Foundation (WPF) ayarlama gereksinimini azaltan öğeler tasarlayabilirsiniz. Daha kolay yeniden boyutlandırılabilir ve yeniden konumlandırılabilen uygulamalar yazma yaklaşımı çağırılır auto layout .

Aşağıdaki Extensible Application Markup Language (XAML) örnek, bazı düğmeleri ve metinleri konumlandırmak için bir kılavuz kullanmayı gösterir. Hücrelerin yüksekliğinin ve genişliğinin olarak ayarlandığından ve Auto Bu nedenle bir görüntüyle birlikte düğme içeren hücrenin görüntüye sığması için ayarlandığı fark. GridÖğesi içeriğine göre ayarlanabileceğinden, yerelleştirilebilecek uygulamalar tasarlamak için otomatik düzen yaklaşımı alırken yararlı olabilir.

Örnek

Aşağıdaki örnek, bir kılavuzun nasıl kullanılacağını göstermektedir.

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

Aşağıdaki grafik, kod örneğinin çıkışını gösterir.

Kılavuz örneği
Kılavuz

Ayrıca bkz.