Aracılığıyla paylaş

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

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

Kullanıcı arabiriminin (UI) yerelleştirilmesi zaman alan bir işlem olabilir. Genellikle yerelleştiricilerin metin çevirmeye ek olarak öğeleri yeniden boyutlandırması ve yeniden konumlandırması gerekir. Geçmişte, bir kullanıcı arabirimi için uyarlandığında her dil belirli ayarlamalar gerektirirdi. Artık Windows Presentation Foundation'ın (WPF) özellikleriyle, ayarlama gereksinimini azaltan öğeler tasarlayabilirsiniz. Daha kolay yeniden boyutlandırılabilir ve yeniden konumlandırılabilir uygulamalar yazma yaklaşımına auto layoutdenir.

Aşağıdaki Genişletilebilir Uygulama biçimlendirme dili (XAML) örneği, bazı düğmeleri ve metni konumlandırmak için kılavuz kullanmayı gösterir. Hücrelerin yüksekliğinin ve genişliğinin Autoolarak ayarlandığına dikkat edin; bu nedenle, resim içeren düğmeyi içeren hücre resme uyacak şekilde ayarlanır. Grid öğesi içeriğine göre ayarlayabildiğinden, yerelleştirilebilen uygulamalar tasarlamaya yönelik otomatik düzen yaklaşımını benimserken yararlı olabilir.

Örnek

Aşağıdaki örnekte kılavuzun nasıl kullanılacağı gösterilmektedir.

<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 grafikte kod örneğinin çıkışı gösterilmektedir.

Kılavuz örneği
Kılavuz

Ayrıca bakınız

  • Last updated on