CODEWITHSUNDEEP
wpfgridsplitter
CBlafer
CBlafer

Reputation: 171

Vertical and horizontal GridSplitter

I have a grid and I am trying to put both vertical and horizontal GridSplitters. It's my main grid and I would like it to be as fluid as possible.

On my second definition I get "Missing Grid.Column setter for non-first child"

I've found loads of documentation on implementing one or the other. I have found nothing suggesting that I can do both. But, our industry is made of people wanting to push functionality.

Here is my XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"></RowDefinition>
        <RowDefinition Height="5"></RowDefinition>
        <RowDefinition Height="50*"></RowDefinition>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"></GridSplitter>
    <GridSplitter  Grid.Row="1" Height="5" HorizontalAlignment="Stretch"></GridSplitter>

Upvotes: 8

Views: 16966

Answers (3)

namg_engr
namg_engr

Reputation: 359

ResizeBehavior="PreviousAndNext" needs to be added to allow proper adjustment of both columns and rows. See below for my sample.

    <Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"></ColumnDefinition>
        <ColumnDefinition Width="5"></ColumnDefinition>
        <ColumnDefinition Width="50*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"></RowDefinition>
        <RowDefinition Height="5"></RowDefinition>
        <RowDefinition Height="50*"></RowDefinition>
    </Grid.RowDefinitions>
    <GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3" 
                  VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext">
    </GridSplitter>
    <GridSplitter  Grid.Row="1" Height="5" Grid.ColumnSpan ="3" 
                   HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext">            
    </GridSplitter>
    <Button Grid.Row="0" Grid.Column="0" Content="1,1" FontSize="30"/>
    <Button Grid.Row="2" Grid.Column="0" Content="3,1" FontSize="30"/>
    <Button Grid.Row="0" Grid.Column="2" Content="1,3" FontSize="30"/>
    <Button Grid.Row="2" Grid.Column="2" Content="3,3" FontSize="30"/>
</Grid>

Upvotes: 5

thewhiteambit
thewhiteambit

Reputation: 1436

You can set the direction as follows:

<GridSplitter ResizeDirection=”Rows”/>

or

<GridSplitter ResizeDirection=”Columns”/>

However, when you set Alignment to either Horizontal or Vertical, the default ResizeDirection=”Auto” will most likely choose a fitting resize direction.

Upvotes: 1

Muds
Muds

Reputation: 4116

You need to set Grid.Column for grid splitters and also you need

HorizontalAlignment="Stretch"  -> for horizontal splitter
VerticalAlignment="Stretch"  -> for Vertical splitter

so your code looks like --

<GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3" VerticalAlignment="Stretch"></GridSplitter>
<GridSplitter  Grid.Row="1" Height="5" Grid.ColumnSpan ="3" HorizontalAlignment="Stretch"></GridSplitter>

Upvotes: 11

Related Questions