Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>

like image 830
CBlafer Avatar asked Dec 16 '15 14:12

CBlafer


People also ask

How to use GridSplitter in WPF?

To specify a GridSplitter that resizes adjacent columns in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows.

What is a grid splitter?

A GridSplitter is a divider that divides a Grid into two sections. A GridSplitter allows us to resize rows or columns in a Grid by dragging the GridSplitter Bar. An example of a GridSplitter is the Windows Explorer.


2 Answers

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>
like image 97
Muds Avatar answered Nov 15 '22 08:11

Muds


ResizeHehavior="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>
like image 42
namg_engr Avatar answered Nov 15 '22 09:11

namg_engr