Implement HamburgerMenu control to be used in repo samples

Avalonia.sln

@@ -234,7 +234,9 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Avalonia.Web.Blazor", "src\
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ControlCatalog.Web", "samples\ControlCatalog.Web\ControlCatalog.Web.csproj", "{C08E9894-AA92-426E-BF56-033E262CAD3E}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WindowsInteropTest", "samples\interop\WindowsInteropTest\WindowsInteropTest.csproj", "{26A98DA1-D89D-4A95-8152-349F404DA2E2}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WindowsInteropTest", "samples\interop\WindowsInteropTest\WindowsInteropTest.csproj", "{26A98DA1-D89D-4A95-8152-349F404DA2E2}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ControlSamples", "samples\SampleControls\ControlSamples.csproj", "{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}"
 EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
@@ -2170,6 +2172,30 @@ Global
 		{26A98DA1-D89D-4A95-8152-349F404DA2E2}.Release|iPhone.Build.0 = Release|Any CPU
 		{26A98DA1-D89D-4A95-8152-349F404DA2E2}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
 		{26A98DA1-D89D-4A95-8152-349F404DA2E2}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|Any CPU.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|Any CPU.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|iPhone.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|iPhone.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Ad-Hoc|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|Any CPU.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|Any CPU.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|iPhone.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|iPhone.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.AppStore|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|iPhone.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|iPhone.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|iPhone.ActiveCfg = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|iPhone.Build.0 = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -2233,6 +2259,7 @@ Global
 		{25831348-EB2A-483E-9576-E8F6528674A5} = {86A3F706-DC3C-43C6-BE1B-B98F5BAAA268}
 		{C08E9894-AA92-426E-BF56-033E262CAD3E} = {9B9E3891-2366-4253-A952-D08BCEB71098}
 		{26A98DA1-D89D-4A95-8152-349F404DA2E2} = {A0CC0258-D18C-4AB3-854F-7101680FC3F9}
+		{A0D0A6A4-5C72-4ADA-9B27-621C7D94F270} = {9B9E3891-2366-4253-A952-D08BCEB71098}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {87366D66-1391-4D90-8999-95A620AD786A}

samples/ControlCatalog/App.xaml

@@ -28,7 +28,7 @@
     <Style Selector="Label.h3">
       <Setter Property="FontSize" Value="12" />
     </Style>
-    <StyleInclude Source="/SideBar.xaml" />
+    <StyleInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
   </Application.Styles>
   <TrayIcon.Icons>
     <TrayIcons>

samples/ControlCatalog/ControlCatalog.csproj

@@ -26,6 +26,7 @@
     <ProjectReference Include="..\..\src\Avalonia.Diagnostics\Avalonia.Diagnostics.csproj" />
     <ProjectReference Include="..\..\src\Avalonia.Controls.DataGrid\Avalonia.Controls.DataGrid.csproj" />
     <ProjectReference Include="..\MiniMvvm\MiniMvvm.csproj" />
+    <ProjectReference Include="..\SampleControls\ControlSamples.csproj" />
   </ItemGroup>
 
   <Import Project="..\..\build\BuildTargets.targets" />

samples/ControlCatalog/MainView.xaml

@@ -1,108 +1,190 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-        xmlns:pages="clr-namespace:ControlCatalog.Pages"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:Class="ControlCatalog.MainView">
+<UserControl x:Class="ControlCatalog.MainView"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:ControlSamples;assembly=ControlSamples"
+             xmlns:pages="clr-namespace:ControlCatalog.Pages">
   <Grid>
     <Grid.Styles>
-        <Style Selector="TextBlock.h2">
-            <Setter Property="TextWrapping" Value="Wrap"/>
-            <Setter Property="MaxWidth" Value="400"/>
-            <Setter Property="HorizontalAlignment" Value="Left"/>
-        </Style>
-    </Grid.Styles>  
-    <TabControl Classes="sidebar" Name="Sidebar">
-      <TabItem Header="Acrylic"><pages:AcrylicPage/></TabItem>
-      <TabItem Header="AutoCompleteBox"><pages:AutoCompleteBoxPage/></TabItem>
-      <TabItem Header="Border"><pages:BorderPage/></TabItem>
-      <TabItem Header="Button"><pages:ButtonPage/></TabItem>
-      <TabItem Header="ButtonSpinner"><pages:ButtonSpinnerPage/></TabItem>
-      <TabItem Header="Calendar"><pages:CalendarPage/></TabItem>
-      <TabItem Header="Canvas"><pages:CanvasPage/></TabItem>
-      <TabItem Header="Carousel"><pages:CarouselPage/></TabItem>
-      <TabItem Header="CheckBox"><pages:CheckBoxPage/></TabItem>
-      <TabItem Header="ComboBox"><pages:ComboBoxPage/></TabItem>
+      <Style Selector="TextBlock.h2">
+        <Setter Property="TextWrapping" Value="Wrap" />
+        <Setter Property="MaxWidth" Value="400" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+      </Style>
+    </Grid.Styles>
+    <controls:HamburgerMenu Name="Sidebar">
+      <TabItem Header="Acrylic">
+        <pages:AcrylicPage />
+      </TabItem>
+      <TabItem Header="AutoCompleteBox">
+        <pages:AutoCompleteBoxPage />
+      </TabItem>
+      <TabItem Header="Border">
+        <pages:BorderPage />
+      </TabItem>
+      <TabItem Header="Button">
+        <pages:ButtonPage />
+      </TabItem>
+      <TabItem Header="ButtonSpinner">
+        <pages:ButtonSpinnerPage />
+      </TabItem>
+      <TabItem Header="Calendar">
+        <pages:CalendarPage />
+      </TabItem>
+      <TabItem Header="Canvas">
+        <pages:CanvasPage />
+      </TabItem>
+      <TabItem Header="Carousel">
+        <pages:CarouselPage />
+      </TabItem>
+      <TabItem Header="CheckBox">
+        <pages:CheckBoxPage />
+      </TabItem>
+      <TabItem Header="ComboBox">
+        <pages:ComboBoxPage />
+      </TabItem>
       <TabItem Header="ContextFlyout">
-        <pages:ContextFlyoutPage/>
+        <pages:ContextFlyoutPage />
       </TabItem>
-      <TabItem Header="ContextMenu"><pages:ContextMenuPage/></TabItem>
-      <TabItem Header="Cursor"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CursorPage/>
+      <TabItem Header="ContextMenu">
+        <pages:ContextMenuPage />
       </TabItem>
-      <TabItem Header="DataGrid" 
-               ScrollViewer.VerticalScrollBarVisibility="Disabled"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled">
-          <pages:DataGridPage/>
+      <TabItem Header="Cursor" ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <pages:CursorPage />
+      </TabItem>
+      <TabItem Header="DataGrid"
+               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <pages:DataGridPage />
       </TabItem>
       <TabItem Header="Date/Time Picker">
-        <pages:DateTimePickerPage/>
+        <pages:DateTimePickerPage />
       </TabItem>
       <TabItem Header="CalendarDatePicker">
-        <pages:CalendarDatePickerPage/></TabItem>
-      <TabItem Header="Drag+Drop"><pages:DragAndDropPage/></TabItem>
-      <TabItem Header="Expander"><pages:ExpanderPage/></TabItem>
+        <pages:CalendarDatePickerPage />
+      </TabItem>
+      <TabItem Header="Drag+Drop">
+        <pages:DragAndDropPage />
+      </TabItem>
+      <TabItem Header="Expander">
+        <pages:ExpanderPage />
+      </TabItem>
       <TabItem Header="Flyouts">
         <pages:FlyoutsPage />
       </TabItem>
       <TabItem Header="Image"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled">
-        <pages:ImagePage/>
+               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <pages:ImagePage />
       </TabItem>
       <TabItem Header="ItemsRepeater"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled">
