WPF - GridSplitter not working between two grids

2
votes

I have some issues with getting the grid splitter to work properly.

I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.

How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.

I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.

I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.

I hope it makes sense.

XAML:

<Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="3"></TextBlock>

            <Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
            <ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
            <Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
            <ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
        </Grid>

        <!--Below grid only shown when errors are present. Not relevant for problem -->
        <Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2"  Grid.Column="0">
            <TextBlock/>
        </Grid>

        <!-- The "Left" Grid -->
        <Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
            <WebBrowser></WebBrowser>
        </Grid>

        <GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>

        <!-- The "Right" Grid -->
        <Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">  
            <Border BorderBrush="Blue"  BorderThickness="1" MinWidth="200" Background="#4C808080" >
                <GroupBox MinWidth="200">
                    <GroupBox.HeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Row="0" Grid.Column="1" Margin="5"/>
                            </Grid>
                        </DataTemplate>
                    </GroupBox.HeaderTemplate>
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />

                        <Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
                        <TextBox  Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>

                        <ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
                                        <TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </GroupBox>
            </Border>
        </Grid>
    </Grid>
</Grid>
2
wpfxamlgrid

2 Answers

1
votes

Have a look at this

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="3"></TextBlock>

        <Label Grid.Row="0"
               Grid.Column="0"
               VerticalContentAlignment="Center"
               Margin="5" />
        <ComboBox Grid.Row="0"
                  Grid.Column="1"
                  MinWidth="200px" />
        <Label Grid.Column="2"
               VerticalContentAlignment="Center"
               Margin="10 5 5 5" />
        <ComboBox Grid.Row="0"
                  Grid.Column="3"
                  IsEditable="True"
                  MinWidth="250px" />
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The "Left" Grid -->
        <Grid Grid.Column="0"
              Background="Aqua">
        </Grid>

        <GridSplitter HorizontalAlignment="Stretch"
                      ResizeDirection="Columns"
                      Width="10"
                      Grid.Column="1"
                      ResizeBehavior="PreviousAndNext" />

        <!-- The "Right" Grid -->
        <Grid Grid.Column="2"
              Panel.ZIndex="2"
              MinWidth="200"
              Background="Yellow">
            <Border BorderBrush="Blue"
                    BorderThickness="1"
                    MinWidth="200"
                    Background="#4C808080">
                <GroupBox MinWidth="200">
                    <GroupBox.HeaderTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock  Grid.Row="0"
                                            Grid.Column="1"
                                            Margin="5" />
                            </Grid>
                        </DataTemplate>
                    </GroupBox.HeaderTemplate>
                    <Grid Grid.IsSharedSizeScope="True">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"
                                              SharedSizeGroup="Label" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0"
                               Grid.Row="0"
                               Margin="5"
                               VerticalAlignment="Center"
                               Grid.ColumnSpan="2" />
                        <TextBox Grid.Column="1"
                                 Grid.Row="0"
                                 Margin="5,7"
                                 VerticalAlignment="Center"
                                 IsReadOnly="True" />

                        <Label Grid.Column="0"
                               Grid.Row="1"
                               Margin="5"
                               VerticalAlignment="Center"
                               Grid.ColumnSpan="2" />
                        <TextBox  Grid.Column="1"
                                  Grid.Row="1"
                                  Margin="5,7"
                                  VerticalAlignment="Center"
                                  IsReadOnly="True" />

                        <ItemsControl Grid.Row="2"
                                      Grid.Column="0"
                                      Grid.ColumnSpan="2">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"
                                                              SharedSizeGroup="Label" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>

                                        <Label Grid.Column="0"
                                               Grid.Row="0"
                                               Margin="5"
                                               VerticalAlignment="Center" />
                                        <TextBox Grid.Column="1"
                                                 Grid.Row="0"
                                                 Margin="5"
                                                 VerticalAlignment="Center"
                                                 IsReadOnly="True" />
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </GroupBox>
            </Border>
        </Grid>
    </Grid>

    <!--Below grid only shown when errors are present. Not relevant for problem -->
    <Grid Grid.Row="2">
        <TextBlock />
    </Grid>
</Grid>

I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.

Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.

/edit added width relation

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <!-- The "Left" Grid -->

This means when you start the application the first column will take twice the size then the third.

0
votes

This should be a decent showcase, it's exactly the same for columns, just sideways.

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="300"/> //sets the height of the first row
        <RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"
          HorizontalAlignment="Left"
          Width="400"
          Background="Green" />

    <Grid Grid.Row="0" 
          Margin="400,0,0,0" 
          Background="Red"/>

    <Grid Grid.Row="1" 
          Background="Blue"/>

    <GridSplitter Grid.Row="0"
                  VerticalAlignment="Bottom"  
                  HorizontalAlignment="Stretch" 
                  Height="2.5" 
                  Background="Black" />

</Grid>