Resizeable and Collapsable sidebar with GridSplitter

Hi! I’m trying to make a resizeable and collapsable sidebar.

I expect it to have the following behaviour:

1. A user can resize the sidebar up and down to a particular boundary (i.e. set Min and Max width).
2. A user can entirely hide (and then show) the sidebar

I use Grid with three columns: one for the sidebar, the second for the GridSplitter to accomplish resize and the third for the main content.

If I configure the Grid like this:

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

I can successfully resize the sidebar and hide it with IsVisible="True" but it does not have Min Width. If I set MinWidth for the sidebar control

<Panel Grid.Column="0" MinWidth="100" />

I can still resize the leftmost column to the size less than it’s content MinWidth.

If I set MinWidth for a Grid Column:

<ColumnDefinition Width="Auto" MinWidth="100" />

The splitter lets me resize the column down to this MinWidth (just like I need), however, when I hide the sidebar with IsVisible="False" the column persists (i.e. blank space with MinWidth is shown).

The splitter is very thin and it is not an option to resize the column to width 0 and consider this as “collapsed” since there is no way to resize it back.

I’m using Avalonia 0.10.0-rc1

[cezarypiatek]

I solved that issue by applying one of two classes that change the Grid.ColumnSpan attribute and toggling visibility of GridSplitter and Sidebar container:

<Panel>
  <Panel.Styles>
    <Style Selector=".sidebar_open">
      <Setter Property="Grid.ColumnSpan" Value="1"></Setter>
    </Style>
    <Style Selector=".sidebar_close">
      <Setter Property="Grid.ColumnSpan" Value="3"></Setter>
    </Style>
  </Panel.Styles>

  <Grid ColumnDefinitions="*,Auto, 420">
    <Panel Grid.Column="0"
      Classes.sidebar_open="{Binding IsSidebarOpen}"
      Classes.sidebar_close="{Binding !IsSidebarOpen}">
    </Panel>
    <GridSplitter Grid.Column="1" Width="3" MinWidth="1" BorderThickness="0"
      VerticalAlignment="Stretch"
      IsVisible="{Binding IsSidebarOpen}"></GridSplitter>
    <Panel Grid.Column="1" IsVisible="{Binding IsSidebarOpen}">
      <TextBlock>This is the sidebar</TextBlock>
    </Panel>
  </Grid>
  
</Panel>

[maxkatz6]

SplitView has similar behavior out of box, but without grid splitter