Sidebar

可折叠为图标或收起至画布之外的侧边栏，即 SplitView 与 DrawerPage。

示例可交互

Sidebar — Avalonia UIKit

Live demo unavailable

<SplitView DisplayMode="CompactInline" OpenPaneLength="200" IsPaneOpen="{Binding #PaneToggle.IsChecked}"
           Width="480" Height="220" HorizontalAlignment="Left">
  <SplitView.Pane>
    <StackPanel Margin="12" Spacing="12">
      <TextBlock Text="Workspace" FontWeight="Medium" Margin="4,0" />
      <StackPanel Orientation="Horizontal" Spacing="8" Margin="4,0">
        <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" />
        <TextBlock Text="Inbox" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Spacing="8" Margin="4,0">
        <PathIcon Data="{StaticResource UIKit.Icon.Star}" />
        <TextBlock Text="Starred" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Spacing="8" Margin="4,0">
        <PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
        <TextBlock Text="Projects" />
      </StackPanel>
    </StackPanel>
  </SplitView.Pane>
  <Border Background="{DynamicResource UIKit.Muted}">
    <ToggleButton Name="PaneToggle" Classes="outline" IsChecked="True" Margin="8"
                  HorizontalAlignment="Left" VerticalAlignment="Top">
      <PathIcon Data="{StaticResource UIKit.Icon.PanelLeftClose}" />
    </ToggleButton>
  </Border>
</SplitView>

用法

SplitView 提供侧边栏表面：面板背景，内容一侧带 1px 边框，展开到 OpenPaneLength（默认 255），过渡时长 200ms。DisplayMode 选择折叠方式：CompactInline 折叠为图标（关闭时面板保留 CompactPaneLength，即 48px），Inline 收起至画布之外（关闭后不占空间），Inline 配合 IsPaneOpen="True" 则是不折叠的侧边栏。把 IsPaneOpen 绑定到切换控件；PanePlacement="Right" 把面板放到右侧。覆盖模式即 Sheet。

对于带子项、分组、页头与页脚的菜单，请使用 uikit:Sidebar，可单独使用，也可作为 SplitView 的面板。

DrawerPage 增加页头、主体与页脚及其内边距：DrawerHeader、Drawer 与 DrawerFooter，内部为 12px（折叠为图标时为 8px）。DrawerBehavior="Locked" 是不折叠的侧边栏，DrawerLayoutBehavior="CompactInline" 是图标模式，切换按钮位于页头，"Split" 则是收起至画布之外的模式；IsOpen 打开与关闭抽屉。

示例

PanePlacement="Right" 把面板放到右侧；边框仍在内容一侧。

右侧可交互

Live demo unavailable

<SplitView DisplayMode="CompactInline" PanePlacement="Right" OpenPaneLength="200"
           IsPaneOpen="{Binding #PaneToggle.IsChecked}"
           Width="480" Height="220" HorizontalAlignment="Left">
  <SplitView.Pane>
    <StackPanel Margin="12" Spacing="12">
      <TextBlock Text="Details" FontWeight="Medium" Margin="4,0" />
      <StackPanel Orientation="Horizontal" Spacing="8" Margin="4,0">
        <PathIcon Data="{StaticResource UIKit.Icon.Info}" />
        <TextBlock Text="Overview" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Spacing="8" Margin="4,0">
        <PathIcon Data="{StaticResource UIKit.Icon.Calendar}" />
        <TextBlock Text="Timeline" />
      </StackPanel>
    </StackPanel>
  </SplitView.Pane>
  <Border Background="{DynamicResource UIKit.Muted}">
    <ToggleButton Name="PaneToggle" Classes="outline" IsChecked="True" Margin="8"
                  HorizontalAlignment="Right" VerticalAlignment="Top">
      <PathIcon Data="{StaticResource UIKit.Icon.PanelRightClose}" />
    </ToggleButton>
  </Border>
</SplitView>

CompactInline 的 DrawerPage：页头包含标题与切换按钮，页脚是一个头像。

DrawerPage可交互

Live demo unavailable

<DrawerPage DrawerLayoutBehavior="CompactInline" IsOpen="True"
            Width="480" Height="220" HorizontalAlignment="Left">
  <DrawerPage.DrawerHeader>
    <TextBlock Text="Workspace" FontWeight="Medium" VerticalAlignment="Center" />
  </DrawerPage.DrawerHeader>
  <DrawerPage.Drawer>
    <StackPanel Spacing="12">
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Inbox}" />
        <TextBlock Text="Inbox" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Star}" />
        <TextBlock Text="Starred" />
      </StackPanel>
      <StackPanel Orientation="Horizontal" Spacing="8">
        <PathIcon Data="{StaticResource UIKit.Icon.Folder}" />
        <TextBlock Text="Projects" />
      </StackPanel>
    </StackPanel>
  </DrawerPage.Drawer>
  <DrawerPage.DrawerFooter>
    <uikit:Avatar Classes="small" UserName="Alice" HorizontalAlignment="Left" />
  </DrawerPage.DrawerFooter>
  <Border Background="{DynamicResource UIKit.Muted}" />
</DrawerPage>

Sidebar

#用法

#示例

用法

示例