-        <pages:ItemsRepeaterPage/>
-      </TabItem>
-      <TabItem Header="Label"><pages:LabelsPage/></TabItem>
-      <TabItem Header="LayoutTransformControl"><pages:LayoutTransformControlPage/></TabItem>
-      <TabItem Header="ListBox"
+               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:ListBoxPage/>
-      </TabItem>
-      <TabItem Header="Menu"><pages:MenuPage/></TabItem>
-      <TabItem Header="Notifications"><pages:NotificationsPage/></TabItem>
-	    <TabItem Header="NumericUpDown"><pages:NumericUpDownPage/></TabItem>
-      <TabItem Header="OpenGL"><pages:OpenGlPage/></TabItem>
-      <TabItem Header="Pointers (Touch)"><pages:PointersPage/></TabItem>
-      <TabItem Header="ProgressBar"><pages:ProgressBarPage/></TabItem>
-      <TabItem Header="RadioButton"><pages:RadioButtonPage/></TabItem>
-      <TabItem Header="RelativePanel"><pages:RelativePanelPage/></TabItem>
-      <TabItem Header="ScrollViewer"><pages:ScrollViewerPage/></TabItem>
-      <TabItem Header="Slider"><pages:SliderPage/></TabItem>
-      <TabItem Header="SplitView"><pages:SplitViewPage/></TabItem>
-      <TabItem Header="TabControl"><pages:TabControlPage/></TabItem>
-      <TabItem Header="TabStrip"><pages:TabStripPage/></TabItem>
-      <TabItem Header="TextBox"><pages:TextBoxPage/></TabItem>
-      <TabItem Header="TextBlock"><pages:TextBlockPage/></TabItem>
-      <TabItem Header="ToggleSwitch"><pages:ToggleSwitchPage/></TabItem>
-      <TabItem Header="ToolTip"><pages:ToolTipPage/></TabItem>
-      <TabItem Header="TreeView"><pages:TreeViewPage/></TabItem>
-      <TabItem Header="Viewbox"><pages:ViewboxPage/></TabItem>
-      <TabItem Header="Window Customizations"><pages:WindowCustomizationsPage/></TabItem>
-      <TabControl.Tag>
-        <StackPanel Width="115" Spacing="4" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="8">
-          <ComboBox x:Name="Decorations" SelectedIndex="0">
-            <ComboBoxItem>No Decorations</ComboBoxItem>
-            <ComboBoxItem>Border Only</ComboBoxItem>
-            <ComboBoxItem>Full Decorations</ComboBoxItem>
-          </ComboBox>
-          <ComboBox x:Name="Themes" SelectedIndex="0">
-            <ComboBoxItem>Fluent - Light</ComboBoxItem>
-            <ComboBoxItem>Fluent - Dark</ComboBoxItem>
-            <ComboBoxItem>Simple - Light</ComboBoxItem>
-            <ComboBoxItem>Simple - Dark</ComboBoxItem>
-          </ComboBox>
-          <ComboBox x:Name="TransparencyLevels" SelectedIndex="{Binding TransparencyLevel}">
-            <ComboBoxItem>None</ComboBoxItem>
-            <ComboBoxItem>Transparent</ComboBoxItem>
-            <ComboBoxItem>Blur</ComboBoxItem>
-            <ComboBoxItem>AcrylicBlur</ComboBoxItem>
-            <ComboBoxItem>Mica</ComboBoxItem>
-          </ComboBox>
-          <ComboBox Items="{Binding WindowStates}" SelectedItem="{Binding WindowState}" />
-        </StackPanel>
-      </TabControl.Tag>
-    </TabControl>
+        <pages:ItemsRepeaterPage />
+      </TabItem>
+      <TabItem Header="Label">
+        <pages:LabelsPage />
+      </TabItem>
+      <TabItem Header="LayoutTransformControl">
+        <pages:LayoutTransformControlPage />
+      </TabItem>
+      <TabItem Header="ListBox" ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <pages:ListBoxPage />
+      </TabItem>
+      <TabItem Header="Menu">
+        <pages:MenuPage />
+      </TabItem>
+      <TabItem Header="Notifications">
+        <pages:NotificationsPage />
+      </TabItem>
+      <TabItem Header="NumericUpDown">
+        <pages:NumericUpDownPage />
+      </TabItem>
+      <TabItem Header="OpenGL">
+        <pages:OpenGlPage />
+      </TabItem>
+      <TabItem Header="Pointers (Touch)">
+        <pages:PointersPage />
+      </TabItem>
+      <TabItem Header="ProgressBar">
+        <pages:ProgressBarPage />
+      </TabItem>
+      <TabItem Header="RadioButton">
+        <pages:RadioButtonPage />
+      </TabItem>
+      <TabItem Header="RelativePanel">
+        <pages:RelativePanelPage />
+      </TabItem>
+      <TabItem Header="ScrollViewer">
+        <pages:ScrollViewerPage />
+      </TabItem>
+      <TabItem Header="Slider">
+        <pages:SliderPage />
+      </TabItem>
+      <TabItem Header="SplitView">
+        <pages:SplitViewPage />
+      </TabItem>
+      <TabItem Header="TabControl">
+        <pages:TabControlPage />
+      </TabItem>
+      <TabItem Header="TabStrip">
+        <pages:TabStripPage />
+      </TabItem>
+      <TabItem Header="TextBox">
+        <pages:TextBoxPage />
+      </TabItem>
+      <TabItem Header="TextBlock">
+        <pages:TextBlockPage />
+      </TabItem>
+      <TabItem Header="ToggleSwitch">
+        <pages:ToggleSwitchPage />
+      </TabItem>
+      <TabItem Header="ToolTip">
+        <pages:ToolTipPage />
+      </TabItem>
+      <TabItem Header="TreeView">
+        <pages:TreeViewPage />
+      </TabItem>
+      <TabItem Header="Viewbox">
+        <pages:ViewboxPage />
+      </TabItem>
+      <TabItem Header="Window Customizations">
+        <pages:WindowCustomizationsPage />
+      </TabItem>
+      <FlyoutBase.AttachedFlyout>
+        <Flyout>
+          <StackPanel Width="152" Spacing="8">
+            <ComboBox x:Name="Decorations"
+                      HorizontalAlignment="Stretch"
+                      SelectedIndex="0">
+              <ComboBoxItem>No Decorations</ComboBoxItem>
+              <ComboBoxItem>Border Only</ComboBoxItem>
+              <ComboBoxItem>Full Decorations</ComboBoxItem>
+            </ComboBox>
+            <ComboBox x:Name="Themes"
+                      HorizontalAlignment="Stretch"
+                      SelectedIndex="0">
+              <ComboBoxItem>Fluent - Light</ComboBoxItem>
+              <ComboBoxItem>Fluent - Dark</ComboBoxItem>
+              <ComboBoxItem>Simple - Light</ComboBoxItem>
+              <ComboBoxItem>Simple - Dark</ComboBoxItem>
+            </ComboBox>
+            <ComboBox x:Name="TransparencyLevels"
+                      HorizontalAlignment="Stretch"
+                      SelectedIndex="{Binding TransparencyLevel}">
+              <ComboBox.Items>
+                <WindowTransparencyLevel>None</WindowTransparencyLevel>
+                <WindowTransparencyLevel>Transparent</WindowTransparencyLevel>
+                <WindowTransparencyLevel>Blur</WindowTransparencyLevel>
+                <WindowTransparencyLevel>AcrylicBlur</WindowTransparencyLevel>
+                <WindowTransparencyLevel>Mica</WindowTransparencyLevel>
+              </ComboBox.Items>
+            </ComboBox>
+            <ComboBox HorizontalAlignment="Stretch"
+                      Items="{Binding WindowStates}"
+                      SelectedItem="{Binding WindowState}" />
+          </StackPanel>
+        </Flyout>
+      </FlyoutBase.AttachedFlyout>
+    </controls:HamburgerMenu>
   </Grid>
 </UserControl>

samples/ControlCatalog/MainView.xaml.cs

@@ -6,6 +6,8 @@ using Avalonia.Markup.Xaml;
 using Avalonia.Markup.Xaml.MarkupExtensions;
 using Avalonia.Markup.Xaml.Styling;
 using Avalonia.Markup.Xaml.XamlIl;
+using Avalonia.Media;
+using Avalonia.Media.Immutable;
 using Avalonia.Platform;
 using ControlCatalog.Pages;
 
