Sidebar

带有菜单、分组与子菜单的侧边栏，可折叠为图标或移出画面，即 uikit:Sidebar。

示例可交互

Sidebar — Avalonia UIKit

Live demo unavailable

<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="6" ClipToBounds="True"
        Width="560" Height="480" HorizontalAlignment="Left">
  <DockPanel>
    <DockPanel.Styles>
      <!-- Collapsed to icons, the header and footer keep their icons only. -->
      <Style Selector="uikit|SidebarHeader:collapsed StackPanel.text, uikit|SidebarHeader:collapsed PathIcon.end, uikit|SidebarFooter:collapsed TextBlock, uikit|SidebarFooter:collapsed PathIcon.end">
        <Setter Property="IsVisible" Value="False" />
      </Style>
      <Style Selector="uikit|SidebarHeader:collapsed Border.logo">
        <Setter Property="Width" Value="16" />
        <Setter Property="Height" Value="16" />
        <Setter Property="Background" Value="Transparent" />
      </Style>
      <Style Selector="uikit|SidebarHeader:collapsed Border.logo PathIcon">
        <Setter Property="Foreground" Value="{DynamicResource UIKit.Foreground}" />
      </Style>
    </DockPanel.Styles>
    <uikit:Sidebar Name="Sidebar" DockPanel.Dock="Left" ExpandedWidth="220" uikit:SidebarMenuItem.Click="OnItemClick">
      <uikit:Sidebar.Header>
        <uikit:SidebarHeader>
          <uikit:SidebarHeader.Flyout>
            <MenuFlyout Placement="BottomEdgeAlignedLeft">
              <MenuItem Header="Twitter Inc." />
              <MenuItem Header="Meta Platforms" />
              <MenuItem Header="Google Inc." />
            </MenuFlyout>
          </uikit:SidebarHeader.Flyout>
          <DockPanel>
            <Border Classes="logo" DockPanel.Dock="Left" Width="32" Height="32" CornerRadius="6"
                    Background="{DynamicResource UIKit.Success}">
              <PathIcon Data="{StaticResource UIKit.Icon.GalleryVerticalEnd}"
                        Foreground="{DynamicResource UIKit.SuccessForeground}" />
            </Border>
            <PathIcon Classes="end" DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" />
            <StackPanel Classes="text" Margin="8,0" VerticalAlignment="Center">
              <TextBlock Text="Company Name" FontSize="14" />
              <TextBlock Text="Enterprise" FontSize="12" />
            </StackPanel>
          </DockPanel>
        </uikit:SidebarHeader>
      </uikit:Sidebar.Header>
      <uikit:SidebarGroup Label="Platform">
        <uikit:SidebarMenu>
          <uikit:SidebarMenuItem Label="Playground" Icon="{StaticResource UIKit.Icon.SquareTerminal}" IsActive="True" IsOpen="True">
            <uikit:SidebarMenuItem Label="History">
              <uikit:SidebarMenuItem.Suffix>
                <ToggleSwitch Classes="xsmall" />
              </uikit:SidebarMenuItem.Suffix>
            </uikit:SidebarMenuItem>
            <uikit:SidebarMenuItem Label="Starred" />
          </uikit:SidebarMenuItem>
          <uikit:SidebarMenuItem Label="Models" Icon="{StaticResource UIKit.Icon.Bot}">
            <uikit:SidebarMenuItem Label="Genesis" />
            <uikit:SidebarMenuItem Label="Explorer" />
          </uikit:SidebarMenuItem>
          <uikit:SidebarMenuItem Label="Documentation" Icon="{StaticResource UIKit.Icon.BookOpen}">
            <uikit:SidebarMenuItem.ContextMenu>
              <ContextMenu>
                <MenuItem Header="Open in new tab" />
              </ContextMenu>
            </uikit:SidebarMenuItem.ContextMenu>
          </uikit:SidebarMenuItem>
        </uikit:SidebarMenu>
      </uikit:SidebarGroup>
      <uikit:SidebarGroup Label="Projects">
        <uikit:SidebarMenu>
          <uikit:SidebarMenuItem Label="Design Engineering" Icon="{StaticResource UIKit.Icon.Frame}">
            <uikit:SidebarMenuItem.Suffix>
              <uikit:Badge IsDot="True">
                <PathIcon Data="{StaticResource UIKit.Icon.Bell}" Width="14" Height="14" Margin="2" />
              </uikit:Badge>
            </uikit:SidebarMenuItem.Suffix>
          </uikit:SidebarMenuItem>
          <uikit:SidebarMenuItem Label="Sales and Marketing" Icon="{StaticResource UIKit.Icon.ChartPie}" />
          <uikit:SidebarMenuItem Label="Travel" Icon="{StaticResource UIKit.Icon.Map}" IsEnabled="False" />
        </uikit:SidebarMenu>
      </uikit:SidebarGroup>
      <uikit:Sidebar.Footer>
        <uikit:SidebarFooter>
          <DockPanel>
            <PathIcon Classes="end" DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" />
            <StackPanel Orientation="Horizontal" Spacing="8">
              <PathIcon Data="{StaticResource UIKit.Icon.CircleUser}" />
              <TextBlock Text="Jason Lee" VerticalAlignment="Center" />
            </StackPanel>
          </DockPanel>
        </uikit:SidebarFooter>
      </uikit:Sidebar.Footer>
    </uikit:Sidebar>
    <StackPanel Margin="16" Spacing="12">
      <StackPanel Orientation="Horizontal" Spacing="12">
        <uikit:SidebarToggleButton IsCollapsed="{Binding #Sidebar.IsCollapsed}" />
        <TextBlock Name="Current" Text="Playground" FontWeight="SemiBold" VerticalAlignment="Center" />
      </StackPanel>
      <TextBlock Text="A quick view of your workspace activity." TextWrapping="Wrap"
                 Foreground="{DynamicResource UIKit.MutedForeground}" />
    </StackPanel>
  </DockPanel>
</Border>

用法

uikit:Sidebar 是 Sidebar 的容器，但自带内容：一个 Header、可滚动的条目，以及一个 Footer，宽度为 ExpandedWidth（默认 255），位于 Side 一侧。IsCollapsed 按 Collapsible 的设定折叠它：Icon 折叠到 48px，只显示图标；Offcanvas 移出布局，从内容一侧滑走；None 永不折叠。宽度在 200ms 内变化，而内容直接跳到新的布局。它的条目通常是 uikit:SidebarGroup（条目上方的一行弱化标签），其中包含由 uikit:SidebarMenuItem 组成的 uikit:SidebarMenu：

条目属性	含义
`Label`、`Icon`	该行的文字及其 14px 图标。折叠为图标时，该行只有图标本身，标签作为工具提示显示在其右侧。
`Suffix`	行末的内容：一个 `uikit:Badge`、一个 `ToggleSwitch`、一个图标。
`IsActive`	当前条目，以侧边栏强调色和中等字重显示。
嵌套条目、`IsOpen`	分隔线下的子菜单，由行末的折角箭头开合；设置 `IsOpen` 可让它初始为展开。
`ClickToOpen`、`ClickToToggle`	点击该行也会打开子菜单，或打开并关闭子菜单。
`Click`、`Command`	点击该行时引发并执行；禁用的条目（`IsEnabled="False"`）显示为弱化色，且不接受点击。
`ContextMenu`	右键点击时打开。

uikit:SidebarHeader 与 uikit:SidebarFooter 是两行，悬停或 IsSelected 时取侧边栏强调色；它们是按钮，因此 Flyout 就是它们的菜单。uikit:SidebarToggleButton 会翻转它所绑定的 IsCollapsed，并显示对应的面板图标。在折叠的侧边栏内部，头部、底部、分组和条目都带有 :collapsed 伪类，样式可据此为自定义内容定义外观。作为 SplitView 的 Pane 使用时，uikit:Sidebar 改为跟随窗格：表面由 SplitView 绘制，并且窗格关闭时侧边栏处于折叠状态，在紧凑显示模式下折叠为图标。

演示包含一个头部及其公司菜单、两个分组、一个带开关的子菜单、一个徽标、一个禁用条目、一个底部和一个切换按钮；点击会让某个条目成为当前条目。

示例

uikit:Sidebar 作为 SplitView 的窗格，模式为 CompactInline：关闭窗格会把菜单折叠为其图标。

在 SplitView 中可交互

Live demo unavailable

<SplitView DisplayMode="CompactInline" OpenPaneLength="200" IsPaneOpen="{Binding #PaneToggle.IsChecked}"
           Width="480" Height="220" HorizontalAlignment="Left">
  <SplitView.Pane>
    <uikit:Sidebar>
      <uikit:SidebarMenu>
        <uikit:SidebarMenuItem Label="Inbox" Icon="{StaticResource UIKit.Icon.Inbox}" IsActive="True" />
        <uikit:SidebarMenuItem Label="Starred" Icon="{StaticResource UIKit.Icon.Star}" />
        <uikit:SidebarMenuItem Label="Projects" Icon="{StaticResource UIKit.Icon.Folder}" />
      </uikit:SidebarMenu>
    </uikit:Sidebar>
  </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>

Sidebar

#用法

#示例

用法

示例