Bagikan melalui

Cara: Mengubah Ukuran Kolom dengan GridSplitter

  • Artikel

Contoh ini menunjukkan cara membuat vertikal GridSplitter untuk mendistribusikan ulang spasi antara dua kolom dalam tanpa Grid mengubah dimensi Grid.

Contoh

Cara membuat GridSplitter yang melapisi tepi kolom

Untuk menentukan GridSplitter yang mengubah ukuran kolom yang berdekatan dalam Grid, atur Column properti terlampir ke salah satu kolom yang ingin Anda mengubah ukurannya. Jika Anda Grid memiliki lebih dari satu baris, atur RowSpan properti terlampir ke jumlah baris. Kemudian atur properti ke HorizontalAlignmentLeft atau Right (perataan mana yang Anda tetapkan bergantung pada dua kolom mana yang ingin Anda ubah ukurannya). Terakhir, atur properti ke VerticalAlignmentStretch.

<GridSplitter Grid.Column="1" 
              Grid.RowSpan="3" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="true"
              Width="5"/>

GridSplitter Yang tidak memiliki kolomnya sendiri mungkin dikaburkan oleh kontrol lain di Grid. Untuk informasi selengkapnya tentang cara mencegah masalah ini, lihat Pastikan GridSplitter Terlihat.

Cara membuat GridSplitter yang menempati kolom

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

Contoh berikut menunjukkan cara menentukan vertikal GridSplitter yang menempati kolom dan mengubah ukuran kolom di kedua sisinya.

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

Baca juga