From 8836a9e208638005ed4114ec6ca011882a96933b Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sun, 12 Dec 2021 20:44:28 -0500
Subject: [PATCH 1/4] Adaptive design for ControlCatalog sample pages

---
 samples/ControlCatalog/App.xaml               |   3 +
 samples/ControlCatalog/Pages/AcrylicPage.xaml | 264 ++++++++++--------
 .../Pages/AutoCompleteBoxPage.xaml            | 125 ++++-----
 samples/ControlCatalog/Pages/BorderPage.xaml  |   5 +-
 samples/ControlCatalog/Pages/ButtonPage.xaml  |   1 -
 .../Pages/ButtonSpinnerPage.xaml              |   1 -
 .../Pages/CalendarDatePickerPage.xaml         |   1 -
 .../ControlCatalog/Pages/CalendarPage.xaml    |  55 ++--
 samples/ControlCatalog/Pages/CanvasPage.xaml  |   1 -
 .../ControlCatalog/Pages/CarouselPage.xaml    |  13 +-
 .../ControlCatalog/Pages/CheckBoxPage.xaml    |   1 -
 .../ControlCatalog/Pages/ComboBoxPage.xaml    |   3 +-
 .../Pages/ContextFlyoutPage.xaml              |   1 -
 .../ControlCatalog/Pages/ContextMenuPage.xaml |   1 -
 samples/ControlCatalog/Pages/CursorPage.xaml  |   1 -
 .../ControlCatalog/Pages/DataGridPage.xaml    |   4 +-
 .../Pages/DateTimePickerPage.xaml             |   1 -
 samples/ControlCatalog/Pages/DialogsPage.xaml |   3 -
 .../ControlCatalog/Pages/DragAndDropPage.xaml |  71 +++--
 .../ControlCatalog/Pages/ExpanderPage.xaml    |   1 -
 samples/ControlCatalog/Pages/ImagePage.xaml   |   1 -
 .../Pages/ItemsRepeaterPage.xaml              |   1 -
 samples/ControlCatalog/Pages/ListBoxPage.xaml |   1 -
 samples/ControlCatalog/Pages/MenuPage.xaml    |   8 +-
 .../Pages/NotificationsPage.xaml              |   1 -
 .../Pages/NumericUpDownPage.xaml              |  11 +-
 .../ControlCatalog/Pages/ProgressBarPage.xaml |   1 -
 .../ControlCatalog/Pages/RadioButtonPage.xaml |   1 -
 .../Pages/RelativePanelPage.axaml             |   3 +
 .../Pages/ScrollViewerPage.xaml               |   1 -
 samples/ControlCatalog/Pages/SliderPage.xaml  |   1 -
 .../ControlCatalog/Pages/TabControlPage.xaml  |   6 -
 .../ControlCatalog/Pages/TabStripPage.xaml    |   1 -
 .../ControlCatalog/Pages/TextBlockPage.xaml   | 137 +++++----
 samples/ControlCatalog/Pages/TextBoxPage.xaml |  40 ++-
 .../Pages/ToggleSwitchPage.xaml               |   3 +-
 samples/ControlCatalog/Pages/ToolTipPage.xaml |   1 -
 .../ControlCatalog/Pages/TreeViewPage.xaml    |   1 -
 samples/ControlCatalog/Pages/ViewboxPage.xaml |   1 -
 39 files changed, 390 insertions(+), 386 deletions(-)

diff --git a/samples/ControlCatalog/App.xaml b/samples/ControlCatalog/App.xaml
index 6e57686e00..7ae7b4d3bb 100644
--- a/samples/ControlCatalog/App.xaml
+++ b/samples/ControlCatalog/App.xaml
@@ -5,6 +5,9 @@
              x:CompileBindings="True"
              x:Class="ControlCatalog.App">
   <Application.Styles>
+    <Style Selector="TextBlock.h1, TextBlock.h2, TextBlock.h3">
+      <Setter Property="TextWrapping" Value="Wrap" />
+    </Style>
     <Style Selector="TextBlock.h1">
       <Setter Property="FontSize" Value="16" />
       <Setter Property="FontWeight" Value="Medium" />
diff --git a/samples/ControlCatalog/Pages/AcrylicPage.xaml b/samples/ControlCatalog/Pages/AcrylicPage.xaml
index 7635e1ccc3..4fd0933879 100644
--- a/samples/ControlCatalog/Pages/AcrylicPage.xaml
+++ b/samples/ControlCatalog/Pages/AcrylicPage.xaml
@@ -1,139 +1,165 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<UserControl x:Class="ControlCatalog.Pages.AcrylicPage"
+             xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="ControlCatalog.Pages.AcrylicPage">
-  <Border Padding="20" HorizontalAlignment="Center">
-    <StackPanel Spacing="20">
+             d:DesignHeight="800"
+             d:DesignWidth="400"
+             mc:Ignorable="d">
+  <UserControl.Styles>
+    <Style Selector="ExperimentalAcrylicBorder">
+      <Setter Property="CornerRadius" Value="5" />
+      <Setter Property="MaxWidth" Value="660" />
+    </Style>
+    <Style Selector="TextBlock">
+      <Setter Property="VerticalAlignment" Value="Center" />
+      <Setter Property="Foreground" Value="Black" />
+    </Style>
+    <Style Selector="Slider">
+      <Setter Property="Margin" Value="8,0" />
+      <Setter Property="Minimum" Value="0" />
+      <Setter Property="Maximum" Value="1" />
+      <Setter Property="LargeChange" Value="0.2" />
+      <Setter Property="SmallChange" Value="0.1" />
+    </Style>
+  </UserControl.Styles>
+  <StackPanel Spacing="20">
 
-      <ExperimentalAcrylicBorder Width="660" CornerRadius="5">
+    <ExperimentalAcrylicBorder>
+      <ExperimentalAcrylicBorder.Material>
+        <ExperimentalAcrylicMaterial BackgroundSource="Digger" TintColor="White" />
+      </ExperimentalAcrylicBorder.Material>
+      <Grid Margin="20,10"
+            ColumnDefinitions="Auto,*,Auto"
+            RowDefinitions="Auto,Auto">
+        <TextBlock Grid.Row="0"
+                   Grid.Column="0"
+                   Text="TintOpacity" />
+        <Slider Name="TintOpacitySlider"
+                Grid.Row="0"
+                Grid.Column="1"
+                Value="0.9" />
+        <TextBlock Grid.Row="0"
+                   Grid.Column="2"
+                   Text="{Binding #TintOpacitySlider.Value, StringFormat=\{0:0.#\}}" />
+        <TextBlock Grid.Row="1"
+                   Grid.Column="0"
+                   Text="MaterialOpacity" />
+        <Slider Name="MaterialOpacitySlider"
+                Grid.Row="1"
+                Grid.Column="1"
+                Value="0.8" />
+        <TextBlock Grid.Row="1"
+                   Grid.Column="2"
+                   Text="{Binding #MaterialOpacitySlider.Value, StringFormat=\{0:0.#\}}" />
+      </Grid>
+    </ExperimentalAcrylicBorder>
+
+    <UniformGrid x:Name="BordersGrid"
+                 HorizontalAlignment="Stretch"
+                 MaxWidth="660"
+                 Columns="3">
+      <UniformGrid.Styles>
+        <Style Selector="ExperimentalAcrylicBorder">
+          <Setter Property="Height" Value="{Binding $self.Bounds.Width}" />
+          <Setter Property="Margin" Value="10" />
+          <Setter Property="MaxWidth" Value="200" />
+        </Style>
+      </UniformGrid.Styles>
+      <ExperimentalAcrylicBorder>
         <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial
-            TintColor="White"
-            BackgroundSource="Digger" />
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#FF0000"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
         </ExperimentalAcrylicBorder.Material>
-        <StackPanel Spacing="5" Margin="40 10">
-          <StackPanel Orientation="Horizontal">
-            <TextBlock Text="TintOpacity" Foreground="Black" />
-            <Slider Name="TintOpacitySlider" Minimum="0" Maximum="1" Value="0.9" SmallChange="0.1" LargeChange="0.2" Width="400" />
-            <TextBlock Text="{Binding #TintOpacitySlider.Value, StringFormat=\{0:0.#\}}" Foreground="Black" />
-          </StackPanel>
-          <StackPanel Orientation="Horizontal">
-            <TextBlock Text="MaterialOpacity" Foreground="Black" />
-            <Slider Name="MaterialOpacitySlider" Minimum="0" Maximum="1" Value="0.8" SmallChange="0.1" LargeChange="0.2" Width="400" />
-            <TextBlock Text="{Binding #MaterialOpacitySlider.Value, StringFormat=\{0:0.#\}}" Foreground="Black" />
-          </StackPanel>
-        </StackPanel>
       </ExperimentalAcrylicBorder>
 
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#00FF00"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-      <StackPanel Orientation="Horizontal" Spacing="20">
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#FF0000"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
-
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#00FF00"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
-
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#000000"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
-      </StackPanel>
-
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#000000"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-      <StackPanel Orientation="Horizontal" Spacing="20">
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#0000FF"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#0000FF"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#FFFF00"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#FFFF00"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#000000"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
-      </StackPanel>
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#000000"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-      <StackPanel Orientation="Horizontal" Spacing="20">
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="White"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
 
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="#3c3c3c"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="White"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-        <ExperimentalAcrylicBorder Height="200" Width="200" CornerRadius="5">
-          <ExperimentalAcrylicBorder.Material>
-            <ExperimentalAcrylicMaterial
-              TintColor="White"
-              TintOpacity="{Binding #TintOpacitySlider.Value}"
-              MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-              BackgroundSource="Digger" />
-          </ExperimentalAcrylicBorder.Material>
-        </ExperimentalAcrylicBorder>
-      </StackPanel>
+      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="#3c3c3c"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+        </ExperimentalAcrylicBorder.Material>
+      </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder Height="200" Width="660" CornerRadius="5">
+      <ExperimentalAcrylicBorder>
         <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial
-            TintColor="Red"
-            TintOpacity="{Binding #TintOpacitySlider.Value}"
-            MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-            BackgroundSource="Digger" />
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                       TintColor="White"
+                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
         </ExperimentalAcrylicBorder.Material>
       </ExperimentalAcrylicBorder>
-    </StackPanel>
-  </Border>
+
+    </UniformGrid>
+
+
+    <ExperimentalAcrylicBorder Width="{Binding #BordersGrid.Bounds.Width}"
+                               Height="160">
+      <ExperimentalAcrylicBorder.Material>
+        <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                     MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                     TintColor="Red"
+                                     TintOpacity="{Binding #TintOpacitySlider.Value}" />
+      </ExperimentalAcrylicBorder.Material>
+    </ExperimentalAcrylicBorder>
+  </StackPanel>
+
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml b/samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml
index 1a53217842..46f3705ffd 100644
--- a/samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml
+++ b/samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml
@@ -1,73 +1,72 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<UserControl x:Class="ControlCatalog.Pages.AutoCompleteBoxPage"
+             xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:sys="clr-namespace:System;assembly=netstandard"
-             x:Class="ControlCatalog.Pages.AutoCompleteBoxPage">
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">AutoCompleteBox</TextBlock>
+             d:DesignHeight="600"
+             d:DesignWidth="400">
+  <StackPanel Orientation="Vertical"
+              Spacing="4"
+              MaxWidth="660">
     <TextBlock Classes="h2">A control into which the user can input text</TextBlock>
 
-    <StackPanel Orientation="Horizontal"
-              Margin="0,16,0,0"
-              HorizontalAlignment="Center"
-              Spacing="8">
-      <StackPanel Orientation="Vertical">
-        <TextBlock Text="MinimumPrefixLength: 1"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         MinimumPrefixLength="1"/>
-        <TextBlock Text="MinimumPrefixLength: 3"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         MinimumPrefixLength="3"/>
-        <TextBlock Text="MinimumPopulateDelay: 1 Second"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         MinimumPopulateDelay="1"/>
-        <TextBlock Text="MaxDropDownHeight: 60"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         MaxDropDownHeight="60"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         Watermark="Watermark"/>
-        <TextBlock Text="Disabled"/>
-        <AutoCompleteBox Width="200"
-                         IsEnabled="False"/>
+    <UniformGrid Margin="-8,0"
+                 Columns="2">
+      <UniformGrid.Styles>
+        <Style Selector="StackPanel">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </UniformGrid.Styles>
+      <StackPanel>
+        <TextBlock Text="MinimumPrefixLength: 1" />
+        <AutoCompleteBox MinimumPrefixLength="1" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="MinimumPrefixLength: 3" />
+        <AutoCompleteBox MinimumPrefixLength="3" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="MinimumPopulateDelay: 1s" />
+        <AutoCompleteBox MinimumPopulateDelay="1" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="MaxDropDownHeight: 60" />
+        <AutoCompleteBox MaxDropDownHeight="60" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="Watermark" />
+        <AutoCompleteBox Watermark="Hello World" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="Disabled" />
+        <AutoCompleteBox IsEnabled="False" />
       </StackPanel>
-      
 
-      <StackPanel Orientation="Vertical">
-        
-        <TextBlock Text="ValueMemberBinding"/>
-        <AutoCompleteBox Width="200"
-                         Margin="0,0,0,8"
-                         ValueMemberBinding="{Binding Capital}"/>
-        <TextBlock Text="Multi-Binding"/>
-        <AutoCompleteBox Name="MultiBindingBox"
-                         Width="200"
-                         Margin="0,0,0,8"
-                         FilterMode="Contains"/>
-        <TextBlock Text="Async Populate"/>
-        <AutoCompleteBox Name="AsyncBox"
-                         Width="200"
-                         Margin="0,0,0,8"
-                         FilterMode="None"/>
-        <TextBlock Text="Custom Autocomplete"/>
-        <AutoCompleteBox Name="CustomAutocompleteBox"
-                         Width="200"
-                         Margin="0,0,0,8"
-                         FilterMode="None"/>
-        
-        <TextBlock Text="With Validation Errors"/>
-        <AutoCompleteBox Name="ValidationErrors"
-                         Width="200"
-                         Margin="0,0,0,8"
-                         FilterMode="None">
-          <DataValidationErrors.Error>
-            <sys:Exception /> 
-          </DataValidationErrors.Error>
-        </AutoCompleteBox>
+      <StackPanel>
+        <TextBlock Text="ValueMemberBinding" />
+        <AutoCompleteBox ValueMemberBinding="{Binding Capital}" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="Multi-Binding" />
+        <AutoCompleteBox Name="MultiBindingBox" FilterMode="Contains" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="Async Populate" />
+        <AutoCompleteBox Name="AsyncBox" FilterMode="None" />
+      </StackPanel>
+      <StackPanel>
+        <TextBlock Text="Custom Autocomplete" />
+        <AutoCompleteBox Name="CustomAutocompleteBox" FilterMode="None" />
       </StackPanel>
+    </UniformGrid>
+    <StackPanel>
+      <TextBlock Text="With Validation Errors" />
+      <AutoCompleteBox Name="ValidationErrors" FilterMode="None">
+        <DataValidationErrors.Error>
+          <sys:Exception />
+        </DataValidationErrors.Error>
+      </AutoCompleteBox>
     </StackPanel>
   </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/BorderPage.xaml b/samples/ControlCatalog/Pages/BorderPage.xaml
index bfd14cc627..bfc4f86698 100644
--- a/samples/ControlCatalog/Pages/BorderPage.xaml
+++ b/samples/ControlCatalog/Pages/BorderPage.xaml
@@ -1,8 +1,11 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             d:DesignHeight="800"
+             d:DesignWidth="400"
              x:Class="ControlCatalog.Pages.BorderPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Border</TextBlock>
     <TextBlock Classes="h2">A control which decorates a child with a border and background</TextBlock>
 
     <StackPanel Orientation="Vertical"
diff --git a/samples/ControlCatalog/Pages/ButtonPage.xaml b/samples/ControlCatalog/Pages/ButtonPage.xaml
index b35c112a68..2ce1469118 100644
--- a/samples/ControlCatalog/Pages/ButtonPage.xaml
+++ b/samples/ControlCatalog/Pages/ButtonPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ButtonPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Button</TextBlock>
     <TextBlock Classes="h2">A button control</TextBlock>
 
     <StackPanel Orientation="Horizontal"
diff --git a/samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml b/samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml
index 4ac2330403..323d6d36e9 100644
--- a/samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml
+++ b/samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml
@@ -4,7 +4,6 @@
              xmlns:sys="clr-namespace:System;assembly=netstandard">
 
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">ButtonSpinner</TextBlock>
     <TextBlock Classes="h2">The ButtonSpinner control allows you to add button spinners to any element and then respond to the Spin event to manipulate that element.</TextBlock>
 
     <StackPanel Orientation="Vertical" Spacing="8" Width="200" Margin="0,20,0,0">
diff --git a/samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml b/samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml
index 107472105a..3e50bf8a08 100644
--- a/samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml
+++ b/samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.CalendarDatePickerPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">CalendarDatePicker</TextBlock>
     <TextBlock Classes="h2">A control for selecting dates with a calendar drop-down</TextBlock>
         
     <StackPanel Orientation="Horizontal"
diff --git a/samples/ControlCatalog/Pages/CalendarPage.xaml b/samples/ControlCatalog/Pages/CalendarPage.xaml
index dbd0dba37b..cfae7140b0 100644
--- a/samples/ControlCatalog/Pages/CalendarPage.xaml
+++ b/samples/ControlCatalog/Pages/CalendarPage.xaml
@@ -2,47 +2,46 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.CalendarPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Calendar</TextBlock>
     <TextBlock Classes="h2">A calendar control for selecting dates</TextBlock>
-        
-    <StackPanel Orientation="Horizontal"
-                Margin="0,16,0,0"
-                HorizontalAlignment="Center"
-                Spacing="16">
-      <StackPanel Orientation="Vertical">
-        <TextBlock Text="SelectionMode: None"/>
-        <Calendar SelectionMode="None"
-                  Margin="0,0,0,8"/>
 
+    <WrapPanel MaxWidth="660"
+               HorizontalAlignment="Center"
+               Margin="-8, 0">
+      <WrapPanel.Styles>
+        <Style Selector="StackPanel">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </WrapPanel.Styles>
+      <StackPanel>
+        <TextBlock Text="SelectionMode: None"/>
+        <Calendar SelectionMode="None" />
+      </StackPanel>
+      <StackPanel>
         <TextBlock Text="SelectionMode: SingleDate"/>
-        <Calendar SelectionMode="SingleDate"
-                  Margin="0,0,0,8"/>
-
+        <Calendar SelectionMode="SingleDate" />
+      </StackPanel>
+      <StackPanel>
         <TextBlock Text="Disabled"/>
-        <Calendar IsEnabled="False"
-                  SelectionMode="SingleDate"/>
+        <Calendar IsEnabled="False" />
       </StackPanel>
-
-      <StackPanel Orientation="Vertical">
+      <StackPanel>
         <TextBlock Text="SelectionMode: SingleRange"/>
-        <Calendar SelectionMode="SingleRange"
-                  Margin="0,0,0,8"/>
-
+        <Calendar SelectionMode="SingleRange" />
+      </StackPanel>
+      <StackPanel>
         <TextBlock Text="SelectionMode: MultipleRange"/>
-        <Calendar SelectionMode="MultipleRange"/>
+        <Calendar SelectionMode="MultipleRange" />
       </StackPanel>
-
-      <StackPanel Orientation="Vertical">
+      <StackPanel>
         <TextBlock Text="DisplayDates"/>
         <Calendar Name="DisplayDatesCalendar"