@@ -16,9 +18,12 @@ namespace ControlCatalog
         public MainView()
         {
             AvaloniaXamlLoader.Load(this);
+
+            var sideBar = this.FindControl<TabControl>("Sidebar");
+
             if (AvaloniaLocator.Current.GetService<IRuntimePlatform>().GetRuntimeInfo().IsDesktop)
             {
-                IList tabItems = ((IList)this.FindControl<TabControl>("Sidebar").Items);
+                IList tabItems = ((IList)sideBar.Items);
                 tabItems.Add(new TabItem()
                 {
                     Header = "Dialogs",
@@ -58,6 +63,21 @@ namespace ControlCatalog
                 if (VisualRoot is Window window)
                     window.SystemDecorations = (SystemDecorations)decorations.SelectedIndex;
             };
+
+            var transparencyLevels = this.Find<ComboBox>("TransparencyLevels");
+            IDisposable backgroundSetter = null, paneBackgroundSetter = null;
+            transparencyLevels.SelectionChanged += (sender, e) =>
+            {
+                backgroundSetter?.Dispose();
+                paneBackgroundSetter?.Dispose();
+                if (transparencyLevels.SelectedItem is WindowTransparencyLevel selected
+                    && selected != WindowTransparencyLevel.None)
+                {
+                    var semiTransparentBrush = new ImmutableSolidColorBrush(Colors.Gray, 0.5);
+                    backgroundSetter = sideBar.SetValue(BackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style);
+                    paneBackgroundSetter = sideBar.SetValue(SplitView.PaneBackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style);
+                }
+            };
         }
 
         protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)

samples/ControlCatalog/MainWindow.xaml

@@ -61,17 +61,7 @@
   </Window.DataTemplates>
   <Panel>
     <Panel Margin="{Binding #MainWindow.OffScreenMargin}">
-      <DockPanel LastChildFill="True" Margin="{Binding #MainWindow.WindowDecorationMargin}">
-        <Menu Name="MainMenu" DockPanel.Dock="Top">
-          <MenuItem Header="_File">
-            <MenuItem Header="E_xit" Command="{Binding ExitCommand}" />
-          </MenuItem>
-          <MenuItem Header="_Help">
-            <MenuItem Header="_About" Command="{Binding AboutCommand}" />
-          </MenuItem>
-        </Menu>
-        <local:MainView />
-      </DockPanel>
+      <local:MainView Margin="{Binding #MainWindow.WindowDecorationMargin}" />
     </Panel>
     <Border IsVisible="{Binding ExtendClientAreaEnabled}" BorderThickness="1 1 1 0" CornerRadius="4 4 0 0" BorderBrush="#55000000" Height="22" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="250 8 0 0">
       <Border.Background>

samples/ControlCatalog/MainWindow.xaml.cs

@@ -33,9 +33,6 @@ namespace ControlCatalog
             DataContext = new MainWindowViewModel(_notificationArea);
             _recentMenu = ((NativeMenu.GetMenu(this).Items[0] as NativeMenuItem).Menu.Items[2] as NativeMenuItem).Menu;
 
-            var mainMenu = this.FindControl<Menu>("MainMenu");
-            mainMenu.AttachedToVisualTree += MenuAttached;
-
             ExtendClientAreaChromeHints = Avalonia.Platform.ExtendClientAreaChromeHints.OSXThickTitleBar;
         }
 
@@ -45,14 +42,6 @@ namespace ControlCatalog
             new KeyGesture(Key.Q, KeyModifiers.Meta) :
             new KeyGesture(Key.F4, KeyModifiers.Alt);
 
-        public void MenuAttached(object sender, VisualTreeAttachmentEventArgs e)
-        {
-            if (NativeMenu.GetIsNativeMenuExported(this) && sender is Menu mainMenu)
-            {
-                mainMenu.IsVisible = false;
-            }
-        }
-
         public void OnOpenClicked(object sender, EventArgs args)
         {
             _recentMenu.Items.Insert(0, new NativeMenuItem("Item " + (_recentMenu.Items.Count + 1)));
@@ -65,21 +54,6 @@ namespace ControlCatalog
 
         private void InitializeComponent()
         {
-            // TODO: iOS does not support dynamically loading assemblies
-            // so we must refer to this resource DLL statically. For
-            // now I am doing that here. But we need a better solution!!
-            // Note, theme swiching probably will not work in runtime for iOS.
-            if (Application.Current.Styles.Contains(App.FluentDark)
-                || Application.Current.Styles.Contains(App.FluentLight))
-            {
-                var theme = new Avalonia.Themes.Fluent.Controls.FluentControls();
-                theme.TryGetResource("Button", out _);
-            }
-            else
-            {
-                var theme = new Avalonia.Themes.Default.DefaultTheme();
-                theme.TryGetResource("Button", out _);
-            }
             AvaloniaXamlLoader.Load(this);
         }
     }

samples/ControlCatalog/SideBar.xaml

@@ -1,84 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
->
-    <Design.PreviewWith>
-        <Border Padding="20">
-            <TabControl Classes="sidebar">
-                <TabItem Header="Item1"/>
-                <TabItem Header="Item2"/>
-            </TabControl> 
-        </Border>
-    </Design.PreviewWith>
-    <Style Selector="TabControl.sidebar">
-        <Setter Property="TabStripPlacement" Value="Left"/>
-        <Setter Property="Padding" Value="8 0 0 0"/>
-        <Setter Property="Background" Value="{DynamicResource SystemAccentColor}"/>
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Border 
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}">
-                    <DockPanel>
-                        <ScrollViewer
-                            Name="PART_ScrollViewer"
-                            HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                            VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
-                            Background="{TemplateBinding Background}"
-                            DockPanel.Dock="Left">
-                            <ItemsPresenter
-                                Name="PART_ItemsPresenter"                          
-                                Items="{TemplateBinding Items}"
-                                ItemsPanel="{TemplateBinding ItemsPanel}"
-                                ItemTemplate="{TemplateBinding ItemTemplate}">
-                            </ItemsPresenter>
-                        </ScrollViewer>
-                        <ContentControl Content="{TemplateBinding Tag}" HorizontalContentAlignment="Right" DockPanel.Dock="Bottom"/>
-                        <ScrollViewer
-                            HorizontalScrollBarVisibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.(ScrollViewer.HorizontalScrollBarVisibility)}"
-                            VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.(ScrollViewer.VerticalScrollBarVisibility)}">
-                            <ContentPresenter
-                                    Name="PART_SelectedContentHost"
-                                    Margin="{TemplateBinding Padding}"                           
-                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Content="{TemplateBinding SelectedContent}"
-                                    ContentTemplate="{TemplateBinding SelectedContentTemplate}">
-                            </ContentPresenter>
-                        </ScrollViewer>
-                    </DockPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-    </Style>
-
-    <Style Selector="TabControl.sidebar > TabItem">       
-        <Setter Property="BorderThickness" Value="0"/>
-        <Setter Property="Foreground" Value="White"/>
-        <Setter Property="FontSize" Value="14"/>
-        <Setter Property="Margin" Value="0"/>
-        <Setter Property="Padding" Value="16"/>
-        <Setter Property="Opacity" Value="0.5"/>
-        <Setter Property="Transitions">
-            <Transitions>
-                <DoubleTransition Property="Opacity" Duration="0:0:0.150"/>
-            </Transitions>
-        </Setter>
-        <Setter Property="(ScrollViewer.HorizontalScrollBarVisibility)" Value="Auto"/>
-        <Setter Property="(ScrollViewer.VerticalScrollBarVisibility)" Value="Auto"/>
-    </Style>
-    <Style Selector="TabControl.sidebar > TabItem:selected /template/ Border#PART_SelectedPipe">
-        <Setter Property="IsVisible" Value="False" />
-    </Style>
-    <Style Selector="TabControl.sidebar > TabItem:pointerover">
-        <Setter Property="Opacity" Value="1"/>
-    </Style>
-    <Style Selector="TabControl.sidebar > TabItem:pointerover">
-        <Setter Property="Background" Value="{DynamicResource SystemAccentColorLight2}"/>
-    </Style>
-    <Style Selector="TabControl.sidebar > TabItem:selected">
-        <Setter Property="Opacity" Value="1"/>
-    </Style>
-    <Style Selector="TabControl.sidebar > TabItem:selected">
-        <Setter Property="Background" Value="{DynamicResource SystemAccentColorLight1}"/>
-    </Style>
-</Styles>

