From 671b7ea83e75a2b442a4ee0d5877c0e269dfbc48 Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Thu, 7 Jul 2022 11:50:33 +0200
Subject: [PATCH] WIP: HamburgerMenu.

---
 samples/ControlCatalog/App.xaml               |   8 +-
 .../HamburgerMenu/HamburgerMenu.xaml          | 260 +++++++++---------
 2 files changed, 139 insertions(+), 129 deletions(-)

diff --git a/samples/ControlCatalog/App.xaml b/samples/ControlCatalog/App.xaml
index d0e1bd885e..c7ad72d2c5 100644
--- a/samples/ControlCatalog/App.xaml
+++ b/samples/ControlCatalog/App.xaml
@@ -5,6 +5,13 @@
              x:CompileBindings="True"
              Name="Avalonia ControlCatalog"
              x:Class="ControlCatalog.App">
+  <Application.Resources>
+    <ResourceDictionary>
+      <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
+      </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+  </Application.Resources>
   <Application.Styles>
     <Style Selector="TextBlock.h1, TextBlock.h2, TextBlock.h3">
       <Setter Property="TextWrapping" Value="Wrap" />
@@ -29,7 +36,6 @@
     <Style Selector="Label.h3">
       <Setter Property="FontSize" Value="12" />
     </Style>
-    <StyleInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
   </Application.Styles>
   <TrayIcon.Icons>
     <TrayIcons>
diff --git a/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml b/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
index 1d58c465a0..5f8bfe4fb5 100644
--- a/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
+++ b/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
@@ -1,6 +1,6 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:catalog="using:ControlSamples">
+<ResourceDictionary 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">
@@ -20,21 +20,84 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <x:Double x:Key="PaneCompactWidth">40</x:Double>
-    <x:Double x:Key="PaneExpandWidth">220</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>
+  <x:Double x:Key="PaneCompactWidth">40</x:Double>
+  <x:Double x:Key="PaneExpandWidth">220</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>
 
+  <ControlTheme x:Key="NavigationButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
+    <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" />
+    <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}"
+                          TextElement.FontFamily="{TemplateBinding FontFamily}"
+                          TextElement.FontSize="{TemplateBinding FontSize}"
+                          TextElement.FontWeight="{TemplateBinding FontWeight}" />
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="HamburgerMenuTabItem" TargetType="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}"
+                              TextElement.FontFamily="{TemplateBinding FontFamily}"
+                              TextElement.FontSize="{TemplateBinding FontSize}"
+                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+  
   <!--  HamburgerMenu  -->
-  <Style Selector="catalog|HamburgerMenu">
+  <ControlTheme x:Key="{x:Type catalog:HamburgerMenu}" TargetType="catalog:HamburgerMenu">
     <Setter Property="Padding" Value="12 8 4 0" />
     <Setter Property="PaneBackground" Value="{DynamicResource SystemChromeMediumColor}" />
     <Setter Property="Background" Value="{DynamicResource SystemChromeMediumColor}" />
@@ -60,6 +123,11 @@
                                   ItemTemplate="{TemplateBinding ItemTemplate}"
                                   Items="{TemplateBinding Items}"
                                   ItemsPanel="{TemplateBinding ItemsPanel}">
+                    <ItemsPresenter.Styles>
+                      <Style Selector="catalog|HamburgerMenu > TabItem">
+                        <Setter Property="Theme" Value="{StaticResource HamburgerMenuTabItem}"/>
+                      </Style>
+                    </ItemsPresenter.Styles>
                     <ItemsPresenter.ItemsPanel>
                       <ItemsPanelTemplate>
                         <StackPanel x:Name="HamburgerItemsPanel"
@@ -70,7 +138,7 @@
                 </ScrollViewer>
                 <Button x:Name="SettingsButton"
                         Grid.Row="2"
-                        Classes="NavigationButton"
+                        Theme="{StaticResource NavigationButton}"
                         Content="Settings"
                         Flyout="{TemplateBinding (FlyoutBase.AttachedFlyout)}"
                         IsVisible="{Binding $parent[TabControl].(FlyoutBase.AttachedFlyout), Converter={x:Static ObjectConverters.IsNotNull}}" />
@@ -127,116 +195,52 @@
         </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>
+    <Style Selector="^ /template/ SplitView TextBlock#HeaderHolder">
+      <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedPane}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[IsPaneOpen=True] TextBlock#HeaderHolder">
+      <Setter Property="Margin" Value="{StaticResource HeaderMarginCollapsedPane}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay][IsPaneOpen=True] TextBlock#HeaderHolder">
+      <Setter Property="Margin" Value="{StaticResource HeaderMarginExpandedOverlayPane}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView">
+      <Setter Property="PaneBackground" Value="Transparent" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay]">
+      <Setter Property="PaneBackground" Value="{TemplateBinding PaneBackground}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Overlay]">
+      <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Inline] Border#BackgroundBorder">
+      <Setter Property="Background" Value="{Binding $parent[TabControl].ContentBackground}" />
+      <Setter Property="BoxShadow" Value="{StaticResource NavigationContentShadow}" />
+    </Style>
+    <Style Selector="^ /template/ SplitView[DisplayMode=Inline][IsPaneOpen=True] Border#BackgroundBorder">
+      <Setter Property="CornerRadius" Value="8 0 0 0" />
+    </Style>
+    <!--<Style Selector="^ > TabItem">
+      
+    </Style>-->
+    <!--<Style Selector="^ > TabItem /template/ Border#PART_LayoutRoot, :is(Button).NavigationButton /template/ ContentPresenter">
+      <Setter Property="Border.Background" Value="Transparent" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource SystemBaseHighColor}" />
+    </Style>
+    <Style Selector="^ > 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="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPointerOver}" />
+    </Style>
+    <Style Selector="^ > 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="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
+    </Style>
+    <Style Selector=":is(Button).NavigationButton:pressed">
+      <Setter Property="RenderTransform" Value="none" />
+    </Style>-->
+  </ControlTheme>
 
-
-  <!--  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}"
-                              TextElement.FontFamily="{TemplateBinding FontFamily}"
-                              TextElement.FontSize="{TemplateBinding FontSize}"
-                              TextElement.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}"
-                          TextElement.FontFamily="{TemplateBinding FontFamily}"
-                          TextElement.FontSize="{TemplateBinding FontSize}"
-                          TextElement.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="TextElement.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="TextElement.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="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundUnselectedPressed}" />
-  </Style>
-  <Style Selector=":is(Button).NavigationButton:pressed">
-    <Setter Property="RenderTransform" Value="none" />
-  </Style>
-</Styles>
+</ResourceDictionary>