Gunakan Gambaran Umum Tata Letak Otomatis

Artikel
10/18/2023

Topik ini memperkenalkan panduan bagi pengembang tentang cara menulis aplikasi Windows Presentation Foundation (WPF) dengan antarmuka pengguna (UIs) yang dapat dilokalkan. Di masa lalu, pelokalan UI adalah proses yang memakan waktu. Setiap bahasa yang diadaptasi UI untuk penyesuaian piksel demi piksel yang diperlukan. Saat ini dengan desain yang tepat dan standar pengkodian yang tepat, UI dapat dibangun sehingga pelokalan memiliki lebih sedikit pengubahan ukuran dan reposisi untuk dilakukan. Pendekatan untuk menulis aplikasi yang dapat lebih mudah diubah ukurannya dan direposisi disebut tata letak otomatis, dan dapat dicapai dengan menggunakan desain aplikasi WPF.

Keuntungan Menggunakan Tata Letak Otomatis

Karena sistem presentasi WPF kuat dan fleksibel, sistem ini menyediakan kemampuan untuk mengatur elemen dalam aplikasi yang dapat disesuaikan agar sesuai dengan persyaratan bahasa yang berbeda. Daftar berikut menunjukkan beberapa keuntungan dari tata letak otomatis.

UI ditampilkan dengan baik dalam bahasa apa pun.
Mengurangi kebutuhan untuk membaca posisi dan ukuran kontrol setelah teks diterjemahkan.
Mengurangi kebutuhan untuk menyesuaikan ukuran jendela.
Tata letak UI dirender dengan benar dalam bahasa apa pun.
Pelokalan dapat dikurangi ke titik bahwa itu sedikit lebih dari terjemahan string.

Tata Letak dan Kontrol Otomatis

Tata letak otomatis memungkinkan aplikasi untuk menyesuaikan ukuran kontrol secara otomatis. Misalnya, kontrol dapat berubah untuk mengakomodasi panjang string. Kemampuan ini memungkinkan pelokalan untuk menerjemahkan string; mereka tidak perlu lagi mengubah ukuran kontrol agar sesuai dengan teks yang diterjemahkan. Contoh berikut membuat tombol dengan konten bahasa Inggris.

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

Dalam contoh, yang harus Anda lakukan untuk membuat tombol Spanyol adalah mengubah teks. Contohnya,

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

Grafik berikut menunjukkan output sampel kode:

Standar Tata Letak dan Pengkodan Otomatis

Menggunakan pendekatan tata letak otomatis memerlukan serangkaian standar dan aturan pengodean dan desain untuk menghasilkan UI yang sepenuhnya dapat dilokalkan. Panduan berikut akan membantu pengkodian tata letak otomatis Anda.

Jangan gunakan posisi absolut

Jangan gunakan Canvas karena memposisikan elemen secara mutlak.
Gunakan DockPanel, StackPanel, dan Grid untuk memosisikan kontrol.

Untuk diskusi tentang berbagai jenis panel, lihat Gambaran Umum Panel.

Jangan atur ukuran tetap untuk jendela

Gunakan Window.SizeToContent. Contohnya:


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

Menambahkan FlowDirection

FlowDirection Tambahkan ke elemen akar aplikasi Anda.

WPF menyediakan cara mudah untuk mendukung tata letak horizontal, dua arah, dan vertikal. Dalam kerangka kerja presentasi, FlowDirection properti dapat digunakan untuk menentukan tata letak. Pola arah aliran adalah:
- FlowDirection.LeftToRight (LrTb) — tata letak horizontal untuk Latin, Asia Timur, dan sebagainya.
- FlowDirection.RightToLeft (RlTb) — dua arah untuk Arab, Ibrani, dan sebagainya.

Menggunakan font komposit alih-alih font fisik

Dengan font komposit, FontFamily properti tidak perlu dilokalkan.
Pengembang dapat menggunakan salah satu font berikut atau membuat font mereka sendiri.
- Antarmuka Pengguna Global
- Global San Serif
- Global Serif

Menambahkan xml:lang

xml:lang Tambahkan atribut dalam elemen akar UI Anda, seperti xml:lang="en-US" untuk aplikasi bahasa Inggris.
Karena font komposit digunakan xml:lang untuk menentukan font apa yang akan digunakan, atur properti ini untuk mendukung skenario multibahasa.

Tata Letak dan Kisi Otomatis

Elemen Grid ini, berguna untuk tata letak otomatis karena memungkinkan pengembang untuk memosisikan elemen. Grid Kontrol mampu mendistribusikan ruang yang tersedia di antara elemen turunannya, menggunakan pengaturan kolom dan baris. Elemen UI dapat menjangkau beberapa sel, dan dimungkinkan untuk memiliki kisi dalam kisi. Kisi berguna karena memungkinkan Anda membuat dan memosisikan antarmuka pengguna yang kompleks. Contoh berikut menunjukkan penggunaan kisi untuk memosisikan beberapa tombol dan teks. Perhatikan bahwa tinggi dan lebar sel diatur ke Auto; oleh karena itu, sel yang berisi tombol dengan gambar menyesuaikan agar pas dengan gambar.

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

Grafik berikut menunjukkan kisi yang dihasilkan oleh kode sebelumnya.

Grid example Grid

Tata Letak dan Kisi Otomatis Menggunakan Properti IsSharedSizeScope

Grid Elemen berguna dalam aplikasi yang dapat dilokalkan untuk membuat kontrol yang sesuai dengan konten. Namun, terkadang Anda ingin kontrol mempertahankan ukuran tertentu terlepas dari kontennya. Misalnya, jika Anda memiliki tombol "OK", "Batal" dan "Telusuri" Anda mungkin tidak ingin tombol berukuran sesuai dengan konten. Dalam hal Grid.IsSharedSizeScope ini properti terlampir berguna untuk berbagi ukuran yang sama di antara beberapa elemen kisi. Contoh berikut menunjukkan cara berbagi data ukuran kolom dan baris di antara beberapa Grid elemen.

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

Catatan

Untuk sampel kode lengkap, lihat Berbagi Properti Ukuran Antar Kisi.

Bagikan melalui

Gunakan Gambaran Umum Tata Letak Otomatis

Keuntungan Menggunakan Tata Letak Otomatis

Tata Letak dan Kontrol Otomatis

Standar Tata Letak dan Pengkodan Otomatis

Tata Letak dan Kisi Otomatis

Tata Letak dan Kisi Otomatis Menggunakan Properti IsSharedSizeScope

Baca juga

Saran dan Komentar

Sumber Daya Tambahan: