Como: criar aplicativos User-Resizable com GridSplitter

You can use the GridSplitter control in conjunction with the Grid container control to create window layouts that are resizable by the user at run time. For example, in an application that has a UI divided into areas, the user can drag a splitter to make an area larger, depending on what the user wants to see more of.

When you add a GridSplitter control to a Grid, it is a child of the grid control and must be positioned in a row and a column like any other child control. The GridSplitter must have a non-zero width or height, so that the user can grab and drag it at runtime.

Some best practices for GridSplitter include the following:

• Put the GridSplitter in a dedicated row or column that does not contain any other controls.

• Set the height of the row or the width of the column that contains the GridSplitter to Auto.

• Dedicate a single Grid to the GridSplitter. Add additional container panels to the Grid to complete the layout.

To create a vertical GridSplitter

1. In Design view, select the Grid. For more information, see Como: Selecionar e mover elementos na superfície de design.

2. Add a column where you want the GridSplitter to appear. For more information, see Como: adicionar linhas e colunas para uma grade.

   Observação
   In some cases, it might be difficult to position rows and columns in the designer. In that case, you can configure the Grid by using the XAML editor. See the example section at the end of this topic for sample XAML markup.

3. From the Toolbox, drag a GridSplitter control into the added column.

4. In the Properties window, set the following properties for the GridSplitter:

   Property	Value	Possible Values
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Columns	Auto Column Rows
   Grid.Column	The column in which you want the GridSplitter. (Column numbers are zero-based.)
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	The total number of rows in the Grid.
   Width	A non-zero number. Por exemplo, 10.
   Height	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In Design view, select the Grid.

6. Set the Width of the ColumnDefinition that contains the GridSplitter to Auto.

To create a horizontal GridSplitter

1. In Design view, select the Grid. For more information, see Como: Selecionar e mover elementos na superfície de design.

2. Add a row where you want the GridSplitter to appear. For more information, see Como: adicionar linhas e colunas para uma grade.

   Observação
   In some cases, it might be difficult to position rows and columns in the designer. In that case, you can configure the Grid by using the XAML editor. See the example section at the end of this topic for sample XAML markup.

3. From the Toolbox, drag a GridSplitter control into the added row.

4. In the Properties window, set the following properties for the GridSplitter:

   Property	Value	Possible Values
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Column Rows
   Grid.Column	0
   Grid.ColumnSpan	The total number of columns in the Grid.
   Grid.Row	The row in which you want the GridSplitter. (Row numbers are zero-based.)
   Grid.RowSpan	1
   Width	Auto
   Height	A non-zero number. Por exemplo, 10.
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In Design view, select the Grid.

6. Set the Height of the RowDefinition that contains the GridSplitter to Auto.

Exemplo

The following XAML creates a horizontal GridSplitter:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Consulte também

Tarefas

Walkthrough: Criando um aplicativo redimensionável usando o WPF Designer

Referência

GridSplitter

Outros recursos

Layouts no criador de WPF

GridSplitter