Sidebar

A sidebar collapsing to icons or off canvas, as SplitView and DrawerPage.

ExampleInteractive

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>

Usage

SplitView carries the sidebar surface: the pane background with a 1px border on the content side, opening to OpenPaneLength (255 by default) and moving over 200ms. DisplayMode picks the collapse mode: CompactInline collapses to icons (the closed pane keeps CompactPaneLength, 48px), Inline collapses off canvas (closed to nothing), and Inline with IsPaneOpen="True" is a sidebar that does not collapse. Bind IsPaneOpen to a toggle; PanePlacement="Right" puts the pane on the right. The overlay modes are the Sheet.

DrawerPage adds a header, body and footer with their paddings: DrawerHeader, Drawer and DrawerFooter, 12px inside (8px when collapsed to icons). DrawerBehavior="Locked" is the sidebar that does not collapse, DrawerLayoutBehavior="CompactInline" the icon mode, with the toggle button in the header, and "Split" the off-canvas mode; IsOpen opens and closes the drawer.

Examples

PanePlacement="Right" for a pane on the right; the border stays on the content side.

RightInteractive

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>

DrawerPage in CompactInline: the header holds the title and the toggle, the footer an avatar.

DrawerPageInteractive

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

#Usage

#Examples

Usage

Examples