Avalonia/samples/ControlCatalog/Pages/DrawerPage/ControlsGalleryAppPage.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.ControlsGalleryAppPage">

  <UserControl.Resources>
    <SolidColorBrush x:Key="NavPaneBg"        Color="#202020"/>
    <SolidColorBrush x:Key="NavContentBg"     Color="#141414"/>
    <SolidColorBrush x:Key="NavItemHover"     Color="#1AFFFFFF"/>
    <SolidColorBrush x:Key="NavItemSelected"  Color="#0FFFFFFF"/>
    <SolidColorBrush x:Key="NavAccent"        Color="#60CDFF"/>
    <SolidColorBrush x:Key="NavText"          Color="#FFFFFF"/>
    <SolidColorBrush x:Key="NavTextSecondary" Color="#C8FFFFFF"/>
    <SolidColorBrush x:Key="NavBorder"        Color="#2EFFFFFF"/>
    <SolidColorBrush x:Key="NavSearchBg"      Color="#0BFFFFFF"/>
  </UserControl.Resources>

  <DockPanel>
    <ScrollViewer x:Name="InfoPanel" DockPanel.Dock="Right" Width="280">
      <StackPanel Margin="16" Spacing="12">
        <TextBlock Text="Controls Gallery App" FontSize="15" FontWeight="SemiBold"
                   Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
        <TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
                   Text="Controls gallery app built with DrawerPage CompactInline mode. Dark Fluent palette, accent pill indicator, search box that fades in when open, expandable groups, and Settings pinned to the footer." />
        <Separator />
        <TextBlock Text="Layout" FontSize="13" FontWeight="SemiBold" />
        <StackPanel Spacing="4">
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• CompactInline — icon rail always visible" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• CompactDrawerLength = 48 (icon only)" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• DrawerLength = 280 (icon + label)" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• Left accent pill on selected item" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• Search box fades in when open" />
          <TextBlock FontSize="12" TextWrapping="Wrap" Text="• Settings pinned to drawer footer" />
        </StackPanel>
        <Separator />
        <TextBlock Text="Key Code" FontSize="13" FontWeight="SemiBold" />
        <Border Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
                CornerRadius="4" Padding="8">
          <TextBlock FontFamily="Cascadia Code,Consolas,Menlo,monospace"
                     FontSize="10" TextWrapping="Wrap"
                     Text="&lt;DrawerPage&#xA; DrawerLayoutBehavior=&quot;CompactInline&quot;&#xA; CompactDrawerLength=&quot;48&quot;&#xA; DrawerLength=&quot;280&quot;&#xA; DrawerBackground=&quot;#202020&quot;&gt;" />
        </Border>
      </StackPanel>
    </ScrollViewer>

    <Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
            BorderThickness="1" CornerRadius="8" ClipToBounds="True">

      <DrawerPage x:Name="NavDrawer"
                  DrawerLayoutBehavior="CompactInline"
                  CompactDrawerLength="48"
                  DrawerLength="280"
                  Background="{StaticResource NavContentBg}"
                  DrawerBackground="{StaticResource NavPaneBg}">

        <!-- ── Drawer header: hamburger + app title ── -->
        <DrawerPage.DrawerHeader>
          <StackPanel Background="{StaticResource NavPaneBg}">

            <!-- Hamburger row -->
            <Button x:Name="BtnHamburger" Click="OnHamburgerClick"
                    Width="48" Height="40" Padding="0" Margin="0,8,0,0"
                    HorizontalAlignment="Left"
                    Background="Transparent" BorderThickness="0"
                    ToolTip.Tip="Navigation menu"
                    HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
              <PathIcon Width="16" Height="16"
                        Foreground="{StaticResource NavText}"
                        Data="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
            </Button>

            <!-- Search box — fades in when drawer is open -->
            <Border Margin="8,8,8,4"
                    Background="{StaticResource NavSearchBg}"
                    BorderBrush="{StaticResource NavBorder}"
                    BorderThickness="1" CornerRadius="4" Height="32"
                    Classes="openFade"
                    Classes.drawerOpen="{Binding #NavDrawer.IsOpen}">
              <Grid ColumnDefinitions="Auto,*" Margin="8,0">
                <PathIcon Grid.Column="0" Width="12" Height="12"
                          Foreground="{StaticResource NavTextSecondary}"
                          Data="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
                <TextBox x:Name="SearchBox" Grid.Column="1"
                         PlaceholderText="Search"
                         Background="Transparent" BorderThickness="0"
                         Padding="6,0,0,0"
                         Foreground="{StaticResource NavText}"
                         PlaceholderForeground="{StaticResource NavTextSecondary}"
                         FontSize="12"
                         VerticalAlignment="Center"
                         VerticalContentAlignment="Center"
                         TextChanged="OnSearchTextChanged" />
              </Grid>
            </Border>

          </StackPanel>
        </DrawerPage.DrawerHeader>

        <!-- ── Nav items ── -->
        <DrawerPage.Drawer>
          <ContentPage Background="Transparent">
            <StackPanel Margin="0,4,0,0" Spacing="2">

              <!-- What's New (selected) -->
              <Button x:Name="BtnWhatsNew" Tag="WhatsNew"
                      Classes="navItem navItemSelected"
                      Click="OnNavItemClick" ToolTip.Tip="What's New">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <PathIcon Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
                    <TextBlock Text="What's New" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </StackPanel>
                </Panel>
              </Button>

              <!-- All Controls -->
              <Button x:Name="BtnAllControls" Tag="AllControls"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="All Controls">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <PathIcon Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M3 3h8v8H3V3m10 0h8v8h-8V3M3 13h8v8H3v-8m10 0h8v8h-8v-8" />
                    <TextBlock Text="All Controls" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </StackPanel>
                </Panel>
              </Button>

              <!-- Separator -->
              <Border Height="1" Background="{StaticResource NavBorder}" Margin="8,4" />

              <!-- Basic Input (expandable) -->
              <Button x:Name="BtnBasicInput" Tag="BasicInput"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Basic Input">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <Grid ColumnDefinitions="Auto,*" VerticalAlignment="Center">
                    <PathIcon Grid.Column="0" Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z" />
                    <TextBlock Grid.Column="1" Text="Basic Input" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </Grid>
                </Panel>
              </Button>

              <!-- Collections -->
              <Button x:Name="BtnCollections" Tag="Collections"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Collections">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <Grid ColumnDefinitions="Auto,*" VerticalAlignment="Center">
                    <PathIcon Grid.Column="0" Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z" />
                    <TextBlock Grid.Column="1" Text="Collections" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </Grid>
                </Panel>
              </Button>

              <!-- Media -->
              <Button x:Name="BtnMedia" Tag="Media"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Media">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <Grid ColumnDefinitions="Auto,*" VerticalAlignment="Center">
                    <PathIcon Grid.Column="0" Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M21 3H3C2 3 1 4 1 5v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1-1-2-2-2zm0 16H3V5h18v14zM8 15c0 1.66 1.34 3 3 3s3-1.34 3-3V9h3V7h-5v8c0 .55-.45 1-1 1s-1-.45-1-1V7H8v8z" />
                    <TextBlock Grid.Column="1" Text="Media" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </Grid>
                </Panel>
              </Button>

              <!-- Menus and Toolbars -->
              <Button x:Name="BtnMenus" Tag="Menus"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Menus and Toolbars">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <Grid ColumnDefinitions="Auto,*" VerticalAlignment="Center">
                    <PathIcon Grid.Column="0" Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
                    <TextBlock Grid.Column="1" Text="Menus and Toolbars" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </Grid>
                </Panel>
              </Button>

              <!-- Navigation -->
              <Button x:Name="BtnNavigation" Tag="Navigation"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Navigation">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <Grid ColumnDefinitions="Auto,*" VerticalAlignment="Center">
                    <PathIcon Grid.Column="0" Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" />
                    <TextBlock Grid.Column="1" Text="Navigation" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </Grid>
                </Panel>
              </Button>

              <!-- Text -->
              <Button x:Name="BtnText" Tag="Text"
                      Classes="navItem"
                      Click="OnNavItemClick" ToolTip.Tip="Text">
                <Panel>
                  <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                          Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                          Margin="4,0,0,0" />
                  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <PathIcon Width="16" Height="16" Margin="16,0,0,0"
                              Foreground="{StaticResource NavText}"
                              Data="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z" />
                    <TextBlock Text="Text" FontSize="13" Margin="12,0,0,0"
                               Foreground="{StaticResource NavText}"
                               VerticalAlignment="Center"
                               Classes="openFade"
                               Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                  </StackPanel>
                </Panel>
              </Button>

            </StackPanel>
          </ContentPage>
        </DrawerPage.Drawer>

        <!-- ── Settings pinned to footer ── -->
        <DrawerPage.DrawerFooter>
          <StackPanel Background="{StaticResource NavPaneBg}" Margin="0,0,0,4">
            <Border Height="1" Background="{StaticResource NavBorder}" Margin="4,0" />
            <Button x:Name="BtnSettings" Tag="Settings"
                    Classes="navItem"
                    Click="OnNavItemClick" ToolTip.Tip="Settings"
                    Margin="0,4,0,4">
              <Panel>
                <Border Classes="navPill" Width="3" Height="16" CornerRadius="2"
                        Background="#60CDFF" HorizontalAlignment="Left" VerticalAlignment="Center"
                        Margin="4,0,0,0" />
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                  <PathIcon Width="16" Height="16" Margin="16,0,0,0"
                            Foreground="{StaticResource NavText}"
                            Data="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94zM12,15.6c-1.98,0-3.6-1.62-3.6-3.6s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
                  <TextBlock Text="Settings" FontSize="13" Margin="12,0,0,0"
                             Foreground="{StaticResource NavText}"
                             VerticalAlignment="Center"
                             Classes="openFade"
                             Classes.drawerOpen="{Binding #NavDrawer.IsOpen}" />
                </StackPanel>
              </Panel>
            </Button>
          </StackPanel>
        </DrawerPage.DrawerFooter>

        <!-- ── Detail area — BarHeight=0 hides the navigation bar entirely ── -->
        <DrawerPage.Content>
          <NavigationPage x:Name="DetailNav"
                          Background="{StaticResource NavContentBg}"
                          BarHeight="0" />
        </DrawerPage.Content>

      </DrawerPage>
    </Border>
  </DockPanel>

  <UserControl.Styles>

    <!-- openFade: collapsed (removed from layout) when closed, visible when open -->
    <Style Selector=":is(Control).openFade">
      <Setter Property="IsVisible" Value="False" />
    </Style>
    <Style Selector=":is(Control).openFade.drawerOpen">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <!-- Hamburger button -->
    <Style Selector="Button#BtnHamburger /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="CornerRadius" Value="4" />
    </Style>
    <Style Selector="Button#BtnHamburger:pointerover /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#1AFFFFFF" />
    </Style>
    <Style Selector="Button#BtnHamburger:pressed /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#2AFFFFFF" />
    </Style>

    <!-- Nav item base -->
    <Style Selector="Button.navItem">
      <Setter Property="HorizontalAlignment" Value="Stretch" />
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="Height" Value="40" />
      <Setter Property="Padding" Value="0" />
      <Setter Property="CornerRadius" Value="4" />
    </Style>
    <Style Selector="Button.navItem /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="Padding" Value="0" />
    </Style>
    <Style Selector="Button.navItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#1AFFFFFF" />
    </Style>
    <Style Selector="Button.navItem:pressed /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#2AFFFFFF" />
    </Style>

    <!-- navPill: hidden by default, visible only on selected item -->
    <Style Selector="Button.navItem Border.navPill">
      <Setter Property="IsVisible" Value="False" />
    </Style>
    <Style Selector="Button.navItemSelected Border.navPill">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <!-- SearchBox: fully transparent, suppress all themed states -->
    <Style Selector="TextBox#SearchBox">
      <Setter Property="MinHeight" Value="0" />
      <Setter Property="CaretBrush" Value="{StaticResource NavAccent}" />
      <Setter Property="SelectionBrush" Value="#4060CDFF" />
    </Style>
    <Style Selector="TextBox#SearchBox /template/ Border#PART_BorderElement">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="MinHeight" Value="0" />
    </Style>
    <Style Selector="TextBox#SearchBox:pointerover /template/ Border#PART_BorderElement">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
    </Style>
    <Style Selector="TextBox#SearchBox:focus-within /template/ Border#PART_BorderElement">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderBrush" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
    </Style>
    <Style Selector="TextBox#SearchBox:error /template/ Border#PART_BorderElement">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
    </Style>

    <!-- Nav item selected state -->
    <Style Selector="Button.navItemSelected /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#0FFFFFFF" />
    </Style>
    <Style Selector="Button.navItemSelected:pointerover /template/ ContentPresenter#PART_ContentPresenter">
      <Setter Property="Background" Value="#1AFFFFFF" />
    </Style>

  </UserControl.Styles>

</UserControl>