Question

I have a WPF Grid with four columns containing only one GridSplitter. Two of the columns (0 and 3) are scalable, but one scalable column is not directly adjacent to the GridSplitter (column 2).

Columns 0 and 3 must have the same initial size. So I can't put column 0 and 1 in a nested grid.

How can I solve this?

<Grid Height="40">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="Blue" Margin="8" />
    <Rectangle Grid.Column="1" Fill="Yellow" Margin="8" Width="24" />
    <GridSplitter Grid.Column="2" Width="8" VerticalAlignment="Stretch" />
    <Rectangle Grid.Column="3" Fill="Red" Margin="8" />
</Grid>

Edit: I solved it with the help of nickolay.laptev

<Grid Height="40">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="Blue" Margin="8" />
    <Rectangle Grid.Column="1" Fill="Yellow" Margin="8 8 16 8" Width="24" />
    <GridSplitter Grid.Column="1" Width="8" VerticalAlignment="Stretch" HorizontalAlignment="Right" ResizeBehavior="PreviousAndNext" />
    <Rectangle Grid.Column="2" Fill="Red" Margin="8" />
</Grid>
Was it helpful?

Solution

I offer 2 options:

  1. Don't use single column for GridSplitter. Instead add it into column that is between resizable columns (2nd column in your case). You can place splitter inside column anywhere using horizontal alignment.
  2. Process columns resizing manually. If preview is enabled use GridSplitter.DragCompleted event. Change required columns width in it. If preview is disabled use another event with Preview prefix.

It fixed my problem.

OTHER TIPS

Something like this

        <ColumnDefinition Width="{Binding ElementName=sizedColumn.ActualWidth}" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" x:Name="sizedColumn"/>  

But you would need to add a multi converter and also pass windows size and column 1 size.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top