Bagikan melalui

Cara: Mengubah Ukuran Baris dengan GridSplitter

  • Artikel

Contoh ini menunjukkan cara menggunakan horizontal GridSplitter untuk mendistribusikan ulang spasi antara dua baris dalam Grid tanpa mengubah dimensi Grid.

Contoh

Cara membuat GridSplitter yang melapisi tepi baris

Untuk menentukan GridSplitter yang mengubah ukuran baris yang berdekatan dalam Grid, atur Row properti terlampir ke salah satu baris yang ingin Anda mengubah ukurannya. Jika Anda Grid memiliki lebih dari satu kolom, atur ColumnSpan properti terlampir untuk menentukan jumlah kolom. Kemudian atur ke VerticalAlignmentTop atau Bottom (perataan mana yang Anda tetapkan bergantung pada dua baris mana yang ingin Anda ubah ukurannya). Terakhir, atur properti ke HorizontalAlignmentStretch.

Contoh berikut menunjukkan cara menentukan horizontal GridSplitter yang mengubah ukuran baris yang berdekatan.

<GridSplitter Grid.Row="1" 
              Grid.ColumnSpan="3" 
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Top"
              Background="Black" 
              ShowsPreview="true"
              ResizeDirection="Rows"
              Height="5"/>

GridSplitter Yang tidak menempati barisnya sendiri dapat dikaburkan oleh kontrol lain di Grid. Untuk informasi selengkapnya tentang cara mencegah masalah ini, lihat Pastikan GridSplitter Terlihat.

Cara membuat GridSplitter yang menempati baris

Untuk menentukan GridSplitter yang menempati baris dalam Grid, atur Row properti terlampir ke salah satu baris yang ingin Anda mengubah ukurannya. Jika Anda Grid memiliki lebih dari satu kolom, atur ColumnSpan properti terlampir ke jumlah kolom. Kemudian atur VerticalAlignment ke Center, atur HorizontalAlignment properti ke Stretch, dan atur Height baris yang berisi GridSplitter ke Auto.

Contoh berikut menunjukkan cara menentukan horizontal GridSplitter yang menempati baris dan mengubah ukuran baris di kedua sisinya.

<Grid.RowDefinitions>
  <RowDefinition Height="50*" />
  <RowDefinition Height="Auto" />
  <RowDefinition Height="50*" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0" Grid.Column="1" Background="Tan"/>
<GridSplitter Grid.Row="1"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Center"
              Background="Black" 
              ShowsPreview="True"
              Height="5"
           />
<StackPanel Grid.Row="2" Grid.Column="0" Background="Brown"/>

Baca juga