samples/RenderDemo/App.xaml

@@ -1,9 +1,8 @@
-<Application
-    xmlns="https://github.com/avaloniaui" 
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:Class="RenderDemo.App">
-    <Application.Styles>
-        <FluentTheme/>
-        <StyleInclude Source="avares://RenderDemo/SideBar.xaml"/>
-    </Application.Styles>
+<Application x:Class="RenderDemo.App"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Application.Styles>
+    <FluentTheme />
+    <StyleInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
+  </Application.Styles>
 </Application>

samples/RenderDemo/MainWindow.xaml

@@ -1,68 +1,67 @@
-<Window xmlns="https://github.com/avaloniaui"
+<Window x:Class="RenderDemo.MainWindow"
+        xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:Class="RenderDemo.MainWindow"
-        Title="AvaloniaUI Rendering Test"
+        xmlns:controls="clr-namespace:ControlSamples;assembly=ControlSamples"
         xmlns:pages="clr-namespace:RenderDemo.Pages"
+        Title="AvaloniaUI Rendering Test"
         Width="{Binding Width, Mode=TwoWay}"
         Height="{Binding Height, Mode=TwoWay}">
-  <DockPanel>
-    <Menu DockPanel.Dock="Top">
-      <MenuItem Header="Rendering">
-        <MenuItem Header="Draw Dirty Rects" Command="{Binding ToggleDrawDirtyRects}">
-          <MenuItem.Icon>
-            <CheckBox BorderThickness="0"
-                      IsHitTestVisible="False"
-                      IsChecked="{Binding DrawDirtyRects}"/>
-          </MenuItem.Icon>
+  <controls:HamburgerMenu ExpandedModeThresholdWidth="760">
+    <FlyoutBase.AttachedFlyout>
+      <MenuFlyout>
+        <MenuItem Header="Rendering">
+          <MenuItem Command="{Binding ToggleDrawDirtyRects}" Header="Draw Dirty Rects">
+            <MenuItem.Icon>
+              <CheckBox BorderThickness="0"
+                        IsChecked="{Binding DrawDirtyRects}"
+                        IsHitTestVisible="False" />
+            </MenuItem.Icon>
+          </MenuItem>
+          <MenuItem Command="{Binding ToggleDrawFps}" Header="Draw FPS">
+            <MenuItem.Icon>
+              <CheckBox BorderThickness="0"
+                        IsChecked="{Binding DrawFps}"
+                        IsHitTestVisible="False" />
+            </MenuItem.Icon>
+          </MenuItem>
         </MenuItem>
-        <MenuItem Header="Draw FPS"
-                  Command="{Binding ToggleDrawFps}">
-          <MenuItem.Icon>
-            <CheckBox BorderThickness="0"
-                      IsHitTestVisible="False"
-                      IsChecked="{Binding DrawFps}"/>
-          </MenuItem.Icon>
+        <MenuItem Header="Tests">
+          <MenuItem Command="{Binding ResizeWindow}" Header="Resize window" />
         </MenuItem>