-                  SelectionMode="SingleDate"
-                  Margin="0,0,0,8"/>
-
+                  SelectionMode="SingleDate" />
+      </StackPanel>
+      <StackPanel>
         <TextBlock Text="BlackoutDates"/>
         <Calendar Name="BlackoutDatesCalendar"
                   SelectionMode="SingleDate" />
       </StackPanel>
-      
-    </StackPanel> 
+    </WrapPanel>
   </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/CanvasPage.xaml b/samples/ControlCatalog/Pages/CanvasPage.xaml
index d154e717a4..0c0d897f04 100644
--- a/samples/ControlCatalog/Pages/CanvasPage.xaml
+++ b/samples/ControlCatalog/Pages/CanvasPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.CanvasPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Canvas</TextBlock>
     <TextBlock Classes="h2">A panel which lays out its children by explicit coordinates</TextBlock>
     <Canvas Background="Yellow" Width="300" Height="400">
       <Rectangle Fill="Blue" Width="63" Height="41" Canvas.Left="40" Canvas.Top="31">
diff --git a/samples/ControlCatalog/Pages/CarouselPage.xaml b/samples/ControlCatalog/Pages/CarouselPage.xaml
index edd692a57e..4a53c9026f 100644
--- a/samples/ControlCatalog/Pages/CarouselPage.xaml
+++ b/samples/ControlCatalog/Pages/CarouselPage.xaml
@@ -2,14 +2,15 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.CarouselPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Carousel</TextBlock>
     <TextBlock Classes="h2">An items control that displays its items as pages that fill the control.</TextBlock>
 
-    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 16 0 0" Spacing="8">
-      <Button Name="left" VerticalAlignment="Center" Padding="20">
+    <Grid ColumnDefinitions="Auto,*,Auto"
+          MaxWidth="660"
+          HorizontalAlignment="Stretch" Margin="0 16 0 0">
+      <Button Name="left" Grid.Column="0" VerticalAlignment="Center" Padding="10,20" Margin="4">
         <Path Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" Fill="Black"/>
       </Button>
-      <Carousel Name="carousel">
+      <Carousel Name="carousel" Grid.Column="1">
         <Carousel.PageTransition>
           <PageSlide Duration="0.25" Orientation="Vertical" />
         </Carousel.PageTransition>
@@ -17,10 +18,10 @@
         <Image Source="/Assets/hirsch-899118_640.jpg"/>
         <Image Source="/Assets/maple-leaf-888807_640.jpg"/>
       </Carousel>
-      <Button Name="right" VerticalAlignment="Center" Padding="20">
+      <Button Name="right" Grid.Column="2" VerticalAlignment="Center" Padding="10,20" Margin="4">
         <Path Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" Fill="Black"/>
       </Button>
-    </StackPanel>
+    </Grid>
 
     <StackPanel Orientation="Horizontal" Spacing="4">
       <TextBlock VerticalAlignment="Center">Transition</TextBlock>
diff --git a/samples/ControlCatalog/Pages/CheckBoxPage.xaml b/samples/ControlCatalog/Pages/CheckBoxPage.xaml
index 769ef26699..2f60fc5dae 100644
--- a/samples/ControlCatalog/Pages/CheckBoxPage.xaml
+++ b/samples/ControlCatalog/Pages/CheckBoxPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.CheckBoxPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">CheckBox</TextBlock>
     <TextBlock Classes="h2">A check box control</TextBlock>
 
     <StackPanel Orientation="Horizontal"
diff --git a/samples/ControlCatalog/Pages/ComboBoxPage.xaml b/samples/ControlCatalog/Pages/ComboBoxPage.xaml
index d440b7cce3..decbd763a1 100644
--- a/samples/ControlCatalog/Pages/ComboBoxPage.xaml
+++ b/samples/ControlCatalog/Pages/ComboBoxPage.xaml
@@ -4,11 +4,10 @@
              xmlns:sys="using:System"
              xmlns:col="using:System.Collections">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">ComboBox</TextBlock>
     <TextBlock Classes="h2">A drop-down list.</TextBlock>
 
     <WrapPanel HorizontalAlignment="Center" Margin="0 16 0 0"
-               MaxWidth="750">
+               MaxWidth="660">
       <WrapPanel.Styles>
         <Style Selector="ComboBox">
           <Setter Property="Width" Value="250" />
diff --git a/samples/ControlCatalog/Pages/ContextFlyoutPage.xaml b/samples/ControlCatalog/Pages/ContextFlyoutPage.xaml
index 0d9026bdd5..871efa5b7a 100644
--- a/samples/ControlCatalog/Pages/ContextFlyoutPage.xaml
+++ b/samples/ControlCatalog/Pages/ContextFlyoutPage.xaml
@@ -24,7 +24,6 @@
         <Setter Property="VerticalAlignment" Value="Center" />
       </Style>
     </StackPanel.Styles>
-    <TextBlock Classes="h1">Context Flyout</TextBlock>
     <TextBlock Classes="h2">A right click Flyout that can be applied to any control.</TextBlock>
 
     <UniformGrid HorizontalAlignment="Center" Rows="2">
diff --git a/samples/ControlCatalog/Pages/ContextMenuPage.xaml b/samples/ControlCatalog/Pages/ContextMenuPage.xaml
index 7e564efafc..1e120aab6d 100644
--- a/samples/ControlCatalog/Pages/ContextMenuPage.xaml
+++ b/samples/ControlCatalog/Pages/ContextMenuPage.xaml
@@ -2,7 +2,6 @@
              xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Context Menu</TextBlock>
     <TextBlock Classes="h2">A right click menu that can be applied to any control.</TextBlock>
 
     <UniformGrid HorizontalAlignment="Center" Rows="2">
diff --git a/samples/ControlCatalog/Pages/CursorPage.xaml b/samples/ControlCatalog/Pages/CursorPage.xaml
index a28039ea3f..25abc426a9 100644
--- a/samples/ControlCatalog/Pages/CursorPage.xaml
+++ b/samples/ControlCatalog/Pages/CursorPage.xaml
@@ -3,7 +3,6 @@
              x:Class="ControlCatalog.Pages.CursorPage">
   <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,*">
     <StackPanel Grid.ColumnSpan="2" Orientation="Vertical" Spacing="4">
-      <TextBlock Classes="h1">Cursor</TextBlock>
       <TextBlock Classes="h2">Defines a cursor (mouse pointer)</TextBlock>
     </StackPanel>
 
diff --git a/samples/ControlCatalog/Pages/DataGridPage.xaml b/samples/ControlCatalog/Pages/DataGridPage.xaml
index 9c502b7414..63e873d9b5 100644
--- a/samples/ControlCatalog/Pages/DataGridPage.xaml
+++ b/samples/ControlCatalog/Pages/DataGridPage.xaml
@@ -19,7 +19,6 @@
   </UserControl.Styles>
   <Grid RowDefinitions="Auto,Auto,*">
     <StackPanel Orientation="Vertical" Spacing="4" Grid.Row="0">
-      <TextBlock Classes="h1">DataGrid</TextBlock>
       <TextBlock Classes="h2">A control for displaying and interacting with a data source.</TextBlock>
     </StackPanel>
     <StackPanel Grid.Row="1" Spacing="4" Orientation="Horizontal" IsVisible="{Binding #EditableTab.IsSelected}">
@@ -35,12 +34,13 @@
           <DataGrid Name="dataGrid1" Margin="12" CanUserResizeColumns="True" CanUserReorderColumns="True" CanUserSortColumns="True" HeadersVisibility="All">
             <DataGrid.Columns>
               <!-- Using HeaderTemplate -->
-              <DataGridTextColumn Header="Country" HeaderTemplate="{StaticResource Demo.DataTemplates.CountryHeader}" Binding="{Binding Name}" Width="6*" MinWidth="400" />
+              <DataGridTextColumn Header="Country" HeaderTemplate="{StaticResource Demo.DataTemplates.CountryHeader}" Binding="{Binding Name}" Width="6*" />
               <!-- CompiledBinding example of usage. -->
               <DataGridTextColumn Header="Region" Binding="{CompiledBinding Region}" Width="4*" x:DataType="local:Country" />
               <DataGridTextColumn Header="Population" Binding="{Binding Population}" Width="3*" />
               <DataGridTextColumn Header="Area" Binding="{Binding Area}" Width="3*" />
               <DataGridTextColumn Header="GDP" Binding="{Binding GDP}" Width="3*" CellStyleClasses="gdp"
+                                  MinWidth="200"
                                   IsVisible="{Binding #ShowGDP.IsChecked}"/>
             </DataGrid.Columns>
           </DataGrid>
diff --git a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
index 45056a9a76..29cd939520 100644
--- a/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
+++ b/samples/ControlCatalog/Pages/DateTimePickerPage.xaml
@@ -6,7 +6,6 @@
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.DateTimePickerPage">
   <StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Stretch">
-    <TextBlock Classes="h1">DatePicker and TimePicker</TextBlock>
     <TextBlock Name="DatePickerDesc" Classes="h2" TextWrapping="Wrap"/>
     <TextBlock Name="TimePickerDesc" Classes="h2" TextWrapping="Wrap"/>
 
diff --git a/samples/ControlCatalog/Pages/DialogsPage.xaml b/samples/ControlCatalog/Pages/DialogsPage.xaml
index a910962dde..6ac9dcfe22 100644
--- a/samples/ControlCatalog/Pages/DialogsPage.xaml
+++ b/samples/ControlCatalog/Pages/DialogsPage.xaml
@@ -2,9 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.DialogsPage">
   <StackPanel Orientation="Vertical" Spacing="4" Margin="4">
-      <TextBlock Classes="h1"
-                 Text="Picker dialogs" />
-
       <CheckBox Name="UseFilters">Use filters</CheckBox>
       <Button Name="OpenFile">_Open File</Button>
       <Button Name="OpenMultipleFiles">Open _Multiple File</Button>
diff --git a/samples/ControlCatalog/Pages/DragAndDropPage.xaml b/samples/ControlCatalog/Pages/DragAndDropPage.xaml
index cd8bf78c88..1bf8bfa99b 100644
--- a/samples/ControlCatalog/Pages/DragAndDropPage.xaml
+++ b/samples/ControlCatalog/Pages/DragAndDropPage.xaml
@@ -1,32 +1,45 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="ControlCatalog.Pages.DragAndDropPage">
-    <StackPanel Orientation="Vertical" Spacing="4">
-        <TextBlock Classes="h1">Drag+Drop</TextBlock>
-        <TextBlock Classes="h2">Example of Drag+Drop capabilities</TextBlock>
+<UserControl x:Class="ControlCatalog.Pages.DragAndDropPage"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <StackPanel Orientation="Vertical" Spacing="4">
+    <TextBlock Classes="h2">Example of Drag+Drop capabilities</TextBlock>
 
-        <StackPanel Orientation="Horizontal"
-                Margin="0,16,0,0"
-                HorizontalAlignment="Center"
-                Spacing="16">
-            <StackPanel>
-                <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16" Name="DragMeText">
-                  <TextBlock Name="DragStateText">Drag Me</TextBlock>
-                </Border>
-                <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16" Name="DragMeCustom">
-                  <TextBlock Name="DragStateCustom">Drag Me (custom)</TextBlock>
-                </Border>
-                <TextBlock Name="DropState"></TextBlock>
-            </StackPanel>
+    <WrapPanel HorizontalAlignment="Center">
+      <StackPanel Margin="8"
+                  MaxWidth="160">
+        <Border Name="DragMeText"
+                Padding="16"
+                BorderBrush="{DynamicResource SystemAccentColor}"
+                BorderThickness="2">
+          <TextBlock Name="DragStateText" TextWrapping="Wrap">Drag Me</TextBlock>
+        </Border>
+        <Border Name="DragMeCustom"
+                Padding="16"
+                BorderBrush="{DynamicResource SystemAccentColor}"
+                BorderThickness="2">
+          <TextBlock Name="DragStateCustom" TextWrapping="Wrap">Drag Me (custom)</TextBlock>
+        </Border>
+        <TextBlock Name="DropState" TextWrapping="Wrap" />
+      </StackPanel>
 
-            <Border Background="{DynamicResource SystemAccentColorDark1}" Padding="16" 
-                    DragDrop.AllowDrop="True" Name="CopyTarget">
-                <TextBlock>Drop some text or files here (Copy)</TextBlock>
-            </Border>
-            <Border Background="{DynamicResource SystemAccentColorDark1}" Padding="16" 
-                    DragDrop.AllowDrop="True" Name="MoveTarget">
-                <TextBlock>Drop some text or files here (Move)</TextBlock>
-            </Border>
-        </StackPanel>
-    </StackPanel>
+      <StackPanel Margin="8"
+                  Orientation="Horizontal"
+                  Spacing="16">
+        <Border Name="CopyTarget"
+                Padding="16"
+                MaxWidth="260"
+                Background="{DynamicResource SystemAccentColorDark1}"
+                DragDrop.AllowDrop="True">
+          <TextBlock TextWrapping="Wrap">Drop some text or files here (Copy)</TextBlock>
+        </Border>
+        <Border Name="MoveTarget"
+                Padding="16"
+                MaxWidth="260"
+                Background="{DynamicResource SystemAccentColorDark1}"
+                DragDrop.AllowDrop="True">
+          <TextBlock TextWrapping="Wrap">Drop some text or files here (Move)</TextBlock>
+        </Border>
+      </StackPanel>
+    </WrapPanel>
+  </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/ExpanderPage.xaml b/samples/ControlCatalog/Pages/ExpanderPage.xaml
index 605eff4fce..cef473af04 100644
--- a/samples/ControlCatalog/Pages/ExpanderPage.xaml
+++ b/samples/ControlCatalog/Pages/ExpanderPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ExpanderPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Expander</TextBlock>
     <TextBlock Classes="h2">Expands to show nested content</TextBlock>
 
     <StackPanel Orientation="Vertical"
diff --git a/samples/ControlCatalog/Pages/ImagePage.xaml b/samples/ControlCatalog/Pages/ImagePage.xaml
index f61931ed72..444d370e42 100644
--- a/samples/ControlCatalog/Pages/ImagePage.xaml
+++ b/samples/ControlCatalog/Pages/ImagePage.xaml
@@ -3,7 +3,6 @@
              x:Class="ControlCatalog.Pages.ImagePage">
   <DockPanel>
     <StackPanel DockPanel.Dock="Top" Orientation="Vertical" Spacing="4">
-      <TextBlock Classes="h1">Image</TextBlock>
       <TextBlock Classes="h2">Displays an image</TextBlock>
     </StackPanel>
 
diff --git a/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml b/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
index 4d0bd663df..8305d72d1f 100644
--- a/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
+++ b/samples/ControlCatalog/Pages/ItemsRepeaterPage.xaml
@@ -43,7 +43,6 @@
   
   <DockPanel>
     <StackPanel DockPanel.Dock="Top" Spacing="4" Margin="0 0 0 16">
-      <TextBlock Classes="h1">ItemsRepeater</TextBlock>
       <TextBlock Classes="h2">A data-driven collection control that incorporates a flexible layout system, custom views, and virtualization.</TextBlock>
     </StackPanel>
     <StackPanel DockPanel.Dock="Right" Margin="8 0" Spacing="4">
diff --git a/samples/ControlCatalog/Pages/ListBoxPage.xaml b/samples/ControlCatalog/Pages/ListBoxPage.xaml
index b36629fb2a..41658329df 100644
--- a/samples/ControlCatalog/Pages/ListBoxPage.xaml
+++ b/samples/ControlCatalog/Pages/ListBoxPage.xaml
@@ -13,7 +13,6 @@
       </Style>
     </DockPanel.Styles>
     <StackPanel DockPanel.Dock="Top" Margin="4">
-      <TextBlock Classes="h1">ListBox</TextBlock>
       <TextBlock Classes="h2">Hosts a collection of ListBoxItem.</TextBlock>
       <TextBlock Classes="h2">Each 5th item is highlighted with nth-child(5n+3) and nth-last-child(5n+4) rules.</TextBlock>
     </StackPanel>
diff --git a/samples/ControlCatalog/Pages/MenuPage.xaml b/samples/ControlCatalog/Pages/MenuPage.xaml
index 2c09cb9b4d..0e5b49914f 100644
--- a/samples/ControlCatalog/Pages/MenuPage.xaml
+++ b/samples/ControlCatalog/Pages/MenuPage.xaml
@@ -2,16 +2,12 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.MenuPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Menu</TextBlock>
     <TextBlock Classes="h2">Exported menu fallback</TextBlock>
     <TextBlock>(Should be only visible on platforms without desktop-global menu bar)</TextBlock>
     <NativeMenuBar/>
     <TextBlock Classes="h2">A window menu</TextBlock>
             
-        <StackPanel Orientation="Horizontal"
-              Margin="0,16,0,0"
-              HorizontalAlignment="Center"
-              Spacing="16">
+        <WrapPanel HorizontalAlignment="Center">
             <StackPanel>
                 <TextBlock Classes="h3" Margin="4 8">Defined in XAML</TextBlock>
                 <Menu>
@@ -85,6 +81,6 @@
                     </MenuItem>
                 </Menu>
             </StackPanel>
-        </StackPanel>
+        </WrapPanel>
     </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/NotificationsPage.xaml b/samples/ControlCatalog/Pages/NotificationsPage.xaml
index 94e2314dc7..d48b338fe8 100644
--- a/samples/ControlCatalog/Pages/NotificationsPage.xaml
+++ b/samples/ControlCatalog/Pages/NotificationsPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.NotificationsPage">
   <StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Left">
-        <TextBlock Classes="h1">Notifications</TextBlock>
         <Button Content="Show Standard Managed Notification" Command="{Binding ShowManagedNotificationCommand}" />
         <Button Content="Show Custom Managed Notification" Command="{Binding ShowCustomManagedNotificationCommand}" />
         <Button Content="Show Native Notification" Command="{Binding ShowNativeNotificationCommand}" />
diff --git a/samples/ControlCatalog/Pages/NumericUpDownPage.xaml b/samples/ControlCatalog/Pages/NumericUpDownPage.xaml
index 2f422e2d64..9ddc6b6228 100644
--- a/samples/ControlCatalog/Pages/NumericUpDownPage.xaml
+++ b/samples/ControlCatalog/Pages/NumericUpDownPage.xaml
@@ -4,12 +4,11 @@
              x:Class="ControlCatalog.Pages.NumericUpDownPage">
   <StackPanel Orientation="Vertical" Spacing="4"
               MaxWidth="800">
-    <TextBlock Margin="2" Classes="h1">Numeric up-down control</TextBlock>
     <TextBlock Margin="2" Classes="h2" TextWrapping="Wrap">Numeric up-down control provides a TextBox with button spinners that allow incrementing and decrementing numeric values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.</TextBlock>
 
     <TextBlock Margin="2,5,2,2" FontSize="14" FontWeight="Bold">Features:</TextBlock>
-    <Grid Margin="2" ColumnDefinitions="Auto,Auto,Auto,Auto" RowDefinitions="Auto,Auto">
-      <Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="Auto, Auto" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
+    <WrapPanel Margin="-8,0">
+      <Grid Grid.Row="0" Grid.Column="0" Margin="8" ColumnDefinitions="Auto, Auto" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
         <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="2">ShowButtonSpinner:</TextBlock>
         <CheckBox Grid.Row="0" Grid.Column="1" IsChecked="{Binding #upDown.ShowButtonSpinner}" VerticalAlignment="Center" Margin="2"/>
 
@@ -23,7 +22,7 @@
         <CheckBox Grid.Row="3" Grid.Column="1" IsChecked="{Binding #upDown.ClipValueToMinMax}" VerticalAlignment="Center" Margin="2"/>
 
       </Grid>
