Bagikan melalui

Cara: Menggunakan Kisi untuk Tata Letak Otomatis

  • Artikel

Contoh ini menjelaskan cara menggunakan kisi dalam pendekatan tata letak otomatis untuk membuat aplikasi yang dapat dilokalkan.

Pelokalan antarmuka pengguna (UI) dapat menjadi proses yang memakan waktu. Seringkali localizer perlu mengukur ulang dan memposisikan ulang elemen selain menerjemahkan teks. Di masa lalu setiap bahasa bahwa UI diadaptasi untuk penyesuaian yang diperlukan. Sekarang dengan kemampuan Windows Presentation Foundation (WPF) Anda dapat merancang elemen yang mengurangi kebutuhan untuk penyesuaian. Pendekatan untuk menulis aplikasi yang dapat lebih mudah diukur ulang dan direposisi disebut auto layout.

Contoh Extensible Application Markup Language (XAML) 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 Karena elemen dapat menyesuaikan dengan kontennya, elemen tersebut dapat berguna saat mengambil pendekatan tata letak otomatis untuk merancang aplikasi yang dapat dilokalkan.

Contoh

Contoh berikut menunjukkan cara menggunakan kisi.

<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 output sampel kode.

Grid example
Kisi

Baca juga