Otomatik Düzen Kullanımına Genel Bakış

Bu konu, geliştiricilere yerelleştirilebilir kullanıcı arabirimleri (UI Windows Presentation Foundation (WPF) uygulamaları yazma yönergelerini sunar. Geçmişte bir kullanıcı arabiriminin yerelleştirilmesi zaman alan bir işlemdi. Kullanıcı arabiriminin uyarlanmış olduğu her dil piksele göre bir piksel ayarlaması gerektirmektedir. Bugün doğru tasarım ve doğru kodlama standartlarıyla, yerelleştiricilerin daha az yeniden boyutlandırma ve yeniden konumlandırma yapmaları için UI'ler oluşturulmuş olabilir. Daha kolay yeniden boyutlandırılabilir ve yeniden konumlandırılabilir uygulamalar yazma yaklaşımı otomatik düzen olarak adlandırılan ve WPF uygulama tasarımı kullanılarak elde edilebilir.

Otomatik Düzeni Kullanmanın Avantajları

WPF sunu sistemi güçlü ve esnek olduğundan, bir uygulamada farklı dillerin gereksinimlerine uyacak şekilde ayarlanabilme özelliği sağlar. Aşağıdaki liste, otomatik düzenin bazı avantajlarını ortaya çıkartır.

  • Kullanıcı arabirimi herhangi bir dilde iyi görüntülenir.

  • Metin çevrildikten sonra denetimlerin konumunu ve boyutunu yeniden değiştirme ihtiyacı azalır.

  • Yeniden yapılan pencere boyutunun yeniden boyuta sahip olduğu ihtiyacı azaltır.

  • UI düzeni herhangi bir dilde düzgün bir şekilde işler.

  • Yerelleştirme, dize çevirisini biraz daha fazla olduğu noktaya kadar azaltıldı.

Otomatik Düzen ve Denetimler

Otomatik düzen, bir uygulamanın denetimin boyutunu otomatik olarak ayarlamasını sağlar. Örneğin, bir denetim bir dizenin uzunluğuna uyum sağlayacak şekilde değişebilir. Bu özellik, yerelleştiricilerin dizeyi çevirmesini sağlar; artık denetimi çevrilmiş metne uyacak şekilde yeniden boyutlandırmaları gerekmeyecektir. Aşağıdaki örnek, İngilizce içeriğe sahip bir düğme oluşturur.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

Örnekte, İspanyolca düğmeyi yapmak için tek gereken metni değiştirmektir. Örneğin,

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

Aşağıdaki grafik kod örneklerinin çıkışını gösterir:

The same button with text in different languages

Otomatik Düzen ve Kodlama Standartları

Otomatik düzen yaklaşımını kullanmak, tamamen yerelleştirilebilir bir kullanıcı arabirimi üretmek için bir dizi kodlama ve tasarım standartları ve kural gerektirir. Aşağıdaki yönergeler otomatik düzen kodlamanıza yardımcı olacak.

Mutlak konumlar kullanma

  • Öğeleri kesinlikle Canvas konumlandırması nedeniyle bunu kullanmayın.

  • Denetimleri DockPanelStackPanel konumlandırmak için , Grid ve kullanın.

Çeşitli panel türleri hakkında daha fazla bilgi için bkz. Panellere Genel Bakış.

Bir pencere için sabit bir boyut ayarlaym

  • Window.SizeToContent komutunu kullanın. Örneğin:

    
    <StackPanel
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="GridLoc.Pane1"
    >
    

Bir ekleme

  • Uygulamanın FlowDirection kök öğesine bir ekleyin.

    WPF yatay, çift yönlü ve dikey düzenleri desteklemek için kullanışlı bir yol sağlar. Sunu çerçevesinde, özelliği FlowDirection düzeni tanımlamak için kullanılabilir. Akış yönü desenleri:

Fiziksel yazı tipleri yerine bileşik yazı tipleri kullanma

  • Bileşik yazı tipleri ile FontFamily özelliğin yerelleştirilmiş olması gerek yoktur.

  • Geliştiriciler aşağıdaki yazı tiplerinden birini kullanabilir veya kendi yazı tiplerini oluşturabilir.

    • Genel Kullanıcı Arabirimi
    • Global San Serif
    • Genel Serif

xml:lang ekleme

  • özniteliğini xml:lang kullanıcı arabiriminizin kök öğesine (örneğin, İngilizce xml:lang="en-US" uygulama için) ekleyin.

  • Bileşik yazı tiplerinin hangi xml:lang yazı tipinin kullanılamayacaklarını belirlemesi için bu özelliği çok dilli senaryoları destekleyecek şekilde ayarlayın.

Otomatik Düzen ve Kılavuzlar

öğesi, Grid bir geliştiricinin öğeleri konumlandırması için olanaklı olduğundan otomatik düzen için yararlıdır. Denetim, Grid kullanılabilir alanı bir sütun ve satır düzenlemesi kullanarak alt öğeleri arasında dağıtılabilir. Kullanıcı arabirimi öğeleri birden çok hücreye yayma ve kılavuzlar içinde kılavuzlar olabilir. Kılavuzlar karmaşık kullanıcı arabirimi oluşturmanızı ve konumlandırmanızı sağlar. Aşağıdaki örnek, bazı düğmeleri ve metni konumlandırmak için kılavuz kullanmayı gösteriyor. Hücrelerin yüksekliğinin ve genişliğinin olarak ayarlandıklarına dikkat eder; bu nedenle, düğmeyi içeren hücre görüntüye Auto sığacak şekilde ayarlanır.

<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, önceki kod tarafından üretilen kılavuz görüntülenir.

Grid example Kılavuz

IsSharedSizeScope Özelliğini Kullanan Otomatik Düzen ve Kılavuzlar

Bir Grid öğe, içeriğe uyacak şekilde ayarlanmış denetimler oluşturmak için yerelleştirilebilir uygulamalarda kullanışlıdır. Ancak, bazen denetimlerin içeriklerden bağımsız olarak belirli bir boyutu korumak istemeniz gerekir. Örneğin, "Tamam", "İptal" ve "Gözat" düğmeleriniz varsa, düğmelerin büyük olasılıkla içeriğe sığmalarını istemeyebilirsiniz. Bu durumda, Grid.IsSharedSizeScope ekli özelliği aynı boyutlandırmayı birden çok kılavuz öğeleri arasında paylaşmak için yararlıdır. Aşağıdaki örnekte sütun ve satır boyutlandırma verilerini birden çok öğe arasında nasıl Grid paylaştırabilirsiniz?

   <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
       <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
       <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
   </StackPanel> 

   <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

   <Grid ShowGridLines="True" Margin="0,0,10,0">
     <Grid.ColumnDefinitions>
       <ColumnDefinition SharedSizeGroup="FirstColumn"/>
       <ColumnDefinition SharedSizeGroup="SecondColumn"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
     </Grid.RowDefinitions>

       <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
       <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

       <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
       <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
   </Grid>

   <Grid ShowGridLines="True">
     <Grid.ColumnDefinitions>
       <ColumnDefinition SharedSizeGroup="FirstColumn"/>
       <ColumnDefinition SharedSizeGroup="SecondColumn"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>        
       <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
     </Grid.RowDefinitions>

       <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
       <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

       <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
       <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
   </Grid>
   
   </StackPanel>

   <TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

Ayrıca bkz.