-      <Grid Grid.Row="0" Grid.Column="1" Margin="10,2,2,2" ColumnDefinitions="Auto, 120" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
+      <Grid Grid.Row="0" Grid.Column="1" Margin="8" ColumnDefinitions="Auto, 120" RowDefinitions="Auto,Auto,Auto,Auto,Auto">
         <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="2">FormatString:</TextBlock>
         <ComboBox Grid.Row="0" Grid.Column="1" Items="{Binding Formats}" SelectedItem="{Binding SelectedFormat}"
                   VerticalAlignment="Center" Margin="2">
@@ -52,7 +51,7 @@
         <TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Center" Margin="2">Text:</TextBlock>
         <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding #upDown.Text}" VerticalAlignment="Center" Margin="2" />
       </Grid>
-      <Grid Grid.Row="0" Grid.Column="2" Margin="10,2,2,2" RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto, Auto">
+      <Grid Grid.Row="0" Grid.Column="2" Margin="8" RowDefinitions="Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="Auto, Auto">
         <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Margin="10,2,2,2">Minimum:</TextBlock>
         <NumericUpDown Grid.Row="0" Grid.Column="1" Value="{Binding #upDown.Minimum}"
                        CultureInfo="{Binding #upDown.CultureInfo}" VerticalAlignment="Center" Margin="2" HorizontalAlignment="Center"/>
@@ -71,7 +70,7 @@
 
 
       </Grid>
-    </Grid>
+    </WrapPanel>
 
     <WrapPanel Margin="2,10,2,2">
       <StackPanel Orientation="Vertical" Margin="10">
diff --git a/samples/ControlCatalog/Pages/ProgressBarPage.xaml b/samples/ControlCatalog/Pages/ProgressBarPage.xaml
index da8ef6cf07..db7d7d3280 100644
--- a/samples/ControlCatalog/Pages/ProgressBarPage.xaml
+++ b/samples/ControlCatalog/Pages/ProgressBarPage.xaml
@@ -1,6 +1,5 @@
 <UserControl xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ControlCatalog.Pages.ProgressBarPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">ProgressBar</TextBlock>
     <TextBlock Classes="h2">A progress bar control</TextBlock>
     <StackPanel>
       <CheckBox x:Name="showProgress" Margin="10,16,0,0" Content="Show Progress Text" />
diff --git a/samples/ControlCatalog/Pages/RadioButtonPage.xaml b/samples/ControlCatalog/Pages/RadioButtonPage.xaml
index 408f9c2411..8623d81b3f 100644
--- a/samples/ControlCatalog/Pages/RadioButtonPage.xaml
+++ b/samples/ControlCatalog/Pages/RadioButtonPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.RadioButtonPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">RadioButton</TextBlock>
     <TextBlock Classes="h2">Allows the selection of a single option of many</TextBlock>
 
     <StackPanel Orientation="Horizontal"
diff --git a/samples/ControlCatalog/Pages/RelativePanelPage.axaml b/samples/ControlCatalog/Pages/RelativePanelPage.axaml
index 4dcdcc195f..a6647b0d36 100644
--- a/samples/ControlCatalog/Pages/RelativePanelPage.axaml
+++ b/samples/ControlCatalog/Pages/RelativePanelPage.axaml
@@ -4,6 +4,8 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.RelativePanelPage">
+  <ScrollViewer HorizontalScrollBarVisibility="Auto"
+                VerticalScrollBarVisibility="Auto">
     <RelativePanel Width="620" Height="700" Margin="32">
         <Border Name="Rect1" Background="Red" Height="50" Width="50">
             <TextBlock Text="Rect1" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
@@ -57,4 +59,5 @@
             <TextBlock Text="Rect15 (LeftOf Rect2, AlignTopWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
         </Border>
     </RelativePanel>
+  </ScrollViewer>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
index bbefcab9ca..1b3771ccb5 100644
--- a/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
+++ b/samples/ControlCatalog/Pages/ScrollViewerPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ScrollViewerPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">ScrollViewer</TextBlock>
     <TextBlock Classes="h2">Allows for horizontal and vertical content scrolling.</TextBlock>
 
     <Grid ColumnDefinitions="Auto, *">
diff --git a/samples/ControlCatalog/Pages/SliderPage.xaml b/samples/ControlCatalog/Pages/SliderPage.xaml
index b4901ec780..b2375922c2 100644
--- a/samples/ControlCatalog/Pages/SliderPage.xaml
+++ b/samples/ControlCatalog/Pages/SliderPage.xaml
@@ -3,7 +3,6 @@
              xmlns:sys="clr-namespace:System;assembly=netstandard"
              x:Class="ControlCatalog.Pages.SliderPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">Slider</TextBlock>
     <TextBlock Classes="h2">A control that lets the user select from a range of values by moving a Thumb control along a Track.</TextBlock>
 
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 16 0 0" Spacing="16">
diff --git a/samples/ControlCatalog/Pages/TabControlPage.xaml b/samples/ControlCatalog/Pages/TabControlPage.xaml
index e700146a5b..cba6fcd0ad 100644
--- a/samples/ControlCatalog/Pages/TabControlPage.xaml
+++ b/samples/ControlCatalog/Pages/TabControlPage.xaml
@@ -3,12 +3,6 @@
     x:Class="ControlCatalog.Pages.TabControlPage"
     xmlns="https://github.com/avaloniaui">
     <DockPanel>
-        <TextBlock 
-            DockPanel.Dock="Top" 
-            Classes="h1"
-            Text="TabControl"
-            Margin="4">           
-        </TextBlock>
         <TextBlock 
             DockPanel.Dock="Top" 
             Classes="h2"
diff --git a/samples/ControlCatalog/Pages/TabStripPage.xaml b/samples/ControlCatalog/Pages/TabStripPage.xaml
index a824336f75..163665ef92 100644
--- a/samples/ControlCatalog/Pages/TabStripPage.xaml
+++ b/samples/ControlCatalog/Pages/TabStripPage.xaml
@@ -2,7 +2,6 @@
              x:Class="ControlCatalog.Pages.TabStripPage"
              xmlns="https://github.com/avaloniaui">
     <StackPanel Orientation="Vertical" Spacing="4">
-        <TextBlock Classes="h1">TabStrip</TextBlock>
         <TextBlock Classes="h2">A control which displays a selectable strip of tabs</TextBlock>
 
         <Separator Margin="0 16"/>
diff --git a/samples/ControlCatalog/Pages/TextBlockPage.xaml b/samples/ControlCatalog/Pages/TextBlockPage.xaml
index d4f72f161a..9998a20d42 100644
--- a/samples/ControlCatalog/Pages/TextBlockPage.xaml
+++ b/samples/ControlCatalog/Pages/TextBlockPage.xaml
@@ -1,102 +1,99 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="ControlCatalog.Pages.TextBlockPage">
+<UserControl x:Class="ControlCatalog.Pages.TextBlockPage"
+             xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <StackPanel>
-    <TextBlock Classes="h1">TextBlock</TextBlock>
     <TextBlock Classes="h2">A control that can display text</TextBlock>
-    <StackPanel
-      Orientation="Horizontal"
-      Spacing="16"
-      HorizontalAlignment="Center"
-      Margin="0,16,0,0">
-      <StackPanel.Styles>
+    <WrapPanel MaxWidth="680"
+               Margin="-10,0"
+               HorizontalAlignment="Center">
+      <WrapPanel.Styles>
         <Style Selector="Border">
-          <Setter Property="BorderThickness" Value="1"/>
-          <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"/>
-          <Setter Property="Padding" Value="2"/>
+          <Setter Property="BorderThickness" Value="1" />
+          <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumLowBrush}" />
+          <Setter Property="Padding" Value="2" />
+          <Setter Property="Margin" Value="10" />
+          <Setter Property="Width" Value="200" />
         </Style>
-      </StackPanel.Styles>
+      </WrapPanel.Styles>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock Margin="0 0 10 0" TextTrimming="CharacterEllipsis" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
-          <TextBlock Margin="0 0 10 0" TextTrimming="WordEllipsis" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
+        <StackPanel Spacing="8">
+          <TextBlock Margin="0,0,10,0"
+                     Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                     TextTrimming="CharacterEllipsis" />
+          <TextBlock Margin="0,0,10,0"
+                     Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                     TextTrimming="WordEllipsis" />
           <TextBlock Text="Left aligned text" TextAlignment="Left" />
           <TextBlock Text="Center aligned text" TextAlignment="Center" />
           <TextBlock Text="Right aligned text" TextAlignment="Right" />
         </StackPanel>
       </Border>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock
-            TextWrapping="Wrap"
-            Text="Multiline TextBlock with TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
+        <StackPanel Spacing="8">
+          <TextBlock Text="Multiline TextBlock with TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." TextWrapping="Wrap" />
         </StackPanel>
       </Border>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock Text="Custom font regular" FontWeight="Normal" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
-          <TextBlock Text="Custom font bold" FontWeight="Bold" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
-          <TextBlock Text="Custom font italic" FontWeight="Normal" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-Italic.ttf#Source Sans Pro"/>
-          <TextBlock Text="Custom font italic bold" FontWeight="Bold" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-*.ttf#Source Sans Pro"/>
+        <StackPanel Spacing="8">
+          <TextBlock FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"
+                     FontStyle="Normal"
+                     FontWeight="Normal"
+                     Text="Custom font regular" />
+          <TextBlock FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"
+                     FontStyle="Normal"
+                     FontWeight="Bold"
+                     Text="Custom font bold" />
+          <TextBlock FontFamily="/Assets/Fonts/SourceSansPro-Italic.ttf#Source Sans Pro"
+                     FontStyle="Italic"
+                     FontWeight="Normal"
+                     Text="Custom font italic" />
+          <TextBlock FontFamily="/Assets/Fonts/SourceSansPro-*.ttf#Source Sans Pro"
+                     FontStyle="Italic"
+                     FontWeight="Bold"
+                     Text="Custom font italic bold" />
         </StackPanel>
       </Border>
