Cara Menggunakan Kisi untuk Tata Letak Otomatis

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 yang diadaptasi untuk UI memerlukan penyesuaian. 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. Karena elemen Grid 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 grid.

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

contoh
Jaringan

Lihat juga

• Gunakan Ikhtisar Tata Letak Otomatis
• Gunakan Tata Letak Otomatis untuk Membuat Tombol