Patrick Patrick - 10 months ago 50
C# Question

Gridsplitter not showing nor working only when horizontal

I have a grid which simulates a print preview with some other features

<Grid Name="grdReport_RTF" Visibility="Visible">
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />

<RichTextBox x:Name="rtbReport" Grid.Row="0" Margin="10" BorderBrush="Gray" Background="White" Foreground="Black" IsEnabled="True" Padding="10" Style="{DynamicResource rtbStyleDocLocal}" />

<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />

<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="10" >

<TabControl Grid.Row="3" Background="Transparent" BorderBrush="Gainsboro" BorderThickness="3" Margin="10">
<TabItem Name="tbiReports" BorderBrush="Red" Background="Transparent" >
<DataGrid Name="dtgReports" Background="Green" Height="100" Margin="10" />
<TabItem Name="tbiLastReport" BorderBrush="Red" Background="Transparent">
<DataGrid Name="dtgLastReport" Background="Green" Height="100" Margin="10" />


So no matter what I try the gridspliter doesn't show nor work.

enter image description here

What's more I have taken off all the code below and put the one provided here and it stubbornly keeps on hiding


I've tried to simplify it all. In short:

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

<Border Grid.Column="0" Background="Transparent" BorderBrush="Gainsboro" BorderThickness="3" />
<GridSplitter Grid.Column="1" Width="10"/>
<Border Grid.Column="2" Background="Transparent" BorderBrush="Gainsboro" BorderThickness="3" />

works like a charm. Instead the following doesn't:

<Grid Grid.Column="1">
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>

<Border Grid.Row="0" Background="Transparent" BorderBrush="Gainsboro" BorderThickness="3" />
<GridSplitter Grid.Row="1" Height="10"/>
<Border Grid.Row="2" Background="Transparent" BorderBrush="Gainsboro" BorderThickness="3" />

What's wrong in that?

Answer Source

Normally, the GridSplitter element should chose its resize direction automatically based on its size proportions (up-down if Height < Width and left-right if Width < Height). For some reason, this logic may not apply and then the resize direction needs to be specified explicitely.

<GridSplitter Grid.Row="1" Height="10" Width="100" ResizeDirection="Rows"/>

In this code, setting Width and Height ensures, that the splitter doesn't stay invisible due to zero size and ResizeDirection ensures, that the correct direction is supported.

Another property that may come handy is ResizeBehavior="PreviousAndNext", to ensure, that the right rows/columns are affected by the resize action.