如何在XAML中将2个网格列的宽度绑定在一起

Question

I'm hoping someone can make this easy.

I have a grid with 5 columns, columns 1 and 3 contain splitters. What I want to happen is when I move one splitter have the other one move to match such that the effect is the first and last columns being sized together.

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" x:Name="col1"/>
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="{Binding ElementName=col1, Path=ActualWidth}" />
    </Grid.ColumnDefinitions>

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" Background="Red"/>
    <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" Background="Red"/>
</Grid>

Needless to say the above doesn't work. And even if it did it would only allow for using the first splitter not the second. Can anyone shed some light?

Answer 1

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" x:Name="col1"/>
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="{Binding ElementName=helperGrid, Path=ActualWidth}" />
    </Grid.ColumnDefinitions>

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" Background="Red"/>
    <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" Background="Red"/>
    <Grid Grid.Column="0" x:Name="helperGrid" Width="{Binding ElementName=helperGrid2, Path=ActualWidth}" MinWidth="100"/>
    <Grid Grid.Column="4" x:Name="helperGrid2"/>
</Grid>

This worked for me, I changed the first column's width to auto and used two helper grids in the first and last columns

Answer 2

After much playing around I could get close but not completely what I was looking for. So I ended up placing a Grid in each if the splitter columns instead of GridSplitters and handling the PreviewMouseDown event on the Grid and also the PreviewMouseUp and PreviewMouseMove events of the parent control to implement my own resizing. This was used to detect dragging in columns 1 and 3 and resize colunmns 0 and 3 together. Sadly the code has become rather interwoven with the rest of my control so isn't easy to post. Maybe one day when my xaml improves I'll be able to break the functionality out into a properly reusable control.