Dela via

Gör så här: Ändra storlek på kolumner med en GridSplitter

Det här exemplet visar hur du skapar en lodrät GridSplitter för att omdistribuera utrymmet mellan två kolumner i en Grid utan att ändra dimensionerna för Grid.

Exempel

Så här skapar du en GridSplitter som överlagrar kanten på en kolumn

Om du vill ange en GridSplitter som ändrar storlek på intilliggande kolumner i en Gridanger du egenskapen Column bifogad till en av de kolumner som du vill ändra storlek på. Om Grid har fler än en rad anger du egenskapen RowSpan kopplad till antalet rader. Ange sedan egenskapen HorizontalAlignment till Left eller Right (vilken justering du anger beror på vilka två kolumner du vill ändra storlek på). Ange slutligen egenskapen VerticalAlignment till Stretch.

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

En GridSplitter som inte har en egen kolumn kan döljas av andra kontroller i Grid. Mer information om hur du förhindrar det här problemet finns i Kontrollera att en GridSplitter är synlig.

Skapa en GridSplitter som upptar en kolumn

Om du vill ange en GridSplitter som upptar en kolumn i en Gridanger du egenskapen Column bifogad till en av de kolumner som du vill ändra storlek på. Om rutnätet har mer än en rad anger du egenskapen RowSpan kopplad till antalet rader. Ange sedan HorizontalAlignment till Center, ange egenskapen VerticalAlignment till Stretchoch ange Width för kolumnen som innehåller GridSplitter till Auto.

I följande exempel visas hur du definierar en lodrät GridSplitter som upptar en kolumn och ändrar storlek på kolumnerna på vardera sidan av den.

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

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

Se även

  • Last updated on