Avalonia/samples/ControlCatalog/MainView.xaml

<DrawerPage x:Class="ControlCatalog.MainView"
            xmlns="https://github.com/avaloniaui"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:controls="using:ControlCatalog.Controls"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:local="using:ControlCatalog"
            xmlns:models="using:ControlCatalog.Models"
            xmlns:viewModels="using:ControlCatalog.ViewModels"
            d:DesignWidth="1200"
            d:DesignHeight="720"
            CornerRadius="20"
            x:DataType="viewModels:MainWindowViewModel"
            DrawerBackground="Transparent"
            DrawerLayoutBehavior="Split"
            IsOpen="{Binding IsDrawerOpened , Mode=TwoWay}"
            DisplayMode="{Binding DisplayMode, Mode=TwoWay}"
            DrawerLength="260"
            CompactDrawerLength="52"
            DrawerFooter="{Binding}"
            Drawer="{Binding}"
            DrawerHeader="{Binding}">
  <Design.DataContext>
    <viewModels:MainWindowViewModel/>
  </Design.DataContext>
  <DrawerPage.Resources>
    <ResourceDictionary>
      <x:Double x:Key="TabbedPageTabItemHeaderFontSize">20</x:Double>
      <Thickness x:Key="TabbedPageTabStripPadding">10</Thickness>
      <ControlTheme x:Key="{x:Type local:MainView}"
                    TargetType="local:MainView"
                    BasedOn="{StaticResource {x:Type DrawerPage}}" />

      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Dark">
          <Color x:Key="PageBackgroundColor">#FF171717</Color>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Default">
          <Color x:Key="PageBackgroundColor">#FFF2F2F2</Color>
        </ResourceDictionary>
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
  </DrawerPage.Resources>
  <DrawerPage.Styles>
    <Style Selector="TextBlock.h2">
      <Setter Property="TextWrapping" Value="Wrap" />
      <Setter Property="MaxWidth" Value="400" />
      <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>
    <Style Selector="FlexPanel.navItemFlex">
      <Setter Property="Direction" Value="Row"/>
      <Setter Property="AlignItems" Value="Center"/>
      <Setter Property="Wrap" Value="NoWrap"/>
    </Style>
  </DrawerPage.Styles>
  <DrawerPage.DrawerTemplate>
    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
      <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                    VerticalScrollBarVisibility="Auto">
        <Grid RowDefinitions="Auto,*" Margin="5,0">
          <controls:SelectableButton Margin="1"
                                     Command="{Binding HomeCommand}"
                                     Theme="{StaticResource SelectableItemButton}">
            <controls:SelectableButton.IsSelected>
              <MultiBinding Converter="{x:Static ObjectConverters.AreAllEqual}">
                <Binding Path="$parent[local:MainView].ViewModel.CurrentPageItem.Header"/>
                <Binding Path="$parent[local:MainView].ViewModel.HomeItem.Header"/>
              </MultiBinding>
            </controls:SelectableButton.IsSelected>
            <FlexPanel Classes="navItemFlex">
              <PathIcon Width="16" Height="16"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Data="{Binding HomeItem.IconData}"/>
              <TextBlock DockPanel.Dock="Right" Text="{Binding HomeItem.Header}"
                         VerticalAlignment="Center"
                         Flex.Grow="1"
                         Margin="12,0,0,0"
                         IsVisible="{Binding IsDrawerOpened}"
                         TextTrimming="CharacterEllipsis"/>
            </FlexPanel>
          </controls:SelectableButton>
          <ItemsControl ItemsSource="{Binding HomeSections}"
                        Grid.Row="1">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
              <DataTemplate x:DataType="models:HomeSection">
                <controls:HomeItemExpander Theme="{StaticResource HomeSectionExpander}" Margin="1"
                                           IsVisible="{Binding IsSectionVisible}"
                                           IsExpanded="{Binding $parent[local:MainView].ViewModel.ExpandAllSections, Mode=OneWay}"
                                           Command="{Binding $parent[local:MainView].ViewModel.NavigateToPageCommand}"
                                           CommandParameter="{Binding PageItem}"
                                           CanExpand="{Binding $parent[local:MainView].ViewModel.IsDrawerOpened}">
                  <controls:HomeItemExpander.IsSelected>
                    <MultiBinding  Mode="OneWay" Converter="{x:Static BoolConverters.Or}">
                      <MultiBinding Mode="OneWay" Converter="{x:Static ObjectConverters.AreAllEqual}">
                        <Binding Path="$parent[local:MainView].ViewModel.CurrentPageItem.Header"/>
                        <Binding Path="Title"/>
                      </MultiBinding>
                      <MultiBinding Mode="OneWay" Converter="{x:Static ObjectConverters.AreAllEqual}">
                        <Binding Path="$parent[local:MainView].ViewModel.OpenedSection"/>
                        <Binding Path="Title"/>
                      </MultiBinding>
                    </MultiBinding>
                  </controls:HomeItemExpander.IsSelected>
                  <controls:HomeItemExpander.Header>
                    <FlexPanel Classes="navItemFlex">
                      <PathIcon Width="16" Height="16"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="{Binding IconData}"/>
                      <TextBlock Text="{Binding Title}" Classes="itemLabel"
                                 VerticalAlignment="Center"
                                 Margin="12,0,0,0"
                                 Flex.Grow="1"
                                 IsVisible="{Binding $parent[local:MainView].ViewModel.IsDrawerOpened}"
                                 TextTrimming="CharacterEllipsis"/>
                    </FlexPanel>
                  </controls:HomeItemExpander.Header>
                  <controls:HomeItemExpander.Content>
                    <ItemsControl ItemsSource="{Binding Items}" Margin="10,0,0,0">
                      <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                          <StackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                      </ItemsControl.ItemsPanel>
                      <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="models:PageItem">
                          <controls:SelectableButton Margin="1,2"
                                                     IsVisible="{Binding IsVisible}"
                                                     Theme="{StaticResource SelectableItemButton}"
                                                     Command="{Binding $parent[local:MainView].ViewModel.NavigateToPageCommand}"
                                                     CommandParameter="{Binding}">
                            <controls:SelectableButton.IsSelected>
                              <MultiBinding Mode="OneWay" Converter="{x:Static ObjectConverters.AreAllEqual}">
                                <Binding Path="$parent[local:MainView].ViewModel.CurrentPageItem.Header"/>
                                <Binding Path="Header"/>
                              </MultiBinding>
                            </controls:SelectableButton.IsSelected>
                            <FlexPanel Classes="navItemFlex">
                              <PathIcon Width="16" Height="16"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Data="{Binding IconData}"/>
                              <TextBlock Text="{Binding Header}"  Classes="itemLabel"
                                         VerticalAlignment="Center"
                                         Margin="12,0,0,0"
                                         Flex.Grow="1"
                                         IsVisible="{Binding $parent[local:MainView].ViewModel.IsDrawerOpened}"
                                         TextTrimming="CharacterEllipsis"/>
                            </FlexPanel>
                          </controls:SelectableButton>
                        </DataTemplate>
                      </ItemsControl.ItemTemplate>
                    </ItemsControl>
                  </controls:HomeItemExpander.Content>
                </controls:HomeItemExpander>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </Grid>
      </ScrollViewer>
    </DataTemplate>
  </DrawerPage.DrawerTemplate>
  <DrawerPage.DrawerHeaderTemplate>
    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
      <DockPanel LastChildFill="True" Margin="6">
        <DockPanel.Styles>
          <Style Selector="PathIcon#Icon">
            <Setter Property="Width">32</Setter>
            <Setter Property="Height">32</Setter>
          </Style>
          <ContainerQuery Name="IconHost" Query="min-width:60">
            <Style Selector="PathIcon#Icon">
              <Setter Property="Width">50</Setter>
              <Setter Property="Height">50</Setter>
            </Style>
          </ContainerQuery>
          <ContainerQuery Name="IconHost" Query="min-width:120">
            <Style Selector="PathIcon#Icon">
              <Setter Property="Width">100</Setter>
              <Setter Property="Height">100</Setter>
            </Style>
          </ContainerQuery>
        </DockPanel.Styles>
        <TextBox Name="SearchBox"
                 DockPanel.Dock="Bottom"
                 PlaceholderText="Search..."
                 Text="{Binding Query, Mode=TwoWay}"
                 Margin="4,0,8,4"
                 IsVisible="{Binding IsDrawerOpened}"
                 VerticalContentAlignment="Center">
          <TextBox.InnerLeftContent>
            <PathIcon Width="14" Height="14" Margin="6,0,0,0"
                      VerticalAlignment="Center"
                      Data="{StaticResource SearchIcon}" />
          </TextBox.InnerLeftContent>
        </TextBox>
        <Border HorizontalAlignment="Center" Margin="0,10"
                Background="Transparent"
                Cursor="Hand"
                Container.Name="IconHost"
                Container.Sizing="Width"
                Tapped="AvaloniaIcon_OnTapped">
          <PathIcon VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Foreground="#007DF9"
                    Name="Icon"
                    Data="{StaticResource AppIcon}" />
        </Border>
      </DockPanel>
    </DataTemplate>
  </DrawerPage.DrawerHeaderTemplate>
  <DrawerPage.DrawerFooterTemplate>
    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
      <controls:SelectableButton Margin="10"
                                 Command="{Binding SettingsCommand}"
                                 Theme="{StaticResource SelectableItemButton}">
        <controls:SelectableButton.IsSelected>
          <MultiBinding Converter="{x:Static ObjectConverters.AreAllEqual}">
            <Binding Path="$parent[local:MainView].ViewModel.CurrentPageItem.Header"/>
            <Binding Path="$parent[local:MainView].ViewModel.SettingsItem.Header"/>
          </MultiBinding>
        </controls:SelectableButton.IsSelected>
        <FlexPanel Classes="navItemFlex">
          <PathIcon Width="16" Height="16"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Data="{Binding SettingsItem.IconData}"/>
          <TextBlock Text="{Binding SettingsItem.Header}"  Classes="itemLabel"
                     VerticalAlignment="Center"
                     Margin="12,0,0,0"
                     Flex.Grow="1"
                     IsVisible="{Binding IsDrawerOpened}"
                     TextTrimming="CharacterEllipsis"/>
        </FlexPanel>
      </controls:SelectableButton>
    </DataTemplate>
  </DrawerPage.DrawerFooterTemplate>

  <NavigationPage Name="NavPage">
    <NavigationPage.Resources>
      <SolidColorBrush x:Key="NavigationBarBackground">Transparent</SolidColorBrush>
    </NavigationPage.Resources>
  </NavigationPage>
</DrawerPage>