-      </MenuItem>
-      <MenuItem Header="Tests">
-        <MenuItem Header="Resize window"
-                  Command="{Binding ResizeWindow}"/>
-      </MenuItem>
-    </Menu>
-    <TabControl Classes="sidebar">
-      <TabItem Header="Animations">
-        <pages:AnimationsPage/>
-      </TabItem>
-      <TabItem Header="Transitions">
-        <pages:TransitionsPage/>
-      </TabItem>
-      <TabItem Header="Custom Animator">
-        <pages:CustomAnimatorPage/>
-      </TabItem>
-      <TabItem Header="Clipping">
-        <pages:ClippingPage/>
-      </TabItem>
-      <TabItem Header="Drawing">
-        <pages:DrawingPage/>
-      </TabItem>
-      <TabItem Header="SkCanvas">
-        <pages:CustomSkiaPage/>
-      </TabItem>
-      <TabItem Header="RenderTargetBitmap">
-        <pages:RenderTargetBitmapPage/>
-      </TabItem>
-      <TabItem Header="WriteableBitmap">
-        <pages:WriteableBitmapPage/>
-      </TabItem>
-      <TabItem Header="GlyphRun">
-        <pages:GlyphRunPage/>
-      </TabItem>
-      <TabItem Header="LineBounds">
-        <pages:LineBoundsPage />
-      </TabItem>
-      <TabItem Header="Path Measurement">
-        <pages:PathMeasurementPage />
-      </TabItem>
-    </TabControl>
-  </DockPanel>
+      </MenuFlyout>
+    </FlyoutBase.AttachedFlyout>
+    <TabItem Header="Animations">
+      <pages:AnimationsPage />
+    </TabItem>
+    <TabItem Header="Transitions">
+      <pages:TransitionsPage />
+    </TabItem>
+    <TabItem Header="Custom Animator">
+      <pages:CustomAnimatorPage />
+    </TabItem>
+    <TabItem Header="Clipping">
+      <pages:ClippingPage />
+    </TabItem>
+    <TabItem Header="Drawing">
+      <pages:DrawingPage />
+    </TabItem>
+    <TabItem Header="SkCanvas">
+      <pages:CustomSkiaPage />
+    </TabItem>
+    <TabItem Header="RenderTargetBitmap">
+      <pages:RenderTargetBitmapPage />
+    </TabItem>
+    <TabItem Header="WriteableBitmap">
+      <pages:WriteableBitmapPage />
+    </TabItem>
+    <TabItem Header="GlyphRun">
+      <pages:GlyphRunPage />
+    </TabItem>
+    <TabItem Header="LineBounds">
+      <pages:LineBoundsPage />
+    </TabItem>
+    <TabItem Header="Path Measurement">
+      <pages:PathMeasurementPage />
+    </TabItem>
+  </controls:HamburgerMenu>
 </Window>

samples/RenderDemo/RenderDemo.csproj

@@ -10,6 +10,7 @@
     <ProjectReference Include="..\..\src\Avalonia.Diagnostics\Avalonia.Diagnostics.csproj" />
     <ProjectReference Include="..\..\src\Linux\Avalonia.LinuxFramebuffer\Avalonia.LinuxFramebuffer.csproj" />
     <ProjectReference Include="..\MiniMvvm\MiniMvvm.csproj" />
+    <ProjectReference Include="..\SampleControls\ControlSamples.csproj" />
   </ItemGroup>
   <Import Project="..\..\build\SampleApp.props" />
   <Import Project="..\..\build\EmbedXaml.props" />

samples/RenderDemo/SideBar.xaml

@@ -1,67 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-  <Style Selector="TabControl.sidebar">
-    <Setter Property="TabStripPlacement" Value="Left"/>
-    <Setter Property="Padding" Value="8 0 0 0"/>
-    <Setter Property="Background" Value="{DynamicResource SystemAccentColor}"/>
-    <Setter Property="Template">
-      <ControlTemplate>
-        <Border
-            BorderBrush="{TemplateBinding BorderBrush}"
-            BorderThickness="{TemplateBinding BorderThickness}">
-          <DockPanel>
-            <ScrollViewer
-                Name="PART_ScrollViewer"
-                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
-                Background="{TemplateBinding Background}">
-              <ItemsPresenter
-                  Name="PART_ItemsPresenter"
-                  Items="{TemplateBinding Items}"
-                  ItemsPanel="{TemplateBinding ItemsPanel}"
-                  ItemTemplate="{TemplateBinding ItemTemplate}">
-              </ItemsPresenter>
-            </ScrollViewer>
-            <ContentPresenter
-                Name="PART_SelectedContentHost"
-                Margin="{TemplateBinding Padding}"
-                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                Content="{TemplateBinding SelectedContent}"
-                ContentTemplate="{TemplateBinding SelectedContentTemplate}">
-            </ContentPresenter>
-          </DockPanel>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
-
-  <Style Selector="TabControl.sidebar > TabItem">
-    <Setter Property="BorderThickness" Value="0"/>
-    <Setter Property="Foreground" Value="White"/>
-    <Setter Property="FontSize" Value="14"/>
-    <Setter Property="Margin" Value="0"/>
-    <Setter Property="Padding" Value="16"/>
-    <Setter Property="Opacity" Value="0.5"/>
-    <Setter Property="Transitions">
-      <Transitions>
-        <DoubleTransition Property="Opacity" Duration="0:0:0.150"/>
-      </Transitions>
-    </Setter>
-  </Style>
-  <Style Selector="TabControl.sidebar > TabItem:selected /template/ Border#PART_SelectedPipe">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="TabControl.sidebar > TabItem:pointerover">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-  <Style Selector="TabControl.sidebar > TabItem:pointerover /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentColorLight2}"/>
-  </Style>
-  <Style Selector="TabControl.sidebar > TabItem:selected">
-    <Setter Property="Opacity" Value="1"/>
-  </Style>
-  <Style Selector="TabControl.sidebar > TabItem:selected /template/ Border#PART_LayoutRoot">
-    <Setter Property="Background" Value="{DynamicResource SystemAccentColorLight1}"/>
-  </Style>
-</Styles>

samples/SampleControls/ControlSamples.csproj

@@ -0,0 +1,23 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Update="**\*.xaml.cs">
+      <DependentUpon>%(Filename)</DependentUpon>
+    </Compile>
+    <AvaloniaResource Include="**\*.xaml">
+      <SubType>Designer</SubType>
+    </AvaloniaResource>
+  </ItemGroup>
+  
+  <ItemGroup>
+    <ProjectReference Include="..\..\packages\Avalonia\Avalonia.csproj" />
+  </ItemGroup>
+  
+  <Import Project="..\..\build\BuildTargets.targets" />
+
+</Project>

samples/SampleControls/HamburgerMenu/HamburgerMenu.cs

