CODEWITHSUNDEEP
c#wpfwpf-grid
Bhanu Chhabra
Bhanu Chhabra

Reputation: 576

WPF Using GridSplitter for individual Row Column in Grid

I want to have GridSplitter that resizes only one cell (actually not correct term per se for WPF Grid, let's call it individual Grid[r][c]) and cell adjacent to it to be resized.

Here what I tried:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
            <TextBlock>Testing 1</TextBlock>
        </Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
            <TextBlock>Testing 2</TextBlock> </Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2">
            <TextBlock>Testing 2</TextBlock>
        </Border>
        <Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0">
            <TextBlock>Testing 3</TextBlock>
        </Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
            <TextBlock>Testing 4</TextBlock></Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2">
            <TextBlock>Testing 5</TextBlock></Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0">
            <TextBlock>Testing 6</TextBlock></Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1">
            <TextBlock>Testing 7</TextBlock></Border>
        <Border Grid.IsSharedSizeScope="True"  Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="2">
            <TextBlock>Testing 8</TextBlock></Border>
        <GridSplitter Grid.Row="0"
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="1"
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="2" 
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="2" 
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"

                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="0" 
                      Grid.Column="2"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 

                      VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="1" 
                      Grid.Column="2"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="2" 
                      Grid.Column="2"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Left" 
                        VerticalAlignment="Stretch"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Columns"
                        Width="2"/>
        <GridSplitter Grid.Row="1"
                      Grid.Column="0"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
        <GridSplitter Grid.Row="2"
                      Grid.Column="0"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
        <GridSplitter Grid.Row="1" 
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
        <GridSplitter Grid.Row="2" 
                      Grid.Column="1"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
        <GridSplitter Grid.Row="1" 
                      Grid.Column="2"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
        <GridSplitter Grid.Row="2" 
                      Grid.Column="2"
                      Margin="1"
                      ResizeBehavior="PreviousAndCurrent"
                      HorizontalAlignment="Stretch" 
                        VerticalAlignment="Top"
                        Background="Black" 
                        ShowsPreview="true"
                        ResizeDirection="Rows"
                        Height="2"/>
    </Grid>

I want it to behave in a way that individual cell in the Grid shall be resized.

  1. At app start

Here What it looks at app start

  1. While resizing via grid splitter:

While resizing

  1. After Reisize:

After resize

I wanted that Only Grid[ 0][ 0] and Grid[ 0][ 1] to be resized

Upvotes: 2

Views: 2132

Answers (2)

Laurie Stearn
Laurie Stearn

Reputation: 999

Have own code (for "simplicity", sorry) which addresses vertical gridsplitting. Given time, will be including an update for the horizontal, but assuming it's no more than defining distinct grid columns instead of Celso's distinct grid rows.
There's certainly some issue in applying the particular member fields of GridSizeBehaviour.
Replace CurrentAndNext with the BasedOnAlignment property in the first attached vertical gridsplitting example to find that all rows are affected- not just the the row the gridsplitter was defined on.
To bug out GridSizeBehaviour, replace CurrentAndNext with PreviousAndCurrent in there for the 0'th row definition and find that once the gridsplitter is clicked, it never returns/loses visibility, along with the rest of the controls on the form. 

<Window x:Class="GridSplitterSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GridSplitterSample" Height="300" Width="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
    <GridSplitter Grid.Row="0"  Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
    <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
    <Button Grid.Row="2" Grid.Column="0">Button 2</Button>
    <Button Grid.Row="2" Grid.Column="2">Button 3</Button>
</Grid>

Perhaps there is an API solution to this?
But using Celso's idea of nested grids, it works in the following code:

<Window x:Class="GridSplitterSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GridSplitterSample" Height="300" Width="300">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
       <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="5" />
       <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Row="0"  Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>

    <Grid Grid.Row="1" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
    </Grid>

    <Grid Grid.Row="2" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0">Button 2</Button>
        <Button Grid.Column="2">Button 3</Button>
    </Grid>


</Grid>

More needs to be done with this, however, for if the user drags the gridsplitter to the edge of a form maximised to screen size, it cannot be retrieved!
Looks like it was never the policy of MS to touch row/columns/cells in a grid, as they are basically user defined criteria.

Upvotes: 1

Celso L&#237;vero
Celso L&#237;vero

Reputation: 726

You have 3 columns and 3 lines, not 3 columns inside each line, try this:

<Grid  >
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="0"/>
        <GridSplitter Grid.Column="1"/>
        <GridSplitter Grid.Column="2"/>
    </Grid>
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

    </Grid>
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>   
    </Grid>
</Grid>

Upvotes: 2

Related Questions