-    </StackPanel>
-    <StackPanel
-      Orientation="Horizontal"
-      Spacing="16"
-      HorizontalAlignment="Center"
-      Margin="0,16,0,0">
-      <StackPanel.Styles>
-        <Style Selector="Border">
-          <Setter Property="BorderThickness" Value="1"/>
-          <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumLowBrush}"/>
-          <Setter Property="Padding" Value="2"/>
-        </Style>
-      </StackPanel.Styles>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock TextDecorations="Underline" Text="Underline"/>
-          <TextBlock TextDecorations="Strikethrough" Text="Strikethrough"/>
-          <TextBlock TextDecorations="Overline" Text="Overline" />
-          <TextBlock TextDecorations="Baseline" Text="Baseline"/>
+        <StackPanel Spacing="8">
+          <TextBlock Text="Underline" TextDecorations="Underline" />
+          <TextBlock Text="Strikethrough" TextDecorations="Strikethrough" />
+          <TextBlock Text="Overline" TextDecorations="Overline" />
+          <TextBlock Text="Baseline" TextDecorations="Baseline" />
           <TextBlock Text="Custom TextDecorations">
             <TextBlock.TextDecorations>
               <TextDecorationCollection>
-                <TextDecoration
-                  Location="Overline"
-                  StrokeThicknessUnit="Pixel"
-                  StrokeThickness="2">
+                <TextDecoration Location="Overline"
+                                StrokeThickness="2"
+                                StrokeThicknessUnit="Pixel">
                   <TextDecoration.Stroke>
                     <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
                       <LinearGradientBrush.GradientStops>
-                        <GradientStop Offset="0" Color="Red"/>
-                        <GradientStop Offset="1" Color="Green"/>
+                        <GradientStop Offset="0" Color="Red" />
+                        <GradientStop Offset="1" Color="Green" />
                       </LinearGradientBrush.GradientStops>
                     </LinearGradientBrush>
                   </TextDecoration.Stroke>
                 </TextDecoration>
-                <TextDecoration
-                  Location="Strikethrough"
-                  StrokeThicknessUnit="Pixel"
-                  StrokeThickness="1">
+                <TextDecoration Location="Strikethrough"
+                                StrokeThickness="1"
+                                StrokeThicknessUnit="Pixel">
                   <TextDecoration.Stroke>
                     <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
                       <LinearGradientBrush.GradientStops>
-                        <GradientStop Offset="0" Color="Green"/>
-                        <GradientStop Offset="1" Color="Blue"/>
+                        <GradientStop Offset="0" Color="Green" />
+                        <GradientStop Offset="1" Color="Blue" />
                       </LinearGradientBrush.GradientStops>
                     </LinearGradientBrush>
                   </TextDecoration.Stroke>
                 </TextDecoration>
-                <TextDecoration
-                  Location="Underline"
-                  StrokeThicknessUnit="Pixel"
-                  StrokeThickness="2">
+                <TextDecoration Location="Underline"
+                                StrokeThickness="2"
+                                StrokeThicknessUnit="Pixel">
                   <TextDecoration.Stroke>
                     <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
                       <LinearGradientBrush.GradientStops>
-                        <GradientStop Offset="0" Color="Blue"/>
-                        <GradientStop Offset="1" Color="Red"/>
+                        <GradientStop Offset="0" Color="Blue" />
+                        <GradientStop Offset="1" Color="Red" />
                       </LinearGradientBrush.GradientStops>
                     </LinearGradientBrush>
                   </TextDecoration.Stroke>
@@ -107,19 +104,19 @@
         </StackPanel>
       </Border>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock Text="🏻 👌🏻"/>
+        <StackPanel Spacing="8">
+          <TextBlock Text="🏻 👌🏻" />
           <TextBlock Text="🏼 👌🏼" />
-          <TextBlock Text="🏽 👌🏽"/>
-          <TextBlock Text="🏾 👌🏾"/>
-          <TextBlock Text="🏿 👌🏿"/>
+          <TextBlock Text="🏽 👌🏽" />
+          <TextBlock Text="🏾 👌🏾" />
+          <TextBlock Text="🏿 👌🏿" />
         </StackPanel>
       </Border>
       <Border>
-        <StackPanel Width="200" Spacing="8">
-          <TextBlock Text="👪 👨‍👩‍👧 👨‍👩‍👧‍👦"/>
+        <StackPanel Spacing="8">
+          <TextBlock Text="👪 👨‍👩‍👧 👨‍👩‍👧‍👦" />
         </StackPanel>
       </Border>
-    </StackPanel>
+    </WrapPanel>
   </StackPanel>
 </UserControl>
diff --git a/samples/ControlCatalog/Pages/TextBoxPage.xaml b/samples/ControlCatalog/Pages/TextBoxPage.xaml
index 0a5ccdcfff..f15ac8ffd6 100644
--- a/samples/ControlCatalog/Pages/TextBoxPage.xaml
+++ b/samples/ControlCatalog/Pages/TextBoxPage.xaml
@@ -3,14 +3,11 @@
              x:Class="ControlCatalog.Pages.TextBoxPage"
              xmlns:sys="clr-namespace:System;assembly=netstandard">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <Label Classes="h1">TextBox</Label>
     <Label Classes="h2">A control into which the user can input text</Label>
 
-    <StackPanel Orientation="Horizontal"
-              Margin="0,16,0,0"
-              HorizontalAlignment="Center"
-              Spacing="16">
-      <StackPanel Orientation="Vertical" Spacing="8">
+    <WrapPanel Margin="-8,0"
+               HorizontalAlignment="Center">
+      <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
         <TextBox Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." Width="200"
                  FontFamily="Comic Sans MS"
                  Foreground="Blue">
@@ -21,7 +18,7 @@
           </TextBox.ContextFlyout>
         </TextBox>
         <TextBox Width="200" Watermark="ReadOnly" IsReadOnly="True" Text="This is read only"/>
-        <TextBox Width="200" Watermark="Numeric Watermark" x:Name="numericWatermark"/>
+        <TextBox Width="200" Watermark="Numeric with watermark" x:Name="numericWatermark"/>
         <TextBox Width="200"
                  Watermark="Floating Watermark"
                  UseFloatingWatermark="True"
@@ -47,11 +44,19 @@
                   SelectionStart="5" SelectionEnd="22"
                   SelectionBrush="Green" SelectionForegroundBrush="Yellow"/>
         <TextBox Width="200" Text="Custom caret brush" CaretBrush="DarkOrange"/>
+      </StackPanel>
 
+      <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
+        <TextBox AcceptsReturn="True" TextWrapping="Wrap" Width="200" Height="125"
+                 Text="Multiline TextBox with TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
+        <TextBox AcceptsReturn="True" Width="200" Height="125"
+                 Text="Multiline TextBox with no TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
+
+        <TextBox Classes="clearButton" Text="Clear Content" Width="200" FontWeight="Normal" FontStyle="Normal" Watermark="Watermark" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
         <TextBox Text="IME small font" Width="200"
-                 FontFamily="Comic Sans MS"
-                 FontSize="10"
-                 Foreground="Red"/>
+         FontFamily="Comic Sans MS"
+         FontSize="10"
+         Foreground="Red"/>
         <TextBox Text="IME large font" Width="200"
                  FontFamily="Comic Sans MS"
                  FontSize="22"
@@ -61,16 +66,7 @@
                  InputMethod.IsInputMethodEnabled="False"
                  Foreground="Red"/>
       </StackPanel>
-
-      <StackPanel Orientation="Vertical" Spacing="8">
-        <TextBox AcceptsReturn="True" TextWrapping="Wrap" Width="200" Height="125"
-                 Text="Multiline TextBox with TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
-        <TextBox AcceptsReturn="True" Width="200" Height="125"
-                 Text="Multiline TextBox with no TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
-
-        <TextBox Classes="clearButton" Text="Clear Content" Width="200" FontWeight="Normal" FontStyle="Normal" Watermark="Watermark" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
-      </StackPanel>
-      <StackPanel Orientation="Vertical" Spacing="8">
+      <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
         <Label Classes="h2" Target="{Binding #firstResMFont}">res_m fonts</Label>
         <TextBox Width="200" x:Name="firstResMFont" Text="Custom font regular" FontWeight="Normal" FontStyle="Normal" FontFamily="resm:ControlCatalog.Assets.Fonts?assembly=ControlCatalog#Source Sans Pro"/>
         <TextBox Width="200" Text="Custom font bold" FontWeight="Bold" FontStyle="Normal" FontFamily="resm:ControlCatalog.Assets.Fonts?assembly=ControlCatalog#Source Sans Pro"/>
@@ -78,14 +74,14 @@
         <TextBox Width="200" Text="Custom font italic bold" FontWeight="Bold" FontStyle="Italic" FontFamily="resm:ControlCatalog.Assets.Fonts.SourceSansPro-*.ttf?assembly=ControlCatalog#Source Sans Pro"/>
       </StackPanel>
 
-      <StackPanel Orientation="Vertical" Spacing="8">
+      <StackPanel Orientation="Vertical" Spacing="8" Margin="8">
         <Label Classes="h2" Target="{Binding #firstResFont}">_res fonts</Label>
         <TextBox Width="200" x:Name="firstResFont" Text="Custom font regular" FontWeight="Normal" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
         <TextBox Width="200" Text="Custom font bold" FontWeight="Bold" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
         <TextBox Width="200" Text="Custom font italic" FontWeight="Normal" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-Italic.ttf#Source Sans Pro"/>
         <TextBox Width="200" Text="Custom font italic bold" FontWeight="Bold" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-*.ttf#Source Sans Pro"/>
       </StackPanel>