@@ -0,0 +1,77 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Media;
+
+namespace ControlSamples
+{
+    public class HamburgerMenu : TabControl
+    {
+        private SplitView? _splitView;
+
+        public static readonly StyledProperty<IBrush?> PaneBackgroundProperty =
+            SplitView.PaneBackgroundProperty.AddOwner<HamburgerMenu>();
+
+        public IBrush? PaneBackground
+        {
+            get => GetValue(PaneBackgroundProperty);
+            set => SetValue(PaneBackgroundProperty, value);
+        }
+
+        public static readonly StyledProperty<IBrush?> ContentBackgroundProperty =
+            AvaloniaProperty.Register<HamburgerMenu, IBrush?>(nameof(ContentBackground));
+
+        public IBrush? ContentBackground
+        {
+            get => GetValue(ContentBackgroundProperty);
+            set => SetValue(ContentBackgroundProperty, value);
+        }
+
+        public static readonly StyledProperty<int> ExpandedModeThresholdWidthProperty =
+            AvaloniaProperty.Register<HamburgerMenu, int>(nameof(ExpandedModeThresholdWidth), 1008);
+
+        public int ExpandedModeThresholdWidth
+        {
+            get => GetValue(ExpandedModeThresholdWidthProperty);
+            set => SetValue(ExpandedModeThresholdWidthProperty, value);
+        }
+
+        protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+        {
+            base.OnApplyTemplate(e);
+
+            _splitView = e.NameScope.Find<SplitView>("PART_NavigationPane");
+        }
+
+        protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+        {
+            base.OnPropertyChanged(change);
+
+            if (change.Property == BoundsProperty && _splitView is not null)
+            {
+                var oldBounds = change.OldValue.GetValueOrDefault<Rect>();
+                var newBounds = change.NewValue.GetValueOrDefault<Rect>();
+                EnsureSplitViewMode(oldBounds, newBounds);
+            }
+        }
+
+        private void EnsureSplitViewMode(Rect oldBounds, Rect newBounds)
+        {
+            if (_splitView is not null)
+            {
+                var threshold = ExpandedModeThresholdWidth;
+
+                if (newBounds.Width >= threshold && oldBounds.Width < threshold)
+                {
+                    _splitView.DisplayMode = SplitViewDisplayMode.Inline;
+                    _splitView.IsPaneOpen = true;
+                }
+                else if (newBounds.Width < threshold && oldBounds.Width >= threshold)
+                {
+                    _splitView.DisplayMode = SplitViewDisplayMode.Overlay;
+                    _splitView.IsPaneOpen = false;
+                }
+            }
+        }
+    }
+}

samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml

