Grid usage issues

[nasterhe]

I want to make the lower area visible or hidden by clicking on the ToggleSwitch, and adjust the height of the upper and lower areas by dragging the GridSplitter.

It's normal to click the ToggleSwitch like this, but the lower area is not normal when I drag the GridSplitter.

RowDefinitions="*,4,Auto"

Border ... Height="220"

<Grid RowDefinitions="*,4,Auto">
    <Border Grid.Row="0"  BorderBrush="Black" BorderThickness="2">
          <ToggleSwitch x:Name="showBottomArea" HorizontalAlignment="Right" OffContent="Sub is hidden" OnContent="Show sub" IsChecked="True"/>
    </Border>
    <GridSplitter Grid.Row="1" ResizeDirection="Rows"/>
    <Border Grid.Row="2" BorderBrush="Black" BorderThickness="2" Height="220" Classes.open="{Binding #showBottomArea.IsChecked}" Classes.closed="{Binding !#showBottomArea.IsChecked}">
      <Border.Styles>
        <Style Selector="Border.open">
          <Setter Property="IsVisible" Value="True"/>
        </Style>
        <Style Selector="Border.closed">
          <Setter Property="IsVisible" Value="False"/>
        </Style>
      </Border.Styles>
    </Border>
  </Grid>

It's normal to drag the GridSplitter like this, but clicking the ToggleSwitch will leave the lower area blank.

RowDefinitions="*,4,220"

<Grid RowDefinitions="*,4,220">
  <Border Grid.Row="0"  BorderBrush="Black" BorderThickness="2">
    <ToggleSwitch x:Name="showBottomArea" HorizontalAlignment="Right" OffContent="Sub is hidden" OnContent="Show sub" IsChecked="True"/>
  </Border>
  <GridSplitter Grid.Row="1" ResizeDirection="Rows"/>
  <Border Grid.Row="2" BorderBrush="Black" BorderThickness="2" Classes.open="{Binding #showBottomArea.IsChecked}" Classes.closed="{Binding !#showBottomArea.IsChecked}">
    <Border.Styles>
      <Style Selector="Border.open">
        <Setter Property="IsVisible" Value="True"/>
      </Style>
      <Style Selector="Border.closed">
        <Setter Property="IsVisible" Value="False"/>
      </Style>
    </Border.Styles>
  </Border>
</Grid>

[stevemonaco]

The lower area will be empty. GridSplitter directly modifies the the RowDefinitions / ColumnDefinitions collection. Your third row containing the Border will have its auto-sizing set to an explicit height value and that's how the resizing is implemented.

You need to manually reset the definitions to auto otherwise. eg.

public MainWindow()
{
    InitializeComponent();

    showBottomArea.IsCheckedChanged += ShowBottomArea_IsCheckedChanged;
}

private void ShowBottomArea_IsCheckedChanged(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    if (showBottomArea.IsChecked is false)
    {
        grid.RowDefinitions = RowDefinitions.Parse("*, auto, auto");
    }
}

I'm not sure if your layout is the same as mine, but you'll have resizing issues with the grid splitter's resizing area overlapping the window frame's resizing area.

[nasterhe]

private void ShowBottomArea_IsCheckedChanged(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    if (showBottomArea.IsChecked is false)
    {
        grid.RowDefinitions = RowDefinitions.Parse("*, auto, auto");
    }
    else
          grid.RowDefinitions = RowDefinitions.Parse("*, auto, 220");
}

Thanks.
The only downside is that I can't revert back to the dragged position of the GridSplitter before lower area was hidden.

[stevemonaco]

You'll have to capture/restore that in the above method.