Avalonia UI中如何添加可折叠、可调整大小的侧边栏？

一、实现折叠功能 #

Avalonia的SplitView组件自带折叠能力，通过控制IsPaneOpen属性即可切换侧边栏的显示/隐藏，配合DisplayMode还能设置折叠后的显示模式（比如CompactInline会保留窄条区域，Overlay则让侧边栏覆盖在主内容上）。

示例代码（带折叠按钮） #

<Grid>
  <SplitView x:Name="MainSplitView" 
             PanePlacement="Left"
             DisplayMode="CompactInline"
             CompactPaneLength="48"
             OpenPaneLength="240">
    <!-- 侧边栏内容 -->
    <SplitView.Pane>
      <!-- 侧边栏内的折叠按钮 -->
      <Button Content="←" 
              HorizontalAlignment="Right"
              Click="TogglePaneButton_Click" />
      <TextBlock Text="Pane content" Margin="10"/>
    </SplitView.Pane>
    <!-- 主内容区 -->
    <Grid>
      <views:MainView/>
      <!-- 主内容区的折叠触发按钮 -->
      <Button Content="☰" 
              HorizontalAlignment="Left"
              Margin="10"
              Click="TogglePaneButton_Click"/>
    </Grid>
  </SplitView>
</Grid>

后台代码（切换折叠状态） #

private void TogglePaneButton_Click(object sender, RoutedEventArgs e)
{
    MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;
}

如果使用MVVM模式，可通过绑定ICommand实现：

// ViewModel 示例
public ICommand TogglePaneCommand => new RelayCommand(() =>
{
    MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;
});

二、实现可调整大小功能 #

SplitView本身不支持拖动调整宽度，需要结合Grid和GridSplitter组件来实现可拖动调整的侧边栏，同时保留折叠逻辑。

示例代码（可调整大小+折叠） #

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="SidebarColumn" Width="240"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <!-- 侧边栏内容 -->
  <Grid x:Name="SidebarGrid" Grid.Column="0">
    <TextBlock Text="Resizable Sidebar Content" Margin="10"/>
  </Grid>

  <!-- 拖动调整宽度的分隔器 -->
  <GridSplitter x:Name="Splitter" Grid.Column="1" 
                Width="6"
                ResizeDirection="Columns"
                Background="#EEEEEE"/>

  <!-- 主内容区 -->
  <Grid Grid.Column="2">
    <views:MainView/>
    <Button Content="☰" 
            HorizontalAlignment="Left"
            Margin="10"
            Click="ToggleSidebar_Click"/>
  </Grid>
</Grid>

后台代码（处理折叠与宽度记忆） #

private bool _isSidebarOpen = true;
private double _previousSidebarWidth = 240;

private void ToggleSidebar_Click(object sender, RoutedEventArgs e)
{
    _isSidebarOpen = !_isSidebarOpen;
    if (_isSidebarOpen)
    {
        // 展开时恢复之前的宽度
        SidebarColumn.Width = new GridLength(_previousSidebarWidth);
        SidebarGrid.Visibility = Visibility.Visible;
        Splitter.Visibility = Visibility.Visible;
    }
    else
    {
        // 折叠前记录当前宽度
        _previousSidebarWidth = SidebarColumn.Width.Value;
        SidebarColumn.Width = new GridLength(0);
        SidebarGrid.Visibility = Visibility.Collapsed;
        Splitter.Visibility = Visibility.Collapsed;
    }
}

MVVM模式下的实现思路 #

通过绑定IsSidebarOpen属性，在属性变更时调整侧边栏列的宽度，并记录之前的宽度值，逻辑和后台代码一致，只是通过INotifyPropertyChanged通知UI更新。

内容的提问来源于stack exchange，提问作者Bhagavan Reddy