@@ -0,0 +1,242 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:catalog="using:ControlSamples">
+  <Design.PreviewWith>
+    <Border Width="400"
+            Height="150">
+      <catalog:HamburgerMenu>
+        <FlyoutBase.AttachedFlyout>
+          <Flyout>
+            <TextBox Text="Hello World" />
+          </Flyout>
+        </FlyoutBase.AttachedFlyout>
+        <TabItem Header="Item1" IsSelected="True">
+          <UserControl>
+            <Border Height="400" Background="Green" />
+          </UserControl>
+        </TabItem>
+        <TabItem Header="Item2" />
+      </catalog:HamburgerMenu>
+    </Border>
+  </Design.PreviewWith>
+
+  <Styles.Resources>
+    <x:Double x:Key="PaneCompactWidth">40</x:Double>
+    <x:Double x:Key="PaneExpandWidth">200</x:Double>
+    <x:Double x:Key="HeaderHeight">36</x:Double>
+    <x:Double x:Key="NavigationItemHeight">36</x:Double>
+    <x:Double x:Key="HamburgerMenuButtonHeight">32</x:Double>
+    <Thickness x:Key="HeaderMarginCollapsedPane">12,0,0,0</Thickness>
+    <Thickness x:Key="HeaderMarginExpandedPane">52,0,0,0</Thickness>
+    <Thickness x:Key="HeaderMarginExpandedOverlayPane">212,0,0,0</Thickness>
+    <BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows>
+    <BoxShadows x:Key="NavigationContentShadow">0 0 1 1 #2000</BoxShadows>
+  </Styles.Resources>
+
+  <!--  HamburgerMenu  -->
+  <Style Selector="catalog|HamburgerMenu">
+    <Setter Property="Padding" Value="12 8 4 0" />
+    <Setter Property="PaneBackground" Value="{DynamicResource SystemChromeMediumColor}" />
+    <Setter Property="Background" Value="{DynamicResource SystemChromeMediumColor}" />
+    <Setter Property="ContentBackground" Value="{DynamicResource SystemAltHighColor}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel Background="{TemplateBinding PaneBackground}">
+          <SplitView x:Name="PART_NavigationPane"
+                     CompactPaneLength="{StaticResource PaneCompactWidth}"
+                     DisplayMode="Inline"
+                     IsPaneOpen="True"
+                     OpenPaneLength="{StaticResource PaneExpandWidth}">
+            <SplitView.Pane>
+              <Grid Margin="0,0,1,5" RowDefinitions="Auto, *, Auto">
+                <Panel Height="{StaticResource HeaderHeight}" />
+                <ScrollViewer x:Name="PART_ScrollViewer"
+                              Grid.Row="1"
+                              HorizontalAlignment="Stretch"
+                              HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                              VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                  <ItemsPresenter Name="PART_ItemsPresenter"
+                                  HorizontalAlignment="Stretch"
+                                  ItemTemplate="{TemplateBinding ItemTemplate}"
+                                  Items="{TemplateBinding Items}"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}">
+                    <ItemsPresenter.ItemsPanel>
+                      <ItemsPanelTemplate>
+                        <StackPanel x:Name="HamburgerItemsPanel"
+                                    Margin="0,2" Orientation="Vertical" />
+                      </ItemsPanelTemplate>
+                    </ItemsPresenter.ItemsPanel>
+                  </ItemsPresenter>
+                </ScrollViewer>
+                <Button x:Name="SettingsButton"
+                        Grid.Row="2"
+                        Classes="NavigationButton"
+                        Content="Settings"
+                        Flyout="{TemplateBinding (FlyoutBase.AttachedFlyout)}"
+                        IsVisible="{Binding $parent[TabControl].(FlyoutBase.AttachedFlyout), Converter={x:Static ObjectConverters.IsNotNull}}" />
+              </Grid>
+            </SplitView.Pane>
+            <SplitView.Content>
+              <DockPanel>
+                <Border Height="{StaticResource HeaderHeight}" DockPanel.Dock="Top">
+                  <TextBlock x:Name="HeaderHolder"
+                             VerticalAlignment="Center"
+                             Classes="h1"
+                             Text="{Binding $parent[TabControl].SelectedItem.Header, FallbackValue=''}">
+                    <TextBlock.Transitions>
+                      <Transitions>
+                        <ThicknessTransition Easing="{StaticResource SplitViewPaneAnimationEasing}"
+                                             Property="Margin"
+                                             Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                      </Transitions>
+                    </TextBlock.Transitions>
+                  </TextBlock>
+                </Border>
+                <Border x:Name="BackgroundBorder">
+                  <Border.Transitions>
+                    <Transitions>
+                      <CornerRadiusTransition Property="CornerRadius" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
+                    </Transitions>
+                  </Border.Transitions>
+                  <ScrollViewer x:Name="HamburgerContentScroller"
+                                HorizontalScrollBarVisibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.(ScrollViewer.HorizontalScrollBarVisibility)}"
+                                VerticalScrollBarVisibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.(ScrollViewer.VerticalScrollBarVisibility)}">
+                    <ContentPresenter Name="PART_SelectedContentHost"
+                                      Background="Transparent"
+                                      Padding="{TemplateBinding Padding}"
+                                      Content="{TemplateBinding SelectedContent}"
+                                      ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+                  </ScrollViewer>
+                </Border>
+              </DockPanel>
+            </SplitView.Content>
+          </SplitView>
+          <ToggleButton x:Name="HamburgerMenuButton"
+                        Width="{StaticResource PaneCompactWidth}"
+                        Height="{StaticResource HamburgerMenuButtonHeight}"
+                        Margin="4,2,0,0"
+                        Padding="0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Top"
+                        HorizontalContentAlignment="Center"
+                        Classes="NavigationButton"
+                        CornerRadius="4"
+                        IsChecked="{Binding #PART_NavigationPane.IsPaneOpen, Mode=TwoWay}">
+            <PathIcon Data="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6 18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z" Foreground="{TemplateBinding Foreground}" />
+          </ToggleButton>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView TextBlock#HeaderHolder">
+    <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedPane}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[IsPaneOpen=True] TextBlock#HeaderHolder">
+    <Setter Property="Margin" Value="{StaticResource HeaderMarginCollapsedPane}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay][IsPaneOpen=True] TextBlock#HeaderHolder">
+    <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedOverlayPane}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView">
+    <Setter Property="PaneBackground" Value="Transparent" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay]">
+    <Setter Property="PaneBackground" Value="{TemplateBinding PaneBackground}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Overlay]">
+    <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Inline] Border#BackgroundBorder">
+    <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+    <Setter Property="BoxShadow" Value="{StaticResource NavigationContentShadow}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu /template/ SplitView[DisplayMode=Inline][IsPaneOpen=True] Border#BackgroundBorder">
+    <Setter Property="CornerRadius" Value="8 0 0 0" />
+  </Style>
+
+
+  <!--  HamburgerMenu TabItem  -->
+  <Style Selector="catalog|HamburgerMenu > TabItem, :is(Button).NavigationButton">
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="FontWeight" Value="Normal" />
+    <Setter Property="MinHeight" Value="0" />
+    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="12,0,4,0" />
+    <Setter Property="Margin" Value="4,0,8,0" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="ClipToBounds" Value="False" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu > TabItem">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="PART_LayoutRoot"
+                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Panel>
+            <Border Name="PART_SelectedPipe"
+                    Width="{DynamicResource TabItemPipeThickness}"
+                    Height="{DynamicResource TabItemVerticalPipeHeight}"
+                    Margin="6,0,0,0"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Center"
+                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}" />
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Padding="{TemplateBinding Padding}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Content="{TemplateBinding Header}"
+                              ContentTemplate="{TemplateBinding HeaderTemplate}"
+                              TextBlock.FontFamily="{TemplateBinding FontFamily}"
+                              TextBlock.FontSize="{TemplateBinding FontSize}"
+                              TextBlock.FontWeight="{TemplateBinding FontWeight}" />
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector=":is(Button).NavigationButton">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          TextBlock.FontFamily="{TemplateBinding FontFamily}"
+                          TextBlock.FontSize="{TemplateBinding FontSize}"
+                          TextBlock.FontWeight="{TemplateBinding FontWeight}" />
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  <Style Selector="catalog|HamburgerMenu > TabItem /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton /template/ ContentPresenter">
+    <Setter Property="Border.Background" Value="Transparent" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource SystemBaseHighColor}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu > TabItem:pointerover /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton:pointerover /template/ ContentPresenter">
+    <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+    <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+  </Style>
+  <Style Selector="catalog|HamburgerMenu > TabItem:pressed /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton:pressed /template/ ContentPresenter">
+    <Setter Property="Border.Background" Value="{DynamicResource SystemChromeLowColor}" />
+    <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+    <Setter Property="TextBlock.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+  </Style>
+  <Style Selector=":is(Button).NavigationButton:pressed">
+    <Setter Property="RenderTransform" Value="none" />
+  </Style>
+</Styles>