-    </StackPanel>
+    </WrapPanel>
     <TextBox AcceptsReturn="True" TextWrapping="Wrap" Height="200" MaxWidth="400"
              FontFamily="avares://ControlCatalog/Assets/Fonts#WenQuanYi Micro Hei"
              Text="计算机科学（是系统性研究信息与计算的理论基础以及它们在计算机系统中如何实现与应用的实用技术的学科。它通常被形容为对那些创造、描述以及转换信息的算法处理的系统研究。计算机科学包含很多分支领域；有些强调特定结果的计算，比如计算机图形学；而有些是探討计算问题的性质，比如计算复杂性理论；还有一些领域專注于怎样实现计算，比如程式語言理論是研究描述计算的方法，而程式设计是应用特定的程式語言解决特定的计算问题，人机交互则是專注于怎样使计算机和计算变得有用、好用，以及随时随地为人所用。&#xD;&#xD;有时公众会误以为计算机科学就是解决计算机问题的事业（比如信息技术），或者只是与使用计算机的经验有关，如玩游戏、上网或者文字处理。其实计算机科学所关注的，不仅仅是去理解实现类似游戏、浏览器这些软件的程序的性质，更要通过现有的知识创造新的程序或者改进已有的程序。" />
diff --git a/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml b/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
index 7a65275a8e..4db755b6fc 100644
--- a/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
+++ b/samples/ControlCatalog/Pages/ToggleSwitchPage.xaml
@@ -1,7 +1,8 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ToggleSwitchPage" Margin="5">
-  <StackPanel Width="500" HorizontalAlignment="Center">
+  <StackPanel MaxWidth="500"
+              HorizontalAlignment="Stretch">
     <TextBlock Text="Simple ToggleSwitch" Classes="header"/>
     <Border Classes="Thin">
       <StackPanel>
diff --git a/samples/ControlCatalog/Pages/ToolTipPage.xaml b/samples/ControlCatalog/Pages/ToolTipPage.xaml
index de23c7a169..013c176bca 100644
--- a/samples/ControlCatalog/Pages/ToolTipPage.xaml
+++ b/samples/ControlCatalog/Pages/ToolTipPage.xaml
@@ -3,7 +3,6 @@
              x:Class="ControlCatalog.Pages.ToolTipPage">
     <StackPanel Orientation="Vertical"
                 Spacing="4">
-        <TextBlock Classes="h1">ToolTip</TextBlock>
         <TextBlock Classes="h2">A control which pops up a hint when a control is hovered</TextBlock>
 
         <Grid RowDefinitions="Auto,Auto,Auto"
diff --git a/samples/ControlCatalog/Pages/TreeViewPage.xaml b/samples/ControlCatalog/Pages/TreeViewPage.xaml
index 6d99132680..31f4d73581 100644
--- a/samples/ControlCatalog/Pages/TreeViewPage.xaml
+++ b/samples/ControlCatalog/Pages/TreeViewPage.xaml
@@ -2,7 +2,6 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.TreeViewPage">
   <StackPanel Orientation="Vertical" Spacing="4">
-    <TextBlock Classes="h1">TreeView</TextBlock>
     <TextBlock Classes="h2">Displays a hierachical tree of data.</TextBlock>
 
     <StackPanel Orientation="Horizontal"
diff --git a/samples/ControlCatalog/Pages/ViewboxPage.xaml b/samples/ControlCatalog/Pages/ViewboxPage.xaml
index ef802db33e..81e5046636 100644
--- a/samples/ControlCatalog/Pages/ViewboxPage.xaml
+++ b/samples/ControlCatalog/Pages/ViewboxPage.xaml
@@ -4,7 +4,6 @@
 
     <Grid RowDefinitions="Auto,*,*">
         <StackPanel Orientation="Vertical" Spacing="4">
-            <TextBlock Classes="h1">Viewbox</TextBlock>
             <TextBlock Classes="h2">A control used to scale single child.</TextBlock>
         </StackPanel>
 

From a998f16832987aad1247baa3e0db71de23fada3e Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sun, 12 Dec 2021 20:46:44 -0500
Subject: [PATCH 2/4] Some default theme fixes

---
 src/Avalonia.Themes.Default/SplitView.xaml    | 33 +++++++++++++-----
 .../Controls/SplitView.xaml                   | 34 +++++++++++++------
 .../Controls/TabItem.xaml                     |  2 +-
 .../Controls/TabStripItem.xaml                |  2 +-
 4 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/Avalonia.Themes.Default/SplitView.xaml b/src/Avalonia.Themes.Default/SplitView.xaml
index 18da3edb46..10eda2d9cd 100644
--- a/src/Avalonia.Themes.Default/SplitView.xaml
+++ b/src/Avalonia.Themes.Default/SplitView.xaml
@@ -1,14 +1,29 @@
 <Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="using:System">
+  <Design.PreviewWith>
+    <Border Width="400" Height="400">
+      <SplitView DisplayMode="Inline"
+                 IsPaneOpen="True">
+        <SplitView.Pane>
+          <Border Background="Green" />
+        </SplitView.Pane>
+        <SplitView.Content>
+          <Border Background="Blue" />
+        </SplitView.Content>
+      </SplitView>
+    </Border>
+  </Design.PreviewWith>
 
   <Styles.Resources>
     <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
     <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
     <SolidColorBrush x:Key="SplitViewLightDismissOverlayBackground" Color="{DynamicResource ThemeControlLowColor}" Opacity="0.6"/>
-    <!-- Not used here (directly) since they're strings, but preserving for reference
-        <x:String x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</x:String>
-        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>
-        <x:String x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</x:String>-->
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+    <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
+    <!-- Not used here (directly), but preserving for reference
+        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>-->
   </Styles.Resources>
 
   <Style Selector="SplitView">
@@ -170,7 +185,7 @@
   <Style Selector="SplitView:open /template/ Panel#PART_PaneRoot">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Width" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
@@ -178,7 +193,7 @@
   <Style Selector="SplitView:open /template/ Rectangle#LightDismissLayer">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Opacity" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Opacity" Value="1.0"/>
@@ -187,7 +202,7 @@
   <Style Selector="SplitView:closed /template/ Panel#PART_PaneRoot">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Width" Duration="00:00:00.1" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
@@ -195,7 +210,7 @@
   <Style Selector="SplitView:closed /template/ Rectangle#LightDismissLayer">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Opacity" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Opacity" Value="0.0"/>
diff --git a/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml b/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
index 7d6f7a9b9a..55d46e32a1 100644
--- a/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/SplitView.xaml
@@ -1,14 +1,28 @@
 <Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:sys="using:System">
+  <Design.PreviewWith>
+    <Border Width="400" Height="400">
+      <SplitView DisplayMode="Inline"
+                 IsPaneOpen="True">
+        <SplitView.Pane>
+          <Border Background="Green" />
+        </SplitView.Pane>
+        <SplitView.Content>
+          <Border Background="Blue" />
+        </SplitView.Content>
+      </SplitView>
+    </Border>
+  </Design.PreviewWith>
 
   <Styles.Resources>
     <x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
     <x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
-
-    <!-- Not used here (directly) since they're strings, but preserving for reference
-        <x:String x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</x:String>
-        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>
-        <x:String x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</x:String>-->
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
+    <sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
+    <Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
+    <!-- Not used here (directly), but preserving for reference
+        <x:String x:Key="SplitViewPaneAnimationOpenPreDuration">00:00:00.19999</x:String>-->
   </Styles.Resources>
 
   <Style Selector="SplitView">
@@ -170,7 +184,7 @@
   <Style Selector="SplitView:open /template/ Panel#PART_PaneRoot">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Width" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
@@ -178,7 +192,7 @@
   <Style Selector="SplitView:open /template/ Rectangle#LightDismissLayer">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Opacity" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Opacity" Value="1.0"/>
@@ -187,7 +201,7 @@
   <Style Selector="SplitView:closed /template/ Panel#PART_PaneRoot">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Width" Duration="00:00:00.1" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Width" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
@@ -195,7 +209,7 @@
   <Style Selector="SplitView:closed /template/ Rectangle#LightDismissLayer">
     <Setter Property="Transitions">
       <Transitions>
-        <DoubleTransition Property="Opacity" Duration="00:00:00.2" Easing="0.1,0.9,0.2,1.0" />
+        <DoubleTransition Property="Opacity" Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" Easing="{StaticResource SplitViewPaneAnimationEasing}" />
       </Transitions>
     </Setter>
     <Setter Property="Opacity" Value="0.0"/>
diff --git a/src/Avalonia.Themes.Fluent/Controls/TabItem.xaml b/src/Avalonia.Themes.Fluent/Controls/TabItem.xaml
index f821bb07e6..f3e35b6774 100644
--- a/src/Avalonia.Themes.Fluent/Controls/TabItem.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/TabItem.xaml
@@ -85,7 +85,7 @@
   </Style>
 
   <!-- Selected Pressed state -->
-  <Style Selector="TabItem:pressed /template/ Border#PART_LayoutRoot">
+  <Style Selector="TabItem:selected:pressed /template/ Border#PART_LayoutRoot">
     <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
   </Style>
diff --git a/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml b/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml
index f9adaf715b..0bcffc52f7 100644
--- a/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/TabStripItem.xaml
@@ -93,7 +93,7 @@
   </Style>
 
   <!--  Selected Pressed state  -->
-  <Style Selector="TabStripItem:pressed /template/ Border#PART_LayoutRoot">
+  <Style Selector="TabStripItem:selected:pressed /template/ Border#PART_LayoutRoot">
     <Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
     <Setter Property="TextBlock.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
   </Style>

From cbbe8f77ec7ce17d4ee07265780af13f9dd348f3 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sun, 12 Dec 2021 20:47:37 -0500
Subject: [PATCH 3/4] Implement HamburgerMenu control to be used in repo
 samples

---
 Avalonia.sln                                  |  29 +-
 samples/ControlCatalog/App.xaml               |   2 +-
 samples/ControlCatalog/ControlCatalog.csproj  |   1 +
 samples/ControlCatalog/MainView.xaml          | 262 ++++++++++++------
 samples/ControlCatalog/MainView.xaml.cs       |  22 +-
 samples/ControlCatalog/MainWindow.xaml        |  12 +-
 samples/ControlCatalog/MainWindow.xaml.cs     |  26 --
 samples/ControlCatalog/SideBar.xaml           |  84 ------
 samples/RenderDemo/App.xaml                   |  15 +-
 samples/RenderDemo/MainWindow.xaml            | 121 ++++----
 samples/RenderDemo/RenderDemo.csproj          |   1 +
 samples/RenderDemo/SideBar.xaml               |  67 -----
 samples/SampleControls/ControlSamples.csproj  |  23 ++
 .../HamburgerMenu/HamburgerMenu.cs            |  77 +++++
 .../HamburgerMenu/HamburgerMenu.xaml          | 242 ++++++++++++++++
 15 files changed, 634 insertions(+), 350 deletions(-)
 delete mode 100644 samples/ControlCatalog/SideBar.xaml
 delete mode 100644 samples/RenderDemo/SideBar.xaml
 create mode 100644 samples/SampleControls/ControlSamples.csproj
 create mode 100644 samples/SampleControls/HamburgerMenu/HamburgerMenu.cs
 create mode 100644 samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml

diff --git a/Avalonia.sln b/Avalonia.sln
index a5707d086f..a288bacbde 100644
--- a/Avalonia.sln
+++ b/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}
diff --git a/samples/ControlCatalog/App.xaml b/samples/ControlCatalog/App.xaml
index 7ae7b4d3bb..227b31bf20 100644
--- a/samples/ControlCatalog/App.xaml
+++ b/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>
diff --git a/samples/ControlCatalog/ControlCatalog.csproj b/samples/ControlCatalog/ControlCatalog.csproj
index 53ad213d92..7864459e77 100644
--- a/samples/ControlCatalog/ControlCatalog.csproj
+++ b/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" />
diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index f61b59e6cd..2ae944e6d4 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/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>
diff --git a/samples/ControlCatalog/MainView.xaml.cs b/samples/ControlCatalog/MainView.xaml.cs
index c84f2f06b6..163547ac4d 100644
--- a/samples/ControlCatalog/MainView.xaml.cs
+++ b/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)
diff --git a/samples/ControlCatalog/MainWindow.xaml b/samples/ControlCatalog/MainWindow.xaml
index 375345f64e..1e4bf2de38 100644
--- a/samples/ControlCatalog/MainWindow.xaml
+++ b/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>
diff --git a/samples/ControlCatalog/MainWindow.xaml.cs b/samples/ControlCatalog/MainWindow.xaml.cs
index a9900471c5..dd62698cc7 100644
--- a/samples/ControlCatalog/MainWindow.xaml.cs
+++ b/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);
         }
     }
diff --git a/samples/ControlCatalog/SideBar.xaml b/samples/ControlCatalog/SideBar.xaml
deleted file mode 100644
index 2b5215a3fe..0000000000
--- a/samples/ControlCatalog/SideBar.xaml
+++ /dev/null
@@ -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>
diff --git a/samples/RenderDemo/App.xaml b/samples/RenderDemo/App.xaml
index 7cdcea2e1d..66d97a6444 100644
--- a/samples/RenderDemo/App.xaml
+++ b/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>
diff --git a/samples/RenderDemo/MainWindow.xaml b/samples/RenderDemo/MainWindow.xaml
index f37df56b73..a4c6299278 100644
--- a/samples/RenderDemo/MainWindow.xaml
+++ b/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>
diff --git a/samples/RenderDemo/RenderDemo.csproj b/samples/RenderDemo/RenderDemo.csproj
index eed6fa9e89..54d5ca4b3b 100644
--- a/samples/RenderDemo/RenderDemo.csproj
+++ b/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" />
diff --git a/samples/RenderDemo/SideBar.xaml b/samples/RenderDemo/SideBar.xaml
deleted file mode 100644
index b82a7b0514..0000000000
--- a/samples/RenderDemo/SideBar.xaml
+++ /dev/null
@@ -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>
diff --git a/samples/SampleControls/ControlSamples.csproj b/samples/SampleControls/ControlSamples.csproj
new file mode 100644
index 0000000000..6eaf11a0fc
--- /dev/null
+++ b/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>
diff --git a/samples/SampleControls/HamburgerMenu/HamburgerMenu.cs b/samples/SampleControls/HamburgerMenu/HamburgerMenu.cs
new file mode 100644
index 0000000000..bbfd3d87ca
--- /dev/null
+++ b/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;
+                }
+            }
+        }
+    }
+}
diff --git a/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml b/samples/SampleControls/HamburgerMenu/HamburgerMenu.xaml
new file mode 100644
index 0000000000..1aa7f8ea04
--- /dev/null
+++ b/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>

From ec23173a0a76fb9042143b49f58718fbdbffc977 Mon Sep 17 00:00:00 2001
From: Max Katz <maxkatz6@outlook.com>
Date: Sun, 12 Dec 2021 21:25:15 -0500
Subject: [PATCH 4/4] Use enum items array instead of strings in control
 catalog settings

---
 samples/ControlCatalog/MainView.xaml          | 21 +++++++-----
 samples/ControlCatalog/MainView.xaml.cs       | 32 +++++++++----------
 samples/ControlCatalog/Models/CatalogTheme.cs | 14 ++++++++
 3 files changed, 43 insertions(+), 24 deletions(-)
 create mode 100644 samples/ControlCatalog/Models/CatalogTheme.cs

diff --git a/samples/ControlCatalog/MainView.xaml b/samples/ControlCatalog/MainView.xaml
index 2ae944e6d4..3d869bb723 100644
--- a/samples/ControlCatalog/MainView.xaml
+++ b/samples/ControlCatalog/MainView.xaml
@@ -2,7 +2,8 @@
              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">
+             xmlns:pages="clr-namespace:ControlCatalog.Pages"
+             xmlns:models="clr-namespace:ControlCatalog.Models">
   <Grid>
     <Grid.Styles>
       <Style Selector="TextBlock.h2">
@@ -156,17 +157,21 @@
             <ComboBox x:Name="Decorations"
                       HorizontalAlignment="Stretch"
                       SelectedIndex="0">
-              <ComboBoxItem>No Decorations</ComboBoxItem>
-              <ComboBoxItem>Border Only</ComboBoxItem>
-              <ComboBoxItem>Full Decorations</ComboBoxItem>
+              <ComboBox.Items>
+                <SystemDecorations>None</SystemDecorations>
+                <SystemDecorations>BorderOnly</SystemDecorations>
+                <SystemDecorations>Full</SystemDecorations>
+              </ComboBox.Items>
             </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.Items>
+                <models:CatalogTheme>FluentLight</models:CatalogTheme>
+                <models:CatalogTheme>FluentDark</models:CatalogTheme>
+                <models:CatalogTheme>DefaultLight</models:CatalogTheme>
+                <models:CatalogTheme>DefaultDark</models:CatalogTheme>
+              </ComboBox.Items>
             </ComboBox>
             <ComboBox x:Name="TransparencyLevels"
                       HorizontalAlignment="Stretch"
diff --git a/samples/ControlCatalog/MainView.xaml.cs b/samples/ControlCatalog/MainView.xaml.cs
index 163547ac4d..abedda3c85 100644
--- a/samples/ControlCatalog/MainView.xaml.cs
+++ b/samples/ControlCatalog/MainView.xaml.cs
@@ -10,6 +10,7 @@ using Avalonia.Media;
 using Avalonia.Media.Immutable;
 using Avalonia.Platform;
 using ControlCatalog.Pages;
+using ControlCatalog.Models;
 
 namespace ControlCatalog
 {
@@ -40,28 +41,27 @@ namespace ControlCatalog
             var themes = this.Find<ComboBox>("Themes");
             themes.SelectionChanged += (sender, e) =>
             {
-                switch (themes.SelectedIndex)
+                if (themes.SelectedItem is CatalogTheme theme)
                 {
-                    case 0:
-                        Application.Current.Styles[0] = App.FluentLight;
-                        break;
-                    case 1:
-                        Application.Current.Styles[0] = App.FluentDark;
-                        break;
-                    case 2:
-                        Application.Current.Styles[0] = App.DefaultLight;
-                        break;
-                    case 3:
-                        Application.Current.Styles[0] = App.DefaultDark;
-                        break;
+                    Application.Current.Styles[0] = theme switch
+                    {
+                        CatalogTheme.FluentLight => App.FluentLight,
+                        CatalogTheme.FluentDark => App.FluentDark,
+                        CatalogTheme.DefaultLight => App.DefaultLight,
+                        CatalogTheme.DefaultDark => App.DefaultDark,
+                        _ => Application.Current.Styles[0]
+                    };
                 }
-            };            
+            };
 
             var decorations = this.Find<ComboBox>("Decorations");
             decorations.SelectionChanged += (sender, e) =>
             {
-                if (VisualRoot is Window window)
-                    window.SystemDecorations = (SystemDecorations)decorations.SelectedIndex;
+                if (VisualRoot is Window window
+                    && decorations.SelectedItem is SystemDecorations systemDecorations)
+                {
+                    window.SystemDecorations = systemDecorations;
+                }
             };
 
             var transparencyLevels = this.Find<ComboBox>("TransparencyLevels");
diff --git a/samples/ControlCatalog/Models/CatalogTheme.cs b/samples/ControlCatalog/Models/CatalogTheme.cs
new file mode 100644
index 0000000000..f7be8e0014
--- /dev/null
+++ b/samples/ControlCatalog/Models/CatalogTheme.cs
@@ -0,0 +1,14 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ControlCatalog.Models
+{
+    public enum CatalogTheme
+    {
+        FluentLight,
+        FluentDark,
+        DefaultLight,
+        DefaultDark
+    }
+}