Aracılığıyla paylaş

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

  • Makale

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ı arabiriminin gerekli ayarlama için uyarlandığı her dil. 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ı olarak adlandırılır auto layout.

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 olarak ayarlandığına Autodikkat edin; bu nedenle, resim içeren düğmeyi içeren hücre görüntüye uyacak şekilde ayarlanır. Öğesi içeriğine göre ayarlayabildiğinden Grid , 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.

Grid example
Kılavuz

Ayrıca bkz.