CODEWITHSUNDEEP
wpfxaml
Alexey Titov
Alexey Titov

Reputation: 353

WPF multiple GridSplitters and a "star-width" column

I have this simple XAML

<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Column="0" Fill="LightCoral" MinWidth="100"/>
    <Rectangle Grid.Column="1" Fill="LightBlue" MinWidth="100"/>
    <Rectangle Grid.Column="2" Fill="LightCoral" MinWidth="100"/>
    <Rectangle Grid.Column="3" Fill="Gray" MinWidth="100"/>
    <Rectangle Grid.Column="4" Fill="LightCoral" MinWidth="100"/>

    <GridSplitter Grid.Column="0" Grid.RowSpan="2" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
    <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
    <GridSplitter Grid.Column="2" Grid.RowSpan="2" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
    <GridSplitter Grid.Column="3" Grid.RowSpan="2" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
    <GridSplitter Grid.Column="4" Grid.RowSpan="2" Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>

</Grid>

This one works well, but I want to have the second column (one that holds the LightBlue rectangle) - to fill all available width. If I set the 2nd ColumnDefinition.Width="*" - then GridSplitters to the right side of it, lets say Gray rectangle's GridSplitter - it starts acting very wierd and quite not what I want. Is it possible to make GridSplitters to behave like in DataGrid's column headers?

Upvotes: 1

Views: 1132

Answers (1)

Glen Thomas
Glen Thomas

Reputation: 10744

Create separate columns for your GridSplitter controls

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Column="0" Fill="LightCoral" MinWidth="100"/>
    <Rectangle Grid.Column="2" Fill="LightBlue"/>
    <Rectangle Grid.Column="4" Fill="LightCoral" MinWidth="100"/>
    <Rectangle Grid.Column="6" Fill="Gray" MinWidth="100"/>
    <Rectangle Grid.Column="8" Fill="LightCoral" MinWidth="100"/>

    <GridSplitter Grid.Column="1" Grid.RowSpan="2" 
                  Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"
                  ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
    <GridSplitter Grid.Column="3" Grid.RowSpan="2" 
                  Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"
                  ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
    <GridSplitter Grid.Column="5" Grid.RowSpan="2" 
                  Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"
                  ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
    <GridSplitter Grid.Column="7" Grid.RowSpan="2" 
                  Width="10" HorizontalAlignment="Right" VerticalAlignment="Stretch"
                  ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>

</Grid>

Upvotes: 2

Related Questions