Question

I want to have main window split in three parts like the one on the picture. there’s supposed to be a line (red one) or left border of the rectangle number 2, that, when it’s dragged with mouse, it resizes both rectangle 1 and 2. it’s like the behaviour of playlist in windows media player. any ideas on how to obtain this? Also, it would be great if someone proposes a solution to how this playlist make collapsed if the red line is dragged to the right.

Answer 1

Define a <Grid> with columns and rows like so:

<Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="300"/>
    <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="600"/>
    <ColumnDefinition Width="20"/>
    <ColumnDefinition Width="300"/>
    </Grid.ColumnDefinitions>
    ...

and then the gridsplitter (still inside the grid):

    <GridSplitter Grid.Row="0" Grid.Column="1" ResizeDirection="Columns" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

Note that the gridsplitter will need it’s own column.