Update ControlCatalog to use the Page system (#21044)

* replace hamburger view with drawer page. use ContentPage in control catalog

* Added Icons

* fix listbox and carousel page

* make MainView drawer page

* add PageNavigationHost to control catalog

---------

Co-authored-by: Javier Suárez Ruiz <javiersuarezruiz@hotmail.com>

samples/ControlCatalog/App.xaml

@@ -8,7 +8,8 @@
     <ResourceDictionary>
       <!-- Custom controls defined in other assemblies -->
       <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://ControlSamples/HamburgerMenu/HamburgerMenu.xaml" />
+        <ResourceInclude Source="avares://ControlCatalog/ScrollPage.xaml"/>
+        <ResourceInclude Source="avares://ControlCatalog/NavHeaderItem.xaml"/>
       </ResourceDictionary.MergedDictionaries>
 
       <!-- Resources used only in the control catalog -->

samples/ControlCatalog/App.xaml.cs

@@ -18,7 +18,7 @@ namespace ControlCatalog
         private FluentTheme? _fluentTheme;
         private SimpleTheme? _simpleTheme;
         private IStyle? _colorPickerFluent, _colorPickerSimple;
-        
+
         public App()
         {
             DataContext = new ApplicationViewModel();
@@ -34,7 +34,7 @@ namespace ControlCatalog
             _simpleTheme = (SimpleTheme)Resources["SimpleTheme"]!;
             _colorPickerFluent = (IStyle)Resources["ColorPickerFluent"]!;
             _colorPickerSimple = (IStyle)Resources["ColorPickerSimple"]!;
-            
+
             SetCatalogThemes(CatalogTheme.Fluent);
         }
 
@@ -44,16 +44,22 @@ namespace ControlCatalog
             {
                 desktopLifetime.MainWindow = new MainWindow { DataContext = new MainWindowViewModel() };
             }
-            else if(ApplicationLifetime is IActivityApplicationLifetime singleViewFactoryApplicationLifetime)
+            else if (ApplicationLifetime is IActivityApplicationLifetime singleViewFactoryApplicationLifetime)
             {
-                singleViewFactoryApplicationLifetime.MainViewFactory = () => new MainView { DataContext = new MainWindowViewModel() };
+                singleViewFactoryApplicationLifetime.MainViewFactory = () => new PageNavigationHost()
+                {
+                    Page = new MainView { DataContext = new MainWindowViewModel() }
+                };
             }
             else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewLifetime)
             {
-                singleViewLifetime.MainView = new MainView { DataContext = new MainWindowViewModel() };
+                singleViewLifetime.MainView = new PageNavigationHost()
+                {
+                    Page = new MainView { DataContext = new MainWindowViewModel() }
+                };
             }
 
-            if (this.TryGetFeature<IActivatableLifetime>() is {} activatableApplicationLifetime)
+            if (this.TryGetFeature<IActivatableLifetime>() is { } activatableApplicationLifetime)
             {
                 activatableApplicationLifetime.Activated += (sender, args) =>
                     Console.WriteLine($"App activated: {args.Kind}");
@@ -99,14 +105,14 @@ namespace ControlCatalog
         }
 
         private CatalogTheme _prevTheme;
-        public static CatalogTheme CurrentTheme => ((App)Current!)._prevTheme; 
+        public static CatalogTheme CurrentTheme => ((App)Current!)._prevTheme;
         public static void SetCatalogThemes(CatalogTheme theme)
         {
             var app = (App)Current!;
             var prevTheme = app._prevTheme;
             app._prevTheme = theme;
             var shouldReopenWindow = prevTheme != theme;
-            
+
             if (app._themeStylesContainer.Count == 0)
             {
                 app._themeStylesContainer.Add(new Style());
@@ -130,18 +136,27 @@ namespace ControlCatalog
                 if (app.ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktopLifetime)
                 {
                     var oldWindow = desktopLifetime.MainWindow;
-                    var newWindow = new MainWindow();
+                    var newWindow = new MainWindow()
+                    {
+                        DataContext = new MainWindowViewModel()
+                    };
                     desktopLifetime.MainWindow = newWindow;
                     newWindow.Show();
                     oldWindow?.Close();
                 }
                 else if (app.ApplicationLifetime is IActivityApplicationLifetime singleViewFactoryApplicationLifetime)
                 {
-                    singleViewFactoryApplicationLifetime.MainViewFactory = () => new MainView { DataContext = new MainWindowViewModel() };
+                    singleViewFactoryApplicationLifetime.MainViewFactory = () => new PageNavigationHost()
+                    {
+                        Page = new MainView { DataContext = new MainWindowViewModel() }
+                    };
                 }
                 else if (app.ApplicationLifetime is ISingleViewApplicationLifetime singleViewLifetime)
                 {
-                    singleViewLifetime.MainView = new MainView();
+                    singleViewLifetime.MainView = new PageNavigationHost()
+                    {
+                        Page = new MainView { DataContext = new MainWindowViewModel() }
+                    };
                 }
             }
         }

samples/ControlCatalog/ControlCatalog.csproj

@@ -14,6 +14,7 @@
     <AvaloniaResource Include="Assets\**\*" />
   </ItemGroup>
   <ItemGroup>
+    <None Remove="Assets\Icon.png" />
     <None Remove="Assets\image1.jpg" />
     <None Remove="Assets\image2.jpg" />
     <None Remove="Assets\image3.jpg" />
@@ -38,7 +39,12 @@
     <ProjectReference Include="..\..\src\Avalonia.Fonts.Inter\Avalonia.Fonts.Inter.csproj" />
     <ProjectReference Include="..\..\src\Skia\Avalonia.Skia\Avalonia.Skia.csproj" />
     <ProjectReference Include="..\MiniMvvm\MiniMvvm.csproj" />
-    <ProjectReference Include="..\SampleControls\ControlSamples.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <AvaloniaXaml Update="NavHeaderItem.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </AvaloniaXaml>
   </ItemGroup>
 
   <Import Project="..\..\build\BuildTargets.targets" />

samples/ControlCatalog/Icons.cs

@@ -0,0 +1,194 @@
+namespace ControlCatalog
+{
+    internal static class Icons
+    {
+        // Layers/Composition
+        public const string Layers = "M12,16L19.36,10.27L21,9L12,2L3,9L4.63,10.27M12,18.54L4.62,12.81L3,14.07L12,21.07L21,14.07L19.37,12.8";
+
+        // Keyboard
+        public const string Keyboard = "M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z";
+
+        // Blur/Acrylic
+        public const string Blur = "M14.5,10C16.43,10 18,8.43 18,6.5C18,4.57 16.43,3 14.5,3C12.57,3 11,4.57 11,6.5C11,8.43 12.57,10 14.5,10M14.5,4A2.5,2.5 0 0,1 17,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,4M8.5,14C10.43,14 12,12.43 12,10.5C12,8.57 10.43,7 8.5,7C6.57,7 5,8.57 5,10.5C5,12.43 6.57,14 8.5,14M8.5,8A2.5,2.5 0 0,1 11,10.5A2.5,2.5 0 0,1 8.5,13A2.5,2.5 0 0,1 6,10.5A2.5,2.5 0 0,1 8.5,8M14.5,16A4.5,4.5 0 0,0 10,20.5A4.5,4.5 0 0,0 14.5,25A4.5,4.5 0 0,0 19,20.5A4.5,4.5 0 0,0 14.5,16M14.5,24A3.5,3.5 0 0,1 11,20.5A3.5,3.5 0 0,1 14.5,17A3.5,3.5 0 0,1 18,20.5A3.5,3.5 0 0,1 14.5,24Z";
+
+        // Adorner/Sparkle
+        public const string Sparkle = "M12,1L9,9L1,12L9,15L12,23L15,15L23,12L15,9";
+
+        // Text/AutoComplete
+        public const string TextInput = "M20,21H4V3H20V21M6,9H14V7H6V9M6,13H18V11H6V13M6,17H14V15H6V17Z";
+
+        // Border/Square
+        public const string Border = "M4,4H20V20H4V4M6,8V6H8V8H6M6,12V10H8V12H6M6,16V14H8V16H6M6,20V18H8V20H6M10,20V18H12V20H10M14,20V18H16V20H14M18,20V18H20V20H18M18,16V14H20V16H18M18,12V10H20V12H18M18,8V6H20V8H18M14,8V6H16V8H14M10,8V6H12V8H10Z";
+
+        // Lightning/Cache
+        public const string Lightning = "M11,21H7L13,3H17L14,10H20L11,21Z";
+
+        // Cursor Click/Button
+        public const string CursorClick = "M10.76,8.69A0.76,0.76 0 0,0 10,9.45V20.9C10,21.32 10.34,21.66 10.76,21.66C10.95,21.66 11.11,21.6 11.24,21.5L13.15,19.95L14.81,23.57C14.94,23.84 15.21,24 15.5,24C15.62,24 15.74,23.97 15.85,23.92L17.28,23.26C17.69,23.07 17.86,22.59 17.66,22.17L16,18.54L18.44,18.19C18.87,18.13 19.1,17.73 18.91,17.37L12.1,8.89C11.95,8.76 11.79,8.69 10.76,8.69M15,10V8H20V10H15M13.83,4.76L16.66,1.93L18.07,3.34L15.24,6.17L13.83,4.76M10,0V5H8V0H10M3.93,14.66L6.76,11.83L8.17,13.24L5.34,16.07L3.93,14.66M3.93,3.34L5.34,1.93L8.17,4.76L6.76,6.17L3.93,3.34M7,10H2V8H7V10Z";
+
+        // Spinner/ButtonSpinner
+        public const string Spinner = "M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z";
+
+        // Calendar
+        public const string Calendar = "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M9,15H7V13H9V15M13,15H11V13H13V15M17,15H15V13H17V15M9,11H7V9H9V11M13,11H11V9H13V11M17,11H15V9H17V11Z";
+
+        // Canvas/Artboard
+        public const string Canvas = "M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z";
+
+        // Command/Terminal
+        public const string Terminal = "M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z";
+
+        // Slides/Carousel
+        public const string Slides = "M2,6H6V18H2V6M7,6H17V18H7V6M18,6H22V18H18V6Z";
+
+        // Checkbox
+        public const string Checkbox = "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8";
+
+        // Clipboard
+        public const string Clipboard = "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3";
+
+        // Palette/Color
+        public const string Palette = "M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12Z";
+
+        // Dropdown/ComboBox
+        public const string Dropdown = "M7,10L12,15L17,10H7Z";
+
+        // Container/Box
+        public const string Container = "M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z";
+
+        // Document/Page
+        public const string Document = "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z";
+
+        // Menu/Context
+        public const string Menu = "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z";
+
+        // Cursor/Pointer
+        public const string Cursor = "M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.39,12.92 18.83,13.03L14.83,13.78L17,18.5C17.24,19 17,19.59 16.5,19.83L13.64,21.97Z";
+
+        // Brush/Drawing
+        public const string Brush = "M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z";
+
+        // Grid/Table
+        public const string Grid = "M10,4V8H14V4H10M16,4V8H20V4H16M16,10V14H20V10H16M16,16V20H20V16H16M14,20V16H10V20H14M8,20V16H4V20H8M8,14V10H4V14H8M8,8V4H4V8H8M10,14H14V10H10V14Z";
+
+        // Shield/Validation
+        public const string Shield = "M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z";
+
+        // Clock
+        public const string Clock = "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z";
+
+        // Dialog/Message
+        public const string Dialog = "M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z";
+
+        // DragDrop/Move
+        public const string DragDrop = "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z";
+
+        // Sidebar/Drawer
+        public const string Drawer = "M3,2H21A1,1 0 0,1 22,3V21A1,1 0 0,1 21,22H3A1,1 0 0,1 2,21V3A1,1 0 0,1 3,2M10,4V20H20V4H10M4,4V20H8V4H4Z";
+
+        // Expand
+        public const string Expand = "M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z";
+
+        // Flyout/Popup
+        public const string Flyout = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M7,9H10V7H7V9M7,13H17V11H7V13M7,17H14V15H7V17Z";
+
+        // Target/Focus
+        public const string Target = "M12,8A4,4 0 0,0 8,12A4,4 0 0,0 12,16A4,4 0 0,0 16,12A4,4 0 0,0 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z";
+
+        // Gesture/Touch
+        public const string Gesture = "M5,15A2,2 0 0,0 3,17V19H7V17A2,2 0 0,0 5,15M5,11A6,6 0 0,0 -1,17H1A4,4 0 0,1 5,13V11M5,7C0.03,7 -4,11.03 -4,16V17H-2V16C-2,12.13 1.13,9 5,9V7M20.5,9.5L12,18L8.5,14.5L7.08,15.91L12,20.84L21.92,10.91L20.5,9.5Z";
+
+        // Image/Photo
+        public const string Image = "M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z";
+
+        // Tag/Label
+        public const string Tag = "M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.45 21.77,11.95 21.41,11.58Z";
+
+        // Transform/Rotate
+        public const string Transform = "M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V5.07C7.06,5.56 4,8.92 4,12.95C4,17.18 7.32,20.56 11.46,20.93C11.64,20.95 11.82,20.97 12,20.97C12.18,20.97 12.36,20.95 12.54,20.93C12.69,20.92 12.83,20.89 13,20.87V18.9C12.82,18.92 12.65,18.95 12.47,18.95C12.32,18.96 12.16,18.97 12,18.97C8.42,18.97 5.53,16.12 5.53,12.58C5.53,9.36 7.88,6.67 11,6.15V10L15.55,5.55Z";
+
+        // List
+        public const string List = "M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z";
+
+        // Bell/Notification
+        public const string Bell = "M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21";
+
+        // Number/Hash
+        public const string Number = "M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.47,9L8.41,15H14.41L15.47,9H9.47Z";
+
+        // Cube/3D
+        public const string Cube = "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z";
+
+        // Dots/Pagination
+        public const string Dots = "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z";
+
+        // Info/Information
+        public const string Info = "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
+
+        // Progress/Loading
+        public const string Progress = "M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37Z";
+
+        // Radio
+        public const string Radio = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
+
+        // Refresh
+        public const string Refresh = "M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z";
+
+        // Layout/Grid
+        public const string Layout = "M19,11H13V5H19M19,19H13V13H19M11,11H5V5H11M11,19H5V13H11M3,3V21H21V3";
+
+        // Scroll
+        public const string Scroll = "M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z";
+
+        // Slider/Tune
+        public const string Slider = "M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z";
+
+        // Split/SplitView
+        public const string Split = "M18,4H6C4.89,4 4,4.89 4,6V18A2,2 0 0,0 6,20H18A2,2 0 0,0 20,18V6C20,4.89 19.1,4 18,4M18,6V18H13V6H18Z";
+
+        // Tab
+        public const string Tab = "M21,3H3C1.89,3 1,3.89 1,5V19A2,2 0 0,0 3,21H21C22.1,21 23,20.1 23,19V5C23,3.89 22.1,3 21,3M21,19H3V5H13V9H21V19Z";
+
+        // Theme/Palette
+        public const string Theme = "M12,18V6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+
+        // Toggle/Switch
+        public const string Toggle = "M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z";
+
+        // Tooltip/Info bubble
+        public const string Tooltip = "M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2M11,15H13V13H11V15M11,11H13V5H11V11Z";
+
+        // Animation/Transition
+        public const string Transition = "M2,5.27L3.28,4L20,20.72L18.73,22L12.73,16H7V19L3,15L7,11V14H9.73L5,9.27V14H3V5.27M21,9L17,5V8H14V10H17V13L21,9M17,17V14H15V17H17Z";
+
+        // Tree/Hierarchy
+        public const string Tree = "M15,20A1,1 0 0,0 16,19V4H8V19A1,1 0 0,0 9,20H2V22H22V20H15Z";
+
+        // Viewbox/Resize
+        public const string Viewbox = "M5,15H3V19A2,2 0 0,0 5,21H9V19H5M5,5H9V3H5A2,2 0 0,0 3,5V9H5M19,3H15V5H19V9H21V5A2,2 0 0,0 19,3M19,19H15V21H19A2,2 0 0,0 21,19V15H19";
+
+        // Puzzle/Embed
+        public const string Puzzle = "M20.5,11H19V7C19,5.89 18.1,5 17,5H13V3.5A2.5,2.5 0 0,0 10.5,1A2.5,2.5 0 0,0 8,3.5V5H4A2,2 0 0,0 2,7V10.8H3.5C5.04,10.8 6.2,11.96 6.2,13.5C6.2,15.04 5.04,16.2 3.5,16.2H2V20A2,2 0 0,0 4,22H7.8V20.5C7.8,18.96 8.96,17.8 10.5,17.8C12.04,17.8 13.2,18.96 13.2,20.5V22H17A2,2 0 0,0 19,20V16H20.5A2.5,2.5 0 0,0 23,13.5A2.5,2.5 0 0,0 20.5,11Z";
+
+        // Window/Application
+        public const string Window = "M4,4H20V20H4V4M6,8V18H18V8H6Z";
+
+        // Header/Title
+        public const string Header = "M3,4H5V10H9V4H11V18H9V12H5V18H3V4M13,8H15.31L15.63,5H17.63L17.31,8H19.31L19.63,5H21.63L21.31,8H23V10H21.1L20.9,12H23V14H20.69L20.37,17H18.37L18.69,14H16.69L16.37,17H14.37L14.69,14H13V12H14.9L15.1,10H13V8M17.1,10L16.9,12H18.9L19.1,10H17.1Z";
+
+        // Monitor/Screen
+        public const string Monitor = "M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z";
+
+        // Navigation/Compass
+        public const string Navigation = "M12,2L4.5,20.29L5.21,21L12,18L18.79,21L19.5,20.29L12,2Z";
+
+        // OpenGL/3D Box (same as Cube but outline variant)
+        public const string Cube3D = "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z";
+
+        // Horizontal dots/Pager
+        public const string HorizontalDots = "M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z";
+
+        // Slider tune/adjust
+        public const string Tune = "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z";
+    }
+}

samples/ControlCatalog/MainView.xaml

@@ -1,312 +1,157 @@
-<UserControl x:Class="ControlCatalog.MainView"
-             xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:local="using:ControlCatalog"
-             xmlns:controls="using:ControlSamples"
-             xmlns:models="using:ControlCatalog.Models"
-             xmlns:pages="using:ControlCatalog.Pages"
-             xmlns:viewModels="using:ControlCatalog.ViewModels"
-             x:DataType="viewModels:MainWindowViewModel">
-  <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>
-    <controls:HamburgerMenu Name="Sidebar">
-      <TabItem Header="Composition" IsSelected="True">
-        <pages:CompositionPage />
-      </TabItem>
-      <TabItem Header="Accelerator">
-        <pages:AcceleratorPage />
-      </TabItem>
-      <TabItem Header="Acrylic">
-        <pages:AcrylicPage />
-      </TabItem>
-      <TabItem Header="AdornerLayer">
-        <pages:AdornerLayerPage />
-      </TabItem>
-      <TabItem Header="AutoCompleteBox">
-        <pages:AutoCompleteBoxPage />
-      </TabItem>
-      <TabItem Header="Border">
-        <pages:BorderPage />
-      </TabItem>
-      <TabItem Header="BitmapCache">
-        <pages:BitmapCachePage />
-      </TabItem>
-      <TabItem Header="Buttons">
-        <pages:ButtonsPage />
-      </TabItem>
-      <TabItem Header="ButtonSpinner">
-        <pages:ButtonSpinnerPage />
-      </TabItem>
-      <TabItem Header="Calendar">
-        <pages:CalendarPage />
-      </TabItem>
-      <TabItem Header="Canvas">
-        <pages:CanvasPage />
-      </TabItem>
-      <TabItem Header="CommandBar"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CommandBarPage />
-      </TabItem>
-      <TabItem Header="Carousel"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CarouselDemoPage />
-      </TabItem>
-      <TabItem Header="CarouselPage"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CarouselDemoPage />
-      </TabItem>
+<DrawerPage x:Class="ControlCatalog.MainView"
+            xmlns="https://github.com/avaloniaui"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            xmlns:local="using:ControlCatalog"
+            xmlns:controls="using:ControlSamples"
+            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+            xmlns:models="using:ControlCatalog.Models"
+            xmlns:pages="using:ControlCatalog.Pages"
+            xmlns:viewModels="using:ControlCatalog.ViewModels"
+            d:DesignWidth="1200"
+            d:DesignHeight="720"
+            x:DataType="viewModels:MainWindowViewModel"
+            DrawerLayoutBehavior="Split"
+            IsOpen="{Binding IsDrawerOpened , Mode=TwoWay}"
+            DisplayMode="{Binding DisplayMode, Mode=TwoWay}"
+            DrawerLength="260"
+            CompactDrawerLength="52"
+            DrawerFooter="{Binding}"
+            Drawer="{Binding}"
+            DrawerHeader="{Binding}">
+  <Design.DataContext>
+    <viewModels:MainWindowViewModel/>
+  </Design.DataContext>
+  <DrawerPage.Resources>
+    <ResourceDictionary>
+      <x:Double x:Key="TabbedPageTabItemHeaderFontSize">20</x:Double>
+      <Thickness x:Key="TabbedPageTabStripPadding">10</Thickness>
+    </ResourceDictionary>
+  </DrawerPage.Resources>
+  <DrawerPage.Styles>
+    <Style Selector="TextBlock.h2">
+      <Setter Property="TextWrapping" Value="Wrap" />
+      <Setter Property="MaxWidth" Value="400" />
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
+  </DrawerPage.Styles>
+  <DrawerPage.DrawerTemplate>
+    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
+      <ListBox ItemsSource="{Binding Pages}"
+               Padding="0,10,0,10"
+               Background="Transparent"
+               ItemContainerTheme="{StaticResource NavHeaderItem}"
+               SelectedIndex="{Binding SelectedPageIndex}">
+        <ListBox.ItemTemplate>
+          <DataTemplate x:DataType="viewModels:PageItem">
+            <Grid ColumnDefinitions="20,*">
+              <PathIcon Grid.Column="0" Width="16" Height="16"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="{Binding IconData}"/>
+              <TextBlock Grid.Column="1" Text="{Binding Header}"
+                         VerticalAlignment="Center"
+                         Margin="12,0,0,0"
+                         TextTrimming="CharacterEllipsis"/>
+            </Grid>
+          </DataTemplate>
+        </ListBox.ItemTemplate>
+      </ListBox>
+    </DataTemplate>
+  </DrawerPage.DrawerTemplate>
+  <DrawerPage.DrawerHeaderTemplate>
+    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
+      <DockPanel LastChildFill="True" Margin="6">
+        <TextBox Name="SearchBox"
+                 DockPanel.Dock="Bottom"
+                 PlaceholderText="Search..."
+                 Text="{Binding Query, Mode=TwoWay}"
+                 Margin="4,0,8,4"
+                 VerticalContentAlignment="Center"
+                 IsVisible="{Binding IsDrawerOpened}">
+          <TextBox.InnerLeftContent>
+            <PathIcon Width="14" Height="14" Margin="6,0,0,0"
+                      VerticalAlignment="Center"
+                      Data="M10 2.5a7.5 7.5 0 0 1 5.964 12.048l4.743 4.745a1 1 0 0 1-1.32 1.497l-.094-.083-4.745-4.743A7.5 7.5 0 1 1 10 2.5Zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" />
+          </TextBox.InnerLeftContent>
+        </TextBox>
+        <Border HorizontalAlignment="Stretch" Padding="10">
+          <Image Source="/Assets/Icon.png" VerticalAlignment="Center"
+                 HorizontalAlignment="Center"
+                 MaxHeight="120"
+                 Stretch="Uniform"/>
+        </Border>
+      </DockPanel>
+    </DataTemplate>
+  </DrawerPage.DrawerHeaderTemplate>
+  <DrawerPage.DrawerFooterTemplate>
+    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
+      <Expander HorizontalAlignment="Stretch"
+                HorizontalContentAlignment="Stretch"
+                Header="Settings"
+                Margin="0"
+                BorderThickness="0"
+                ExpandDirection="Up">
+        <StackPanel Width="152" Spacing="8">
+          <ComboBox x:Name="Decorations"
+                    HorizontalAlignment="Stretch"
+                    SelectedIndex="{Binding SelectedDecorationIndex}"
+                    SelectionChanged="Decorations_SelectionChanged"
+                    ToolTip.Tip="System Decorations">
+            <ComboBox.Items>
+              <WindowDecorations>None</WindowDecorations>
+              <WindowDecorations>BorderOnly</WindowDecorations>
+              <WindowDecorations>Full</WindowDecorations>
+            </ComboBox.Items>
+          </ComboBox>
+          <ComboBox HorizontalAlignment="Stretch"
+                    DisplayMemberBinding="{Binding Key, x:DataType=ThemeVariant}"
+                    SelectedIndex="0"
+                    SelectionChanged="ThemeVariants_SelectionChanged"
+                    ToolTip.Tip="Theme Variant">
+            <ComboBox.Items>
+              <ThemeVariant>Default</ThemeVariant>
+              <ThemeVariant>Light</ThemeVariant>
+              <ThemeVariant>Dark</ThemeVariant>
+            </ComboBox.Items>
+          </ComboBox>
+          <ComboBox HorizontalAlignment="Stretch"
+                    SelectedItem="{x:Static local:App.CurrentTheme}"
+                    SelectionChanged="Themes_SelectionChanged"
+                    ToolTip.Tip="Catalog Theme">
+            <ComboBox.Items>
+              <models:CatalogTheme>Fluent</models:CatalogTheme>
+              <models:CatalogTheme>Simple</models:CatalogTheme>
+            </ComboBox.Items>
+          </ComboBox>
+          <ComboBox HorizontalAlignment="Stretch"
+                    SelectedIndex="0"
+                    SelectionChanged="TransparencyLevels_SelectionChanged"
+                    ToolTip.Tip="Window Transparency Level">
+            <ComboBox.Items>
+              <WindowTransparencyLevel>None</WindowTransparencyLevel>
+              <WindowTransparencyLevel>Transparent</WindowTransparencyLevel>
+              <WindowTransparencyLevel>Blur</WindowTransparencyLevel>
+              <WindowTransparencyLevel>AcrylicBlur</WindowTransparencyLevel>
+              <WindowTransparencyLevel>Mica</WindowTransparencyLevel>
+            </ComboBox.Items>
+          </ComboBox>
+          <ComboBox HorizontalAlignment="Stretch"
+                    SelectedIndex="0"
+                    SelectionChanged="FlowDirection_SelectionChanged"
+                    ToolTip.Tip="Flow Direction">
+            <ComboBox.Items>
+              <FlowDirection>LeftToRight</FlowDirection>
+              <FlowDirection>RightToLeft</FlowDirection>
+            </ComboBox.Items>
+          </ComboBox>
+          <ComboBox HorizontalAlignment="Stretch"
+                    ItemsSource="{Binding WindowStates}"
+                    SelectedItem="{Binding WindowState}"
+                    ToolTip.Tip="Window State"/>
+        </StackPanel>
+      </Expander>
+    </DataTemplate>
+  </DrawerPage.DrawerFooterTemplate>
 
-      <TabItem Header="CheckBox">
-        <pages:CheckBoxPage />
-      </TabItem>
-      <TabItem Header="Clipboard">
-        <pages:ClipboardPage />
-      </TabItem>
-      <TabItem Header="ColorPicker">
-        <pages:ColorPickerPage />
-      </TabItem>
-      <TabItem Header="ComboBox">
-        <pages:ComboBoxPage />
-      </TabItem>
-      <TabItem Header="Container Queries">
-        <pages:ContainerQueryPage />
-      </TabItem>
-      <TabItem Header="ContentPage"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:ContentDemoPage />
-      </TabItem>
-      <TabItem Header="ContextFlyout">
-        <pages:ContextFlyoutPage />
-      </TabItem>
-      <TabItem Header="ContextMenu">
-        <pages:ContextMenuPage />
-      </TabItem>
-      <TabItem Header="Cursor" ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CursorPage />
-      </TabItem>
-      <TabItem Header="Custom Drawing" ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:CustomDrawing />
-      </TabItem>
-      <TabItem Header="DataGrid"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:DataGridPage />
-      </TabItem>
-      <TabItem Header="Data Validation">
-        <pages:DataValidationPage />
-      </TabItem>
-      <TabItem Header="Date/Time Picker">
-        <pages:DateTimePickerPage />
-      </TabItem>
-      <TabItem Header="CalendarDatePicker">
-        <pages:CalendarDatePickerPage />
-      </TabItem>
-      <TabItem Header="Dialogs">
-        <pages:DialogsPage />
-      </TabItem>
-      <TabItem Header="Drag+Drop">
-        <pages:DragAndDropPage />
-      </TabItem>
-      <TabItem Header="DrawerPage"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:DrawerDemoPage />
-      </TabItem>
-      <TabItem Header="Expander">
-        <pages:ExpanderPage />
-      </TabItem>
-      <TabItem Header="Flyouts">
-        <pages:FlyoutsPage />
-      </TabItem>
-      <TabItem Header="Focus">
-        <pages:FocusPage />
-      </TabItem>
-      <TabItem Header="Gestures">
-        <pages:GesturePage />
-      </TabItem>
-      <TabItem Header="Image"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:ImagePage />
-      </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="NavigationPage"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:NavigationDemoPage />
-      </TabItem>
-      <TabItem Header="Notifications">
-        <pages:NotificationsPage />
-      </TabItem>
-      <TabItem Header="NumericUpDown">
-        <pages:NumericUpDownPage />
-      </TabItem>
-      <TabItem Header="OpenGL">
-        <pages:OpenGlPage />
-      </TabItem>
-      <TabItem Header="OpenGL Lease">
-        <pages:OpenGlLeasePage />
-      </TabItem>
-      <TabItem Header="PipsPager">
-        <pages:PipsPagerPage />
-      </TabItem>
-      <TabItem Header="Platform Information">
-        <pages:PlatformInfoPage />
-      </TabItem>
-      <TabItem Header="Pointers">
-        <pages:PointersPage />
-      </TabItem>
-      <TabItem Header="ProgressBar">
-        <pages:ProgressBarPage />
-      </TabItem>
-      <TabItem Header="RadioButton">
-        <pages:RadioButtonPage />
-      </TabItem>
-      <TabItem Header="RefreshContainer">
-        <pages:RefreshContainerPage />
-      </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="TabbedPage"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
-        <pages:TabbedDemoPage />
-      </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="Theme Variants">
-        <pages:ThemePage />
-      </TabItem>
-      <TabItem Header="ToggleSwitch">
-        <pages:ToggleSwitchPage />
-      </TabItem>
-      <TabItem Header="ToolTip">
-        <pages:ToolTipPage />
-      </TabItem>
-      <TabItem Header="TransitioningContentControl">
-        <pages:TransitioningContentControlPage />
-      </TabItem>
-      <TabItem Header="TreeView">
-        <pages:TreeViewPage />
-      </TabItem>
-      <TabItem Header="Viewbox">
-        <pages:ViewboxPage />
-      </TabItem>
-      <TabItem Header="Native Embed">
-        <pages:NativeEmbedPage />
-      </TabItem>
-      <TabItem Header="Window Customizations">
-        <pages:WindowCustomizationsPage />
-      </TabItem>
-      <TabItem Header="HeaderedContentControl">
-        <pages:HeaderedContentPage />
-      </TabItem>
-      <TabItem Header="Screens">
-        <pages:ScreenPage />
-      </TabItem>
-      <FlyoutBase.AttachedFlyout>
-        <Flyout>
-          <StackPanel Width="152" Spacing="8">
-            <ComboBox x:Name="Decorations"
-                      HorizontalAlignment="Stretch"
-                      SelectedIndex="0"
-                      SelectionChanged="Decorations_SelectionChanged"
-                      ToolTip.Tip="System Decorations">
-              <ComboBox.Items>
-                <WindowDecorations>None</WindowDecorations>
-                <WindowDecorations>BorderOnly</WindowDecorations>
-                <WindowDecorations>Full</WindowDecorations>
-              </ComboBox.Items>
-            </ComboBox>
-            <ComboBox HorizontalAlignment="Stretch"
-                      DisplayMemberBinding="{Binding Key, x:DataType=ThemeVariant}"
-                      SelectedIndex="0"
-                      SelectionChanged="ThemeVariants_SelectionChanged"
-                      ToolTip.Tip="Theme Variant">
-              <ComboBox.Items>
-                <ThemeVariant>Default</ThemeVariant>
-                <ThemeVariant>Light</ThemeVariant>
-                <ThemeVariant>Dark</ThemeVariant>
-              </ComboBox.Items>
-            </ComboBox>
-            <ComboBox HorizontalAlignment="Stretch"
-                      SelectedItem="{x:Static local:App.CurrentTheme}"
-                      SelectionChanged="Themes_SelectionChanged"
-                      ToolTip.Tip="Catalog Theme">
-              <ComboBox.Items>
-                <models:CatalogTheme>Fluent</models:CatalogTheme>
-                <models:CatalogTheme>Simple</models:CatalogTheme>
-              </ComboBox.Items>
-            </ComboBox>
-            <ComboBox HorizontalAlignment="Stretch"
-                      SelectedIndex="0"
-                      SelectionChanged="TransparencyLevels_SelectionChanged"
-                      ToolTip.Tip="Window Transparency Level">
-              <ComboBox.Items>
-                <WindowTransparencyLevel>None</WindowTransparencyLevel>
-                <WindowTransparencyLevel>Transparent</WindowTransparencyLevel>
-                <WindowTransparencyLevel>Blur</WindowTransparencyLevel>
-                <WindowTransparencyLevel>AcrylicBlur</WindowTransparencyLevel>
-                <WindowTransparencyLevel>Mica</WindowTransparencyLevel>
-              </ComboBox.Items>
-            </ComboBox>
-            <ComboBox HorizontalAlignment="Stretch"
-                      SelectedIndex="0"
-                      SelectionChanged="FlowDirection_SelectionChanged"
-                      ToolTip.Tip="Flow Direction">
-              <ComboBox.Items>
-                <FlowDirection>LeftToRight</FlowDirection>
-                <FlowDirection>RightToLeft</FlowDirection>
-              </ComboBox.Items>
-            </ComboBox>
-            <ComboBox HorizontalAlignment="Stretch"
-                      ItemsSource="{Binding WindowStates}"
-                      SelectedItem="{Binding WindowState}"
-                      ToolTip.Tip="Window State"/>
-          </StackPanel>
-        </Flyout>
-      </FlyoutBase.AttachedFlyout>
-    </controls:HamburgerMenu>
-  </Grid>
-</UserControl>
+  <NavigationPage Name="NavPage"/>
+</DrawerPage>

samples/ControlCatalog/MainView.xaml.cs

@@ -10,13 +10,80 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog
 {
-    public partial class MainView : UserControl
+    public partial class MainView : DrawerPage
     {
         private Action? _disposeTransparencySetters;
 
         public MainView()
         {
             InitializeComponent();
+
+            Loaded += MainView_Loaded;
+            Unloaded += MainView_Unloaded;
+        }
+
+        private const double WideBreakpoint = 1008;
+        private const double NarrowBreakpoint = 640;
+
+        private void MainView_Loaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
+        {
+            if (DataContext == null)
+                return;
+
+            SizeChanged += OnDrawerSizeChanged;
+            UpdateAdaptiveLayout();
+        }
+
+        private void MainView_Unloaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
+        {
+            SizeChanged -= OnDrawerSizeChanged;
+            _lastAppliedMode = null;
+        }
+
+        private SplitViewDisplayMode? _lastAppliedMode;
+        private bool _updatingLayout;
+
+        private void OnDrawerSizeChanged(object? sender, SizeChangedEventArgs e)
+        {
+            if (e.WidthChanged)
+                UpdateAdaptiveLayout();
+        }
+
+        private void UpdateAdaptiveLayout()
+        {
+            if (_updatingLayout || DataContext == null)
+                return;
+
+            var width = Bounds.Width;
+            if (width <= 0)
+                return;
+
+            SplitViewDisplayMode targetMode;
+            if (width >= WideBreakpoint)
+                targetMode = SplitViewDisplayMode.Inline;
+            else if (width >= NarrowBreakpoint)
+                targetMode = SplitViewDisplayMode.CompactInline;
+            else
+                targetMode = SplitViewDisplayMode.Overlay;
+
+            if (_lastAppliedMode == targetMode)
+                return;
+
+            _updatingLayout = true;
+            try
+            {
+                _lastAppliedMode = targetMode;
+                ViewModel.DisplayMode = targetMode;
+
+                if (targetMode == SplitViewDisplayMode.Inline)
+                    ViewModel.IsDrawerOpened = true;
+                else if (targetMode == SplitViewDisplayMode.Overlay)
+                    ViewModel.IsDrawerOpened = false;
+            }
+            finally
+            {
+                _updatingLayout = false;
+            }
         }
 
         private void Themes_SelectionChanged(object? sender, SelectionChangedEventArgs e)
@@ -66,22 +133,38 @@ namespace ControlCatalog
                     var semiTransparentBrush = new ImmutableSolidColorBrush(Colors.Gray, 0.2);
                     _disposeTransparencySetters =
                         (Action)topLevel.SetValue(BackgroundProperty, transparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
-                        Sidebar.SetValue(BackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
-                        Sidebar.SetValue(SplitView.PaneBackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose;
+                        SetValue(BackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
+                        SetValue(DrawerPage.DrawerBackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose;
                 }
             }
         }
 
+        protected override void OnDataContextChanged(EventArgs e)
+        {
+            base.OnDataContextChanged(e);
+
+            if (ViewModel != null)
+            {
+                ViewModel.Navigator = NavPage;
+            }
+        }
+
         internal MainWindowViewModel ViewModel => (MainWindowViewModel)DataContext!;
 
         protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
         {
             base.OnAttachedToVisualTree(e);
 
-            if (TopLevel.GetTopLevel(this) is Window window)
-                Decorations.SelectedIndex = (int)window.WindowDecorations;
+            if (DataContext == null)
+                return;
 
-            var insets = TopLevel.GetTopLevel(this)!.InsetsManager;
+            UpdateAdaptiveLayout();
+
+            var topLevel = TopLevel.GetTopLevel(this)!;
+            if (topLevel is Window window)
+                ViewModel.SelectedDecorationIndex = (int)window.WindowDecorations;
+
+            var insets = topLevel.InsetsManager;
             if (insets != null)
             {
                 // In real life application these events should be unsubscribed to avoid memory leaks.
@@ -111,6 +194,8 @@ namespace ControlCatalog
                     ViewModel.IsSystemBarVisible = insets.IsSystemBarVisible ?? true;
                 };
             }
+
+            ViewModel.SelectedPageIndex = 0;
         }
     }
 }

samples/ControlCatalog/NavHeaderItem.xaml

@@ -0,0 +1,101 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:ControlCatalog">
+  
+
+  <ResourceDictionary.ThemeDictionaries>
+    <ResourceDictionary x:Key="Dark">
+      <Color x:Key="HamburgerBaseHighColor">#99FFFFFF</Color>
+      <Color x:Key="HamburgerChromeMediumColor">#FF1F1F1F</Color>
+      <Color x:Key="HamburgerAltHighColor">#FF000000</Color>
+      <Color x:Key="HamburgerChromeLowColor">#FF171717</Color>
+    </ResourceDictionary>
+    <ResourceDictionary x:Key="Default">
+      <Color x:Key="HamburgerBaseHighColor">#99000000</Color>
+      <Color x:Key="HamburgerChromeMediumColor">#FFE6E6E6</Color>
+      <Color x:Key="HamburgerAltHighColor">#FFFFFFFF</Color>
+      <Color x:Key="HamburgerChromeLowColor">#FFF2F2F2</Color>
+    </ResourceDictionary>
+  </ResourceDictionary.ThemeDictionaries> 
+  <x:Double x:Key="NavigationItemHeight">36</x:Double>
+  <BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows>
+  <Design.PreviewWith>
+    <Border Padding="0">
+      <ListBox ItemContainerTheme="{StaticResource NavHeaderItem}">
+        <ListBoxItem IsEnabled="False">Disabled</ListBoxItem>
+        <ListBoxItem>
+          Test
+        </ListBoxItem>
+        <ListBoxItem>Test</ListBoxItem>
+      </ListBox>
+    </Border>
+  </Design.PreviewWith>
+  <ControlTheme x:Key="NavHeaderItem" TargetType="ListBoxItem">
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
+    <Setter Property="Padding" Value="14,0,4,0" />
+    <Setter Property="Margin" Value="4,2,8,0" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <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}"
+                    IsVisible="False"
+                    CornerRadius="4"/>
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Padding="{TemplateBinding Padding}"
+                              Margin="0"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                              TextElement.FontFamily="{TemplateBinding FontFamily}"
+                              TextElement.FontSize="{TemplateBinding FontSize}"
+                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
+          </Panel>
+        </Border>
+      </ControlTemplate>
+    </Setter>    
+
+    <Style Selector="^:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>
+
+      <Style Selector="^ /template/ Border#PART_LayoutRoot">
+        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
+        <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+        <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:selected">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
+
+      <Style Selector="^ /template/ Border#PART_SelectedPipe">
+        <Setter Property="IsVisible" Value="True" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
+      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
+      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
+      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

samples/ControlCatalog/Pages/AcceleratorPage.xaml

@@ -1,115 +1,116 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Accelerator"
              x:Class="ControlCatalog.Pages.AcceleratorPage">
-  <StackPanel Orientation="Vertical" Spacing="4">
+    <StackPanel Orientation="Vertical" Spacing="4">
 
-    <WrapPanel HorizontalAlignment="Left">
-      <StackPanel>
-        <Menu>
-          <MenuItem Header="_First">
-            <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
-            <MenuItem Header="_Disabled Menu Item" IsEnabled="False" InputGesture="Ctrl+D" />
-            <Separator />
-            <MenuItem Header="Menu with Sub _Menu">
-              <MenuItem Header="Submenu _1" />
-              <MenuItem Header="Submenu _2 with Submenu">
-                <MenuItem Header="Submenu Level 2" />
+      <WrapPanel HorizontalAlignment="Left">
+        <StackPanel>
+          <Menu>
+            <MenuItem Header="_First">
+              <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
+              <MenuItem Header="_Disabled Menu Item" IsEnabled="False" InputGesture="Ctrl+D" />
+              <Separator />
+              <MenuItem Header="Menu with Sub _Menu">
+                <MenuItem Header="Submenu _1" />
+                <MenuItem Header="Submenu _2 with Submenu">
+                  <MenuItem Header="Submenu Level 2" />
+                </MenuItem>
+                <MenuItem Header="Submenu _3 with Submenu Disabled" IsEnabled="False">
+                  <MenuItem Header="Submenu Level 2" />
+                </MenuItem>
               </MenuItem>
-              <MenuItem Header="Submenu _3 with Submenu Disabled" IsEnabled="False">
-                <MenuItem Header="Submenu Level 2" />
+              <MenuItem Header="Menu Item with _Icon" InputGesture="Ctrl+Shift+B">
+                <MenuItem.Icon>
+                  <Image Source="/Assets/github_icon.png" />
+                </MenuItem.Icon>
               </MenuItem>
+              <MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
             </MenuItem>
-            <MenuItem Header="Menu Item with _Icon" InputGesture="Ctrl+Shift+B">
-              <MenuItem.Icon>
-                <Image Source="/Assets/github_icon.png" />
-              </MenuItem.Icon>
-            </MenuItem>
-            <MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
-          </MenuItem>
-          <MenuItem Header="_Second">
-            <MenuItem Header="Second _Menu Item" />
-            <MenuItem IsChecked="True" Header="Second _Menu toggle item" ToggleType="CheckBox" />
-            <Separator />
-            <MenuItem GroupName="A" Header="Radio 1 - group" ToggleType="Radio" />
-            <MenuItem IsChecked="True" GroupName="A" Header="Radio 2 - group" ToggleType="Radio" />
-            <MenuItem GroupName="A" Header="Radio 3 - group" ToggleType="Radio">
-              <MenuItem Header="Radio 4 - group" ToggleType="Radio" GroupName="A" />
-              <MenuItem Header="Radio 5 - group" ToggleType="Radio" GroupName="A" />
-            </MenuItem>
-            <Separator />
-            <MenuItem Header="Radio 1" ToggleType="Radio" />
-            <MenuItem IsChecked="True" Header="Radio 2" ToggleType="Radio" />
-            <MenuItem Header="Radio 3" ToggleType="Radio">
-              <MenuItem Header="Radio 4" ToggleType="Radio" />
-              <MenuItem Header="Radio 5" ToggleType="Radio" />
+            <MenuItem Header="_Second">
+              <MenuItem Header="Second _Menu Item" />
+              <MenuItem IsChecked="True" Header="Second _Menu toggle item" ToggleType="CheckBox" />
+              <Separator />
+              <MenuItem GroupName="A" Header="Radio 1 - group" ToggleType="Radio" />
+              <MenuItem IsChecked="True" GroupName="A" Header="Radio 2 - group" ToggleType="Radio" />
+              <MenuItem GroupName="A" Header="Radio 3 - group" ToggleType="Radio">
+                <MenuItem Header="Radio 4 - group" ToggleType="Radio" GroupName="A" />
+                <MenuItem Header="Radio 5 - group" ToggleType="Radio" GroupName="A" />
+              </MenuItem>
+              <Separator />
+              <MenuItem Header="Radio 1" ToggleType="Radio" />
+              <MenuItem IsChecked="True" Header="Radio 2" ToggleType="Radio" />
+              <MenuItem Header="Radio 3" ToggleType="Radio">
+                <MenuItem Header="Radio 4" ToggleType="Radio" />
+                <MenuItem Header="Radio 5" ToggleType="Radio" />
+              </MenuItem>
             </MenuItem>
-          </MenuItem>
-          <MenuItem Header="Thir_d">
-            <MenuItem Header="About"/>
-            <MenuItem Header="_Child">
-              <MenuItem Header="_Grandchild"/>
+            <MenuItem Header="Thir_d">
+              <MenuItem Header="About"/>
+              <MenuItem Header="_Child">
+                <MenuItem Header="_Grandchild"/>
+              </MenuItem>
             </MenuItem>
-          </MenuItem>
-        </Menu>
-      </StackPanel>
+          </Menu>
+        </StackPanel>
 
-    </WrapPanel>
+      </WrapPanel>
 
-    <StackPanel Spacing="10">
-      <TextBlock Classes="h2">Accelerator Support</TextBlock>
+      <StackPanel Spacing="10">
+        <TextBlock Classes="h2">Accelerator Support</TextBlock>
 
-      <TabControl Margin="10" BorderBrush="Gray" BorderThickness="1">
-        <TabItem Header="_Tab 1">
-          <StackPanel>
-            <TextBlock Margin="5">This is tab 1 content</TextBlock>
-            <Label Name="Tab1Label1" Target="Tab1TextBox1">_Label Tab1Label1</Label>
-            <TextBox Name="Tab1TextBox1" Margin="5">This is tab 1 content</TextBox>
-            <Label Name="Tab1Label2" Target="Tab1TextBox2">Label _Tab1Label2</Label>
-            <TextBox Name="Tab1TextBox2" Margin="5">This is tab 1 content</TextBox>
-          </StackPanel>
+        <TabControl Margin="10" BorderBrush="Gray" BorderThickness="1">
+          <TabItem Header="_Tab 1">
+            <StackPanel>
+              <TextBlock Margin="5">This is tab 1 content</TextBlock>
+              <Label Name="Tab1Label1" Target="Tab1TextBox1">_Label Tab1Label1</Label>
+              <TextBox Name="Tab1TextBox1" Margin="5">This is tab 1 content</TextBox>
+              <Label Name="Tab1Label2" Target="Tab1TextBox2">Label _Tab1Label2</Label>
+              <TextBox Name="Tab1TextBox2" Margin="5">This is tab 1 content</TextBox>
+            </StackPanel>
 
-        </TabItem>
-        <TabItem Header="T_ab 2">
-          <TextBlock Margin="5">This is tab 2 content</TextBlock>
-        </TabItem>
-        <TabItem Header="_Tab 3">
+          </TabItem>
+          <TabItem Header="T_ab 2">
+            <TextBlock Margin="5">This is tab 2 content</TextBlock>
+          </TabItem>
+          <TabItem Header="_Tab 3">
 
-        </TabItem>
-        <TabItem Header="_Tab 4">
-          <TextBlock Margin="5">This is tab 4 content</TextBlock>
-        </TabItem>
-        <TabItem Header="_Fab 5">
-          <TextBlock Margin="5">This is fab 5 content</TextBlock>
-        </TabItem>
-      </TabControl>
-    </StackPanel>
+          </TabItem>
+          <TabItem Header="_Tab 4">
+            <TextBlock Margin="5">This is tab 4 content</TextBlock>
+          </TabItem>
+          <TabItem Header="_Fab 5">
+            <TextBlock Margin="5">This is fab 5 content</TextBlock>
+          </TabItem>
+        </TabControl>
+      </StackPanel>
 
 
-    <StackPanel Spacing="10">
-      <Label Name="Label0">Label with Ac_celerator 'C' and no Target</Label>
-      <TextBox Name="TextBox0" Text="Some Text"></TextBox>
+      <StackPanel Spacing="10">
+        <Label Name="Label0">Label with Ac_celerator 'C' and no Target</Label>
+        <TextBox Name="TextBox0" Text="Some Text"></TextBox>
 
-      <Label Name="Label1" Target="TextBox1">_Label with Accelerator 'L'</Label>
-      <TextBox Name="TextBox1" Text="Some Text"></TextBox>
+        <Label Name="Label1" Target="TextBox1">_Label with Accelerator 'L'</Label>
+        <TextBox Name="TextBox1" Text="Some Text"></TextBox>
 
-      <Label Name="Label2" Target="TextBox2">La_bel with Accelerator 'B'</Label>
-      <TextBox Name="TextBox2" Text="Some Text"></TextBox>
+        <Label Name="Label2" Target="TextBox2">La_bel with Accelerator 'B'</Label>
+        <TextBox Name="TextBox2" Text="Some Text"></TextBox>
 
-      <Label Name="Label3" Target="TextBox3">L_abel with Accelerator 'A'</Label>
-      <TextBox Name="TextBox3" Text="Some Text"></TextBox>
+        <Label Name="Label3" Target="TextBox3">L_abel with Accelerator 'A'</Label>
+        <TextBox Name="TextBox3" Text="Some Text"></TextBox>
 
-      <Label Name="Label4" Target="TextBox4">La_bel with Accelerator 'B'</Label>
-      <TextBox Name="TextBox4" Text="Some Text"></TextBox>
+        <Label Name="Label4" Target="TextBox4">La_bel with Accelerator 'B'</Label>
+        <TextBox Name="TextBox4" Text="Some Text"></TextBox>
 
-      <Label Name="Label5" Target="TextBox5">_Flabel with Accelerator 'F' (Same as in Menu > File)</Label>
-      <TextBox Name="TextBox5" Text="Some Text"></TextBox>
+        <Label Name="Label5" Target="TextBox5">_Flabel with Accelerator 'F' (Same as in Menu > File)</Label>
+        <TextBox Name="TextBox5" Text="Some Text"></TextBox>
 
-    </StackPanel>
+      </StackPanel>
 
-    <StackPanel Spacing="10" Orientation="Horizontal">
-      <Button Name="Button1">_Button 1</Button>
-      <Button Name="Button2">_Button 2</Button>
-      <Button Name="Button3">_Button 3</Button>
+      <StackPanel Spacing="10" Orientation="Horizontal">
+        <Button Name="Button1">_Button 1</Button>
+        <Button Name="Button2">_Button 2</Button>
+        <Button Name="Button3">_Button 3</Button>
+      </StackPanel>
     </StackPanel>
-  </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/AcceleratorPage.xaml.cs

@@ -2,7 +2,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class AcceleratorPage : UserControl
+    public partial class AcceleratorPage : ContentPage
     {
         public AcceleratorPage()
         {

samples/ControlCatalog/Pages/AcrylicPage.xaml

@@ -1,12 +1,13 @@
-<UserControl x:Class="ControlCatalog.Pages.AcrylicPage"
+<ContentPage Theme="{StaticResource ScrollPage}" 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"
              d:DesignHeight="800"
+             Header="Acrylic"
              d:DesignWidth="400"
              mc:Ignorable="d">
-  <UserControl.Styles>
+  <ContentPage.Styles>
     <Style Selector="ExperimentalAcrylicBorder">
       <Setter Property="CornerRadius" Value="5" />
       <Setter Property="MaxWidth" Value="660" />
@@ -22,144 +23,143 @@
       <Setter Property="LargeChange" Value="0.2" />
       <Setter Property="SmallChange" Value="0.1" />
     </Style>
-  </UserControl.Styles>
-  <StackPanel Spacing="20">
+  </ContentPage.Styles>
+    <StackPanel Spacing="20">
 
-    <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 BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#FF0000"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          <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>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#00FF00"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </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 BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#FF0000"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#000000"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#00FF00"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#0000FF"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#000000"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#FFFF00"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#0000FF"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#000000"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#FFFF00"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#000000"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="White"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#3c3c3c"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="White"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="#3c3c3c"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
+
+        <ExperimentalAcrylicBorder>
+          <ExperimentalAcrylicBorder.Material>
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         TintColor="White"
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          </ExperimentalAcrylicBorder.Material>
+        </ExperimentalAcrylicBorder>
+
+      </UniformGrid>
+
+
+      <ExperimentalAcrylicBorder Width="{Binding #BordersGrid.Bounds.Width}"
+                                 Height="160">
         <ExperimentalAcrylicBorder.Material>
           <ExperimentalAcrylicMaterial BackgroundSource="Digger"
                                        MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="White"
+                                       TintColor="Red"
                                        TintOpacity="{Binding #TintOpacitySlider.Value}" />
         </ExperimentalAcrylicBorder.Material>
       </ExperimentalAcrylicBorder>
-
-    </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>
+    </StackPanel>
+</ContentPage>

samples/ControlCatalog/Pages/AcrylicPage.xaml.cs

@@ -2,7 +2,7 @@
 
 namespace ControlCatalog.Pages
 {
-    public partial class AcrylicPage : UserControl
+    public partial class AcrylicPage : ContentPage
     {
         public AcrylicPage()
         {

samples/ControlCatalog/Pages/AdornerLayerPage.xaml

@@ -1,52 +1,52 @@
-<UserControl x:Class="ControlCatalog.Pages.AdornerLayerPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.AdornerLayerPage"
              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"
+             Header="Adorner Layer"
              mc:Ignorable="d">
+    <DockPanel>
+      <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto" Margin="16" DockPanel.Dock="Top">
+        <TextBlock Grid.Column="0" Grid.Row="0">Rotation</TextBlock>
+        <Slider Name="rotation" Maximum="360" Grid.Column="1" Grid.Row="0"/>
+      </Grid>
 
-  <DockPanel>
-    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto" Margin="16" DockPanel.Dock="Top">
-      <TextBlock Grid.Column="0" Grid.Row="0">Rotation</TextBlock>
-      <Slider Name="rotation" Maximum="360" Grid.Column="1" Grid.Row="0"/>
-    </Grid>
+      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Top">
+        <Button Name="AddAdorner"
+                Click="AddAdorner_OnClick"
+                Content="Add Adorner"
+                Margin="6" />
+        <Button Name="RemoveAdorner"
+                Click="RemoveAdorner_OnClick"
+                Content="Remove Adorner"
+                Margin="6" />
+      </StackPanel>
 
-    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Top">
-      <Button Name="AddAdorner" 
-              Click="AddAdorner_OnClick"
-              Content="Add Adorner" 
-              Margin="6" />
-      <Button Name="RemoveAdorner" 
-              Click="RemoveAdorner_OnClick"
-              Content="Remove Adorner"
-              Margin="6" />
-    </StackPanel>
+      <Grid ColumnDefinitions="24,Auto,24"
+            RowDefinitions="24,Auto,24"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center">
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="0"/>
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="0" Grid.Row="1"/>
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="2" Grid.Row="1"/>
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="2"/>
 
-    <Grid ColumnDefinitions="24,Auto,24" 
-          RowDefinitions="24,Auto,24"
-          HorizontalAlignment="Center"
-          VerticalAlignment="Center">
-      <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="0"/>
-      <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="0" Grid.Row="1"/>
-      <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="2" Grid.Row="1"/>
-      <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="2"/>
+        <LayoutTransformControl Name="layoutTransform" Grid.Column="1" Grid.Row="1">
+          <LayoutTransformControl.LayoutTransform>
+            <RotateTransform Angle="{Binding #rotation.Value}"/>
+          </LayoutTransformControl.LayoutTransform>
 
-      <LayoutTransformControl Name="layoutTransform" Grid.Column="1" Grid.Row="1">
-        <LayoutTransformControl.LayoutTransform>
-          <RotateTransform Angle="{Binding #rotation.Value}"/>
-        </LayoutTransformControl.LayoutTransform>
-
-        <Button Name="AdornerButton"
-                Content="Adorned Button" 
-                HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
-                VerticalContentAlignment="Center" VerticalAlignment="Stretch" 
-                Width="200" Height="42">
-          <AdornerLayer.Adorner>
-            <Border AdornerLayer.IsClipEnabled="False" ClipToBounds="False" Background="Red" Opacity="0.3" Margin="-5" Padding="5"
-                    IsHitTestVisible="False">
-              <Canvas
+          <Button Name="AdornerButton"
+                  Content="Adorned Button"
+                  HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                  VerticalContentAlignment="Center" VerticalAlignment="Stretch"
+                  Width="200" Height="42">
+            <AdornerLayer.Adorner>
+              <Border AdornerLayer.IsClipEnabled="False" ClipToBounds="False" Background="Red" Opacity="0.3" Margin="-5" Padding="5"
+                      IsHitTestVisible="False">
+                <Canvas
                 x:Name="AdornerCanvas"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch"
@@ -54,24 +54,23 @@
                 IsHitTestVisible="False"
                 IsVisible="True"
                 AdornerLayer.IsClipEnabled="False">
-                <Line StartPoint="-10000,0" EndPoint="10000,0" Stroke="Cyan" StrokeThickness="1" />
-                <Line StartPoint="-10000,42" EndPoint="10000,42" Stroke="Cyan" StrokeThickness="1" />
-                <Line StartPoint="0,-10000" EndPoint="0,10000" Stroke="Cyan" StrokeThickness="1" />
-                <Line StartPoint="200,-10000" EndPoint="200,10000" Stroke="Cyan" StrokeThickness="1" />
-              </Canvas>
-            </Border>
-          </AdornerLayer.Adorner>
-          <Button.ContextMenu>
-            <ContextMenu PlacementTarget="{ResolveByName AdornerCanvas}" Placement="TopEdgeAlignedLeft">
-              <MenuItem Header="Menu 1"/>
-              <MenuItem Header="Menu 2"/>
-            </ContextMenu>
-          </Button.ContextMenu>
-        </Button>
-        
+                  <Line StartPoint="-10000,0" EndPoint="10000,0" Stroke="Cyan" StrokeThickness="1" />
+                  <Line StartPoint="-10000,42" EndPoint="10000,42" Stroke="Cyan" StrokeThickness="1" />
+                  <Line StartPoint="0,-10000" EndPoint="0,10000" Stroke="Cyan" StrokeThickness="1" />
+                  <Line StartPoint="200,-10000" EndPoint="200,10000" Stroke="Cyan" StrokeThickness="1" />
+                </Canvas>
+              </Border>
+            </AdornerLayer.Adorner>
+            <Button.ContextMenu>
+              <ContextMenu PlacementTarget="{ResolveByName AdornerCanvas}" Placement="TopEdgeAlignedLeft">
+                <MenuItem Header="Menu 1"/>
+                <MenuItem Header="Menu 2"/>
+              </ContextMenu>
+            </Button.ContextMenu>
+          </Button>
 
-      </LayoutTransformControl>
-    </Grid>
-  </DockPanel>
 
-</UserControl>
+        </LayoutTransformControl>
+      </Grid>
+    </DockPanel>
+</ContentPage>

samples/ControlCatalog/Pages/AdornerLayerPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class AdornerLayerPage : UserControl
+    public partial class AdornerLayerPage : ContentPage
     {
         private Control? _adorner;
 

samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml

@@ -1,79 +1,83 @@
-<UserControl x:Class="ControlCatalog.Pages.AutoCompleteBoxPage"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:sys="using:System"
              xmlns:models="using:ControlCatalog.Models"
              d:DesignHeight="600"
+             Header="AutoCompleteBox"
              d:DesignWidth="400">
-  <StackPanel Orientation="Vertical"
-              Spacing="4"
-              MaxWidth="660">
-    <TextBlock Classes="h2">A control into which the user can input text</TextBlock>
+  <ScrollViewer
+  HorizontalScrollBarVisibility="Disabled">
+    <StackPanel Orientation="Vertical"
+                Spacing="4"
+                MaxWidth="660">
+      <TextBlock Classes="h2">A control into which the user can input text</TextBlock>
 
-    <UniformGrid Margin="-8,0"
-                 Columns="2">
-      <UniformGrid.Styles>
-        <Style Selector="StackPanel">
-          <Setter Property="Margin" Value="8" />
-        </Style>
-      </UniformGrid.Styles>
+      <UniformGrid Margin="-8,0"
+                   Columns="2">
+        <UniformGrid.Styles>
+          <Style Selector="StackPanel">
+            <Setter Property="Margin" Value="8" />
+          </Style>
+        </UniformGrid.Styles>
+        <StackPanel>
+          <TextBlock Text="MinimumPrefixLength: 0" />
+          <AutoCompleteBox MinimumPrefixLength="0" />
+        </StackPanel>
+        <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="00:00:01" />
+        </StackPanel>
+        <StackPanel>
+          <TextBlock Text="MaxDropDownHeight: 60" />
+          <AutoCompleteBox MaxDropDownHeight="60" />
+        </StackPanel>
+        <StackPanel>
+          <TextBlock Text="PlaceholderText" />
+          <AutoCompleteBox PlaceholderText="Hello World" />
+        </StackPanel>
+        <StackPanel>
+          <TextBlock Text="PlaceholderText with custom color" />
+          <AutoCompleteBox PlaceholderText="Search here..." PlaceholderForeground="Green" />
+        </StackPanel>
+        <StackPanel>
+          <TextBlock Text="Disabled" />
+          <AutoCompleteBox IsEnabled="False" />
+        </StackPanel>
+        <StackPanel>
+          <TextBlock Text="ValueMemberBinding" />
+          <AutoCompleteBox ValueMemberBinding="{Binding Capital, x:DataType=models:StateData}" />
+        </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="MinimumPrefixLength: 0" />
-        <AutoCompleteBox MinimumPrefixLength="0" />
+        <TextBlock Text="With Validation Errors" />
+        <AutoCompleteBox Name="ValidationErrors" FilterMode="None">
+          <DataValidationErrors.Error>
+            <sys:Exception />
+          </DataValidationErrors.Error>
+        </AutoCompleteBox>
       </StackPanel>
-      <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="00:00:01" />
-      </StackPanel>
-      <StackPanel>
-        <TextBlock Text="MaxDropDownHeight: 60" />
-        <AutoCompleteBox MaxDropDownHeight="60" />
-      </StackPanel>
-      <StackPanel>
-        <TextBlock Text="PlaceholderText" />
-        <AutoCompleteBox PlaceholderText="Hello World" />
-      </StackPanel>
-      <StackPanel>
-        <TextBlock Text="PlaceholderText with custom color" />
-        <AutoCompleteBox PlaceholderText="Search here..." PlaceholderForeground="Green" />
-      </StackPanel>
-      <StackPanel>
-        <TextBlock Text="Disabled" />
-        <AutoCompleteBox IsEnabled="False" />
-      </StackPanel>
-      <StackPanel>
-        <TextBlock Text="ValueMemberBinding" />
-        <AutoCompleteBox ValueMemberBinding="{Binding Capital, x:DataType=models:StateData}" />
-      </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>
+  </ScrollViewer>
+</ContentPage>

samples/ControlCatalog/Pages/AutoCompleteBoxPage.xaml.cs

@@ -11,7 +11,7 @@ using ControlCatalog.Models;
 
 namespace ControlCatalog.Pages
 {
-    public partial class AutoCompleteBoxPage : UserControl
+    public partial class AutoCompleteBoxPage : ContentPage
     {
         private static StateData[] BuildAllStates()
         {

samples/ControlCatalog/Pages/BitmapCachePage.axaml

@@ -1,45 +1,49 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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"
+             Header="Bitmap Cache"
              x:Class="ControlCatalog.Pages.BitmapCachePage">
+  <ScrollViewer
+  HorizontalScrollBarVisibility="Disabled">
     <DockPanel>
-        <DockPanel.Resources>
-            <BitmapCache x:Key="Cache"/>
-            <ScaleTransform x:Key="Transform" ScaleX="1" ScaleY="{Binding $self.ScaleX, Mode=OneWay}"/>
-            <TranslateTransform x:Key="SubPixelTransform"/>
-        </DockPanel.Resources>
-        <StackPanel DockPanel.Dock="Right" ZIndex="1">
-            <TextBlock>Render at scale</TextBlock>
-            <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Cache}, Path=RenderAtScale, Mode=TwoWay}" Width="200"/>
-            <TextBlock>Scale</TextBlock>
-            <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Transform}, Path=ScaleX, Mode=TwoWay}" Width="200"/>
-            <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=EnableClearType, Mode=TwoWay}">Enable clear type</CheckBox>
+      <DockPanel.Resources>
+        <BitmapCache x:Key="Cache"/>
+        <ScaleTransform x:Key="Transform" ScaleX="1" ScaleY="{Binding $self.ScaleX, Mode=OneWay}"/>
+        <TranslateTransform x:Key="SubPixelTransform"/>
+      </DockPanel.Resources>
+      <StackPanel DockPanel.Dock="Right" ZIndex="1">
+        <TextBlock>Render at scale</TextBlock>
+        <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Cache}, Path=RenderAtScale, Mode=TwoWay}" Width="200"/>
+        <TextBlock>Scale</TextBlock>
+        <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Transform}, Path=ScaleX, Mode=TwoWay}" Width="200"/>
+        <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=EnableClearType, Mode=TwoWay}">Enable clear type</CheckBox>
 
-            <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=SnapsToDevicePixels, Mode=TwoWay}">Snap to device pixels</CheckBox>
-            <TextBlock>Subpixel offset X</TextBlock>
-            <Slider Minimum="0" Maximum="1" Value="{Binding Source={StaticResource SubPixelTransform}, Path=X, Mode=TwoWay}" Width="200"/>
-        </StackPanel>
-        <Decorator RenderTransform="{StaticResource SubPixelTransform}">
-            <Border Background="Beige" Margin="10"
-                    RenderTransform="{StaticResource Transform}"
-                    RenderTransformOrigin="0.5,0.5">
-                <Border Margin="10"
-                    CacheMode="{StaticResource Cache}"
-                    TextElement.Foreground="Black">
-                    <Border
-                        Margin="10"
-                        BorderThickness="2"
-                        BorderBrush="Black"
-                        Background="White">
-                        <StackPanel>
-                            <Slider MinWidth="200"/>
-                            <TextBlock TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
-                        </StackPanel>
-                    </Border>
-                </Border>
+        <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=SnapsToDevicePixels, Mode=TwoWay}">Snap to device pixels</CheckBox>
+        <TextBlock>Subpixel offset X</TextBlock>
+        <Slider Minimum="0" Maximum="1" Value="{Binding Source={StaticResource SubPixelTransform}, Path=X, Mode=TwoWay}" Width="200"/>
+      </StackPanel>
+      <Decorator RenderTransform="{StaticResource SubPixelTransform}">
+        <Border Background="Beige" Margin="10"
+                RenderTransform="{StaticResource Transform}"
+                RenderTransformOrigin="0.5,0.5">
+          <Border Margin="10"
+                  CacheMode="{StaticResource Cache}"
+                  TextElement.Foreground="Black">
+            <Border
+            Margin="10"
+            BorderThickness="2"
+            BorderBrush="Black"
+            Background="White">
+              <StackPanel>
+                <Slider MinWidth="200"/>
+                <TextBlock TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</TextBlock>
+              </StackPanel>
             </Border>
-        </Decorator>
+          </Border>
+        </Border>
+      </Decorator>
     </DockPanel>
-</UserControl>
+  </ScrollViewer>
+</ContentPage>

samples/ControlCatalog/Pages/BitmapCachePage.axaml.cs

@@ -4,10 +4,10 @@ using Avalonia.Markup.Xaml;
 
 namespace ControlCatalog.Pages;
 
-public partial class BitmapCachePage : UserControl
+public partial class BitmapCachePage : ContentPage
 {
     public BitmapCachePage()
     {
         InitializeComponent();
     }
-}
+}

samples/ControlCatalog/Pages/BorderPage.xaml

@@ -1,61 +1,65 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              d:DesignHeight="800"
              d:DesignWidth="400"
+             Header="Border"
              x:Class="ControlCatalog.Pages.BorderPage">
-  <StackPanel Orientation="Vertical" Spacing="4">
-    <StackPanel.Resources>
-      <SolidColorBrush x:Key="SemiTransparentSystemAccentBrush" Color="{DynamicResource SystemAccentColor}" Opacity="0.4" />
-    </StackPanel.Resources>
-    <TextBlock Classes="h2">A control which decorates a child with a border and background</TextBlock>
+  <ScrollViewer
+  HorizontalScrollBarVisibility="Disabled">
+    <StackPanel Orientation="Vertical" Spacing="4">
+      <StackPanel.Resources>
+        <SolidColorBrush x:Key="SemiTransparentSystemAccentBrush" Color="{DynamicResource SystemAccentColor}" Opacity="0.4" />
+      </StackPanel.Resources>
+      <TextBlock Classes="h2">A control which decorates a child with a border and background</TextBlock>
 
-    <StackPanel Orientation="Vertical"
-                Margin="0,16,0,0"
-                HorizontalAlignment="Center"
-                Spacing="16">
-      <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16">
-        <TextBlock>Border</TextBlock>
-      </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
-              BackgroundSizing="CenterBorder"
-              BorderThickness="8"
-              Padding="12">
-        <TextBlock>Background And CenterBorder</TextBlock>
-      </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
-              BackgroundSizing="InnerBorderEdge"
-              BorderThickness="8"
-              Padding="12">
-        <TextBlock>Background And InnerBorderEdge</TextBlock>
-      </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
-              BackgroundSizing="OuterBorderEdge"
-              BorderThickness="8"
-              Padding="12">
-        <TextBlock>Background And OuterBorderEdge</TextBlock>
-      </Border>
-      <Border BorderBrush="{DynamicResource SystemAccentColor}"
-              BorderThickness="4"
-              CornerRadius="8"
-              Padding="16">
-        <TextBlock>Rounded Corners</TextBlock>
-      </Border>
-      <Border Background="{DynamicResource SystemAccentColor}"
-              CornerRadius="8"
-              Padding="16">
-        <TextBlock>Rounded Corners</TextBlock>
-      </Border>
-      <Border Width="100" Height="100"
-              BorderThickness="0"
-              Background="White"
-              CornerRadius="100" ClipToBounds="True">
-        <Image Source="/Assets/maple-leaf-888807_640.jpg" Stretch="UniformToFill" />
-      </Border>
-      <TextBlock Text="Border with Clipping" HorizontalAlignment="Center" />
+      <StackPanel Orientation="Vertical"
+                  Margin="0,16,0,0"
+                  HorizontalAlignment="Center"
+                  Spacing="16">
+        <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16">
+          <TextBlock>Border</TextBlock>
+        </Border>
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
+                BackgroundSizing="CenterBorder"
+                BorderThickness="8"
+                Padding="12">
+          <TextBlock>Background And CenterBorder</TextBlock>
+        </Border>
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
+                BackgroundSizing="InnerBorderEdge"
+                BorderThickness="8"
+                Padding="12">
+          <TextBlock>Background And InnerBorderEdge</TextBlock>
+        </Border>
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
+                BackgroundSizing="OuterBorderEdge"
+                BorderThickness="8"
+                Padding="12">
+          <TextBlock>Background And OuterBorderEdge</TextBlock>
+        </Border>
+        <Border BorderBrush="{DynamicResource SystemAccentColor}"
+                BorderThickness="4"
+                CornerRadius="8"
+                Padding="16">
+          <TextBlock>Rounded Corners</TextBlock>
+        </Border>
+        <Border Background="{DynamicResource SystemAccentColor}"
+                CornerRadius="8"
+                Padding="16">
+          <TextBlock>Rounded Corners</TextBlock>
+        </Border>
+        <Border Width="100" Height="100"
+                BorderThickness="0"
+                Background="White"
+                CornerRadius="100" ClipToBounds="True">
+          <Image Source="/Assets/maple-leaf-888807_640.jpg" Stretch="UniformToFill" />
+        </Border>
+        <TextBlock Text="Border with Clipping" HorizontalAlignment="Center" />
+      </StackPanel>
     </StackPanel>
-  </StackPanel>
-</UserControl>
+  </ScrollViewer>
+</ContentPage>

samples/ControlCatalog/Pages/BorderPage.xaml.cs

@@ -2,7 +2,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class BorderPage : UserControl
+    public partial class BorderPage : ContentPage
     {
         public BorderPage()
         {

samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml

@@ -1,6 +1,7 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.Pages.ButtonSpinnerPage"
+             Header="Button Spinner"
              xmlns:sys="using:System">
 
   <StackPanel Orientation="Vertical" Spacing="4">
@@ -30,4 +31,4 @@
     </StackPanel>
   </StackPanel>
 
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ButtonSpinnerPage.xaml.cs

@@ -3,7 +3,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ButtonSpinnerPage : UserControl
+    public partial class ButtonSpinnerPage : ContentPage
     {
         public ButtonSpinnerPage()
         {

samples/ControlCatalog/Pages/ButtonsPage.xaml

@@ -1,8 +1,9 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Buttons"
              x:Class="ControlCatalog.Pages.ButtonsPage">
 
-  <UserControl.Resources>
+  <ContentPage.Resources>
 
     <MenuFlyout x:Key="SharedMenuFlyout"
                 Placement="Bottom">
@@ -16,9 +17,9 @@
       <MenuItem Header="Item 3" />
     </MenuFlyout>
 
-  </UserControl.Resources>
+  </ContentPage.Resources>
       
-  <UserControl.Styles >
+  <ContentPage.Styles >
 
     <Style Selector="Border.header-border">
       <Setter Property="Background">
@@ -45,7 +46,7 @@
       <Setter Property="Margin" Value="0,0,0,15" />
     </Style>
 
-  </UserControl.Styles>
+  </ContentPage.Styles>
 
   <!-- Styles and overall page design based on AcrylicPage -->
 
@@ -288,4 +289,4 @@
     </Border>
 
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ButtonsPage.xaml.cs

@@ -3,7 +3,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ButtonsPage : UserControl
+    public partial class ButtonsPage : ContentPage
     {
         private int repeatButtonClickCount = 0;
 

samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml

@@ -1,7 +1,8 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:ControlCatalog.ViewModels"
              x:DataType="vm:MainWindowViewModel"
+             Header="CalenderDatePicker"
              x:Class="ControlCatalog.Pages.CalendarDatePickerPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A control for selecting dates with a calendar drop-down</TextBlock>
@@ -52,4 +53,4 @@
 
     </StackPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CalendarDatePickerPage.xaml.cs

@@ -3,7 +3,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CalendarDatePickerPage : UserControl
+    public partial class CalendarDatePickerPage : ContentPage
     {
         public CalendarDatePickerPage()
         {

samples/ControlCatalog/Pages/CalendarPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Calendar"
              x:Class="ControlCatalog.Pages.CalendarPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A calendar control for selecting dates</TextBlock>
@@ -49,4 +50,4 @@
       </StackPanel>
     </WrapPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CalendarPage.xaml.cs

@@ -3,7 +3,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CalendarPage : UserControl
+    public partial class CalendarPage : ContentPage
     {
         public CalendarPage()
         {

samples/ControlCatalog/Pages/CanvasPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Canvas"
              x:Class="ControlCatalog.Pages.CanvasPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A panel which lays out its children by explicit coordinates</TextBlock>
@@ -34,4 +35,4 @@
       <Polyline Points="0,0 65,0 78,-26 91,39 104,-39 117,13 130,0 195,0" Stroke="Brown" Canvas.Left="30" Canvas.Top="350"/>
     </Canvas>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CanvasPage.xaml.cs

@@ -2,7 +2,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CanvasPage : UserControl
+    public partial class CanvasPage : ContentPage
     {
         public CanvasPage()
         {

samples/ControlCatalog/Pages/CarouselDemoPage.xaml

@@ -1,11 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Carousel Demo Page"
              x:Class="ControlCatalog.Pages.CarouselDemoPage">
-  <NavigationPage x:Name="SampleNav">
-    <NavigationPage.Styles>
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-        <Setter Property="Background" Value="Transparent" />
-      </Style>
-    </NavigationPage.Styles>
-  </NavigationPage>
-</UserControl>
+  <Grid>
+    <NavigationPage x:Name="SampleNav">
+      <NavigationPage.Styles>
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+          <Setter Property="Background" Value="Transparent" />
+        </Style>
+      </NavigationPage.Styles>
+    </NavigationPage>
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/CarouselDemoPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CarouselDemoPage : UserControl
+    public partial class CarouselDemoPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/CarouselPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Carousel"
              x:Class="ControlCatalog.Pages.CarouselPage">
   <StackPanel Orientation="Vertical" Spacing="4" HorizontalAlignment="Stretch">
     <TextBlock Classes="h2">A swipeable items control that can reveal adjacent pages with ViewportFraction.</TextBlock>
@@ -115,4 +116,4 @@
     </StackPanel>
     
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CarouselPage.xaml.cs

@@ -7,7 +7,7 @@ using ControlCatalog.Pages.Transitions;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CarouselPage : UserControl
+    public partial class CarouselPage : ContentPage
     {
         public CarouselPage()
         {

samples/ControlCatalog/Pages/CheckBoxPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="CheckBox"
              x:Class="ControlCatalog.Pages.CheckBoxPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A check box control</TextBlock>
@@ -25,4 +26,4 @@
       </StackPanel>
     </StackPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CheckBoxPage.xaml.cs

@@ -2,7 +2,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CheckBoxPage : UserControl
+    public partial class CheckBoxPage : ContentPage
     {
         public CheckBoxPage()
         {

samples/ControlCatalog/Pages/ClipboardPage.xaml

@@ -1,5 +1,6 @@
-<UserControl x:Class="ControlCatalog.Pages.ClipboardPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.ClipboardPage"
              xmlns="https://github.com/avaloniaui"
+             Header="Clipboard"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">Example of ClipboardPage capabilities</TextBlock>
@@ -27,4 +28,4 @@
       />
     </Viewbox>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ClipboardPage.xaml.cs

@@ -15,7 +15,7 @@ using Avalonia.Threading;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ClipboardPage : UserControl
+    public partial class ClipboardPage : ContentPage
     {
         private readonly DataFormat<byte[]> _customBinaryDataFormat =
             DataFormat.CreateBytesApplicationFormat("controlcatalog-binary-data");

samples/ControlCatalog/Pages/ColorPickerPage.xaml

@@ -1,4 +1,4 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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"
@@ -7,11 +7,12 @@
              mc:Ignorable="d"
              d:DesignWidth="800"
              d:DesignHeight="450"
+             Header="Color Picker"
              x:Class="ControlCatalog.Pages.ColorPickerPage">
 
-  <UserControl.Resources>
+  <ContentPage.Resources>
     <converters:ColorToBrushConverter x:Key="ToBrushConverter"/>
-  </UserControl.Resources>
+  </ContentPage.Resources>
 
   <Grid x:Name="LayoutRoot"
         ColumnDefinitions="Auto,10,Auto"
@@ -125,4 +126,4 @@
                       Margin="0,2,0,0" />
     </Grid>
   </Grid>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ColorPickerPage.xaml.cs

@@ -5,7 +5,7 @@ using Avalonia.Media;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ColorPickerPage : UserControl
+    public partial class ColorPickerPage : ContentPage
     {
         public ColorPickerPage()
         {

samples/ControlCatalog/Pages/ComboBoxPage.xaml

@@ -1,4 +1,4 @@
-<UserControl
+<ContentPage
     x:Class="ControlCatalog.Pages.ComboBoxPage"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -149,4 +149,4 @@
             </WrapPanel>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ComboBoxPage.xaml.cs

@@ -4,7 +4,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ComboBoxPage : UserControl
+    public partial class ComboBoxPage : ContentPage
     {
         public ComboBoxPage()
         {

samples/ControlCatalog/Pages/CommandBarPage.xaml

@@ -1,8 +1,11 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="CommandBar"
              x:Class="ControlCatalog.Pages.CommandBarPage">
-  <UserControl.Resources>
+  <ContentPage.Resources>
     <SolidColorBrush x:Key="NavigationBarBackground" Color="Transparent" />
-  </UserControl.Resources>
-  <NavigationPage x:Name="SampleNav" />
-</UserControl>
+  </ContentPage.Resources>
+  <Grid>
+    <NavigationPage x:Name="SampleNav" />
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/CommandBarPage.xaml.cs

@@ -7,7 +7,7 @@ using Avalonia.Media;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CommandBarPage : UserControl
+    public partial class CommandBarPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/CompositionPage.axaml

@@ -1,62 +1,61 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:pages="using:ControlCatalog.Pages"
-             x:Class="ControlCatalog.Pages.CompositionPage">
-  <TabControl>
-    <TabItem Header="Implicit animations">
-      <StackPanel>
-        <Grid ColumnDefinitions="*,10,40" Margin="0 0 40 0">
-          <ItemsControl x:Name="Items">
-            <ItemsControl.ItemsPanel>
-              <ItemsPanelTemplate>
-                <WrapPanel/>
-              </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.DataTemplates>
-              <DataTemplate DataType="pages:CompositionPageColorItem">
-                <Border 
-                  pages:CompositionPage.EnableAnimations="True"
-                  Padding="10" BorderBrush="Gray" BorderThickness="2"
-                  Background="{Binding ColorBrush}" Width="100" Height="100" Margin="10">
-                    <TextBlock Text="{Binding ColorHexValue}"/>
-                </Border>
-              </DataTemplate>
-            </ItemsControl.DataTemplates>
-          </ItemsControl>
-          <GridSplitter Margin="2" BorderThickness="1" BorderBrush="Gray" 
-                        Background="#e0e0e0" Grid.Column="1"
-                        ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"
-          />
-          <Border Grid.Column="2">
-            <LayoutTransformControl HorizontalAlignment="Center" MinWidth="30">
-              <LayoutTransformControl.LayoutTransform>
-                <RotateTransform Angle="90"/>
-              </LayoutTransformControl.LayoutTransform>
-              <TextBlock>Resize me</TextBlock>
-            </LayoutTransformControl>
-          </Border>
-        </Grid>
+<TabbedPage xmlns="https://github.com/avaloniaui"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            xmlns:pages="using:ControlCatalog.Pages"
+            Header="Composition"
+            x:Class="ControlCatalog.Pages.CompositionPage">
+  <ContentPage Theme="{StaticResource ScrollPage}" Header="Implicit animations">
+    <StackPanel>
+      <Grid ColumnDefinitions="*,10,40" Margin="0 0 40 0">
+        <ItemsControl x:Name="Items">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <WrapPanel/>
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+          <ItemsControl.DataTemplates>
+            <DataTemplate DataType="pages:CompositionPageColorItem">
+              <Border
+              pages:CompositionPage.EnableAnimations="True"
+              Padding="10" BorderBrush="Gray" BorderThickness="2"
+              Background="{Binding ColorBrush}" Width="100" Height="100" Margin="10">
+                <TextBlock Text="{Binding ColorHexValue}"/>
+              </Border>
+            </DataTemplate>
+          </ItemsControl.DataTemplates>
+        </ItemsControl>
+        <GridSplitter Margin="2" BorderThickness="1" BorderBrush="Gray"
+                      Background="#e0e0e0" Grid.Column="1"
+                      ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"
+                      />
+        <Border Grid.Column="2">
+          <LayoutTransformControl HorizontalAlignment="Center" MinWidth="30">
+            <LayoutTransformControl.LayoutTransform>
+              <RotateTransform Angle="90"/>
+            </LayoutTransformControl.LayoutTransform>
+            <TextBlock>Resize me</TextBlock>
+          </LayoutTransformControl>
+        </Border>
+      </Grid>
+    </StackPanel>
+  </ContentPage>
+  <ContentPage Theme="{StaticResource ScrollPage}" Header="Animation">
+    <DockPanel>
+      <Button DockPanel.Dock="Top" Margin="10" Click="ButtonThreadSleep">Thread.Sleep(10000);</Button>
+      <Control x:Name="SolidVisualHost" />
+    </DockPanel>
+  </ContentPage>
+  <ContentPage Theme="{StaticResource ScrollPage}" Header="Custom">
+    <DockPanel>
+      <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
+        <Button Margin="10" Click="ButtonThreadSleep">Thread.Sleep(10000);</Button>
+        <Button Margin="10" Click="ButtonStartCustomVisual">Start</Button>
+        <Button Margin="10" Click="ButtonStopCustomVisual">Stop</Button>
+        <CheckBox Margin="10"
+                  x:Name="PreciseDirtyRectsCheckboxCustomVisual"
+                  IsCheckedChanged="PreciseDirtyRectsCheckboxCustomVisualChanged"
+                  >Precise dirty rects</CheckBox>
       </StackPanel>
-    </TabItem>
-    <TabItem Header="Animation">
-      <DockPanel>
-        <Button DockPanel.Dock="Top" Margin="10" Click="ButtonThreadSleep">Thread.Sleep(10000);</Button>
-        <Control x:Name="SolidVisualHost" />
-      </DockPanel>
-    </TabItem>
-    <TabItem Header="Custom">
-      <DockPanel>
-        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
-          <Button Margin="10" Click="ButtonThreadSleep">Thread.Sleep(10000);</Button>
-          <Button Margin="10" Click="ButtonStartCustomVisual">Start</Button>
-          <Button Margin="10" Click="ButtonStopCustomVisual">Stop</Button>
-          <CheckBox Margin="10" 
-                    x:Name="PreciseDirtyRectsCheckboxCustomVisual"
-                    IsCheckedChanged="PreciseDirtyRectsCheckboxCustomVisualChanged"
-                    >Precise dirty rects</CheckBox>
-        </StackPanel>
-        <Control x:Name="CustomVisualHost" />
-      </DockPanel>
-    </TabItem>
-  </TabControl>
-</UserControl>
+      <Control x:Name="CustomVisualHost" />
+    </DockPanel>
+  </ContentPage>
+</TabbedPage>

samples/ControlCatalog/Pages/CompositionPage.axaml.cs

@@ -15,7 +15,7 @@ using Math = System.Math;
 
 namespace ControlCatalog.Pages;
 
-public partial class CompositionPage : UserControl
+public partial class CompositionPage : TabbedPage
 {
     private ImplicitAnimationCollection? _implicitAnimations;
     private CompositionCustomVisual? _customVisual;

samples/ControlCatalog/Pages/ConnectedAnimationDemoPage.xaml

@@ -1,6 +1,8 @@
-<UserControl x:Class="ControlCatalog.Pages.ConnectedAnimationDemoPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.ConnectedAnimationDemoPage"
              xmlns="https://github.com/avaloniaui"
+             Header="Connected Animations"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Grid>
   <NavigationPage x:Name="SampleNav">
     <NavigationPage.Styles>
       <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
@@ -8,4 +10,5 @@
       </Style>
     </NavigationPage.Styles>
   </NavigationPage>
-</UserControl>
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/ConnectedAnimationDemoPage.xaml.cs

@@ -7,7 +7,7 @@ using Avalonia.Media;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ConnectedAnimationDemoPage : UserControl
+    public partial class ConnectedAnimationDemoPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos = [];
 

samples/ControlCatalog/Pages/ContainerQueryPage.xaml

@@ -1,9 +1,10 @@
-<UserControl x:Class="ControlCatalog.Pages.ContainerQueryPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.ContainerQueryPage"
              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:viewModels="using:ControlCatalog.ViewModels"
+             Header="Container Queries"
              d:DesignHeight="800"
              d:DesignWidth="400"
              mc:Ignorable="d">
@@ -107,4 +108,4 @@
       </ScrollViewer>
     </Border>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ContainerQueryPage.xaml.cs

@@ -2,7 +2,7 @@
 
 namespace ControlCatalog.Pages
 {
-    public partial class ContainerQueryPage : UserControl
+    public partial class ContainerQueryPage : ContentPage
     {
         public ContainerQueryPage()
         {

samples/ControlCatalog/Pages/ContentDemoPage.xaml

@@ -1,11 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Content Page"
              x:Class="ControlCatalog.Pages.ContentDemoPage">
-  <NavigationPage x:Name="SampleNav">
-    <NavigationPage.Styles>
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-        <Setter Property="Background" Value="Transparent" />
-      </Style>
-    </NavigationPage.Styles>
-  </NavigationPage>
-</UserControl>
+  <Grid>
+    <NavigationPage x:Name="SampleNav">
+      <NavigationPage.Styles>
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+          <Setter Property="Background" Value="Transparent" />
+        </Style>
+      </NavigationPage.Styles>
+    </NavigationPage>
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/ContentDemoPage.xaml.cs

@@ -7,7 +7,7 @@ using Avalonia.Media;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ContentDemoPage : UserControl
+    public partial class ContentDemoPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/ContextFlyoutPage.xaml

@@ -1,18 +1,19 @@
-<UserControl x:Class="ControlCatalog.Pages.ContextFlyoutPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.ContextFlyoutPage"
              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:viewModels="using:ControlCatalog.ViewModels"
+             Header="ContextFlyout"
              d:DesignHeight="450"
              d:DesignWidth="800"
              mc:Ignorable="d"
              x:DataType="viewModels:ContextPageViewModel">
-  <UserControl.Styles>
+  <ContentPage.Styles>
     <Style Selector="FlyoutPresenter.NoPadding">
       <Setter Property="Padding" Value="0" />
     </Style>
-  </UserControl.Styles>
+  </ContentPage.Styles>
 
   <StackPanel Orientation="Vertical" Spacing="4">
     <StackPanel.Styles>
@@ -156,4 +157,4 @@
       </TextBox.ContextFlyout>
     </TextBox>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ContextFlyoutPage.xaml.cs

@@ -7,7 +7,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ContextFlyoutPage : UserControl
+    public partial class ContextFlyoutPage : ContentPage
     {
         public ContextFlyoutPage()
         {

samples/ControlCatalog/Pages/ContextMenuPage.xaml

@@ -1,7 +1,8 @@
-<UserControl x:Class="ControlCatalog.Pages.ContextMenuPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.ContextMenuPage"
              xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
+             Header="ContextMenu"
              x:DataType="viewModels:ContextPageViewModel">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">A right click menu that can be applied to any control.</TextBlock>
@@ -86,4 +87,4 @@
       </Border>
     </UniformGrid>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ContextMenuPage.xaml.cs

@@ -6,7 +6,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ContextMenuPage : UserControl
+    public partial class ContextMenuPage : ContentPage
     {
         public ContextMenuPage()
         {

samples/ControlCatalog/Pages/CursorPage.xaml

@@ -1,6 +1,7 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
+             Header="Cursors"
              x:Class="ControlCatalog.Pages.CursorPage"
              x:DataType="viewModels:CursorPageViewModel">
   <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,*">
@@ -27,4 +28,4 @@
       </Button>
     </StackPanel>
  </Grid>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CursorPage.xaml.cs

@@ -3,7 +3,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CursorPage : UserControl
+    public partial class CursorPage : ContentPage
     {
         public CursorPage()
         {

samples/ControlCatalog/Pages/CustomDrawing.xaml

@@ -1,15 +1,16 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:local="using:ControlCatalog.Pages"
+             Header="Custom Drawing"
              xmlns:converters="using:ControlCatalog.Converter"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.CustomDrawing">
 
-  <UserControl.Resources>
+  <ContentPage.Resources>
     <converters:DegToRadConverter x:Key="DegToRadConverter"/>
-  </UserControl.Resources>
+  </ContentPage.Resources>
   
   <Grid>
     <Grid.ColumnDefinitions>
@@ -104,4 +105,4 @@
     </Grid>
   </Grid>
   
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/CustomDrawing.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class CustomDrawing : UserControl
+    public partial class CustomDrawing : ContentPage
     {
         public CustomDrawing()
         {

samples/ControlCatalog/Pages/DataGridPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="DataGrid"
              x:Class="ControlCatalog.Pages.DataGridPage">
 
   <StackPanel>
@@ -8,4 +9,4 @@
                      Click="OnLinkClicked" />
   </StackPanel>
 
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/DataGridPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages;
 
-public partial class DataGridPage : UserControl
+public partial class DataGridPage : ContentPage
 {
     public DataGridPage()
     {

samples/ControlCatalog/Pages/DataValidationPage.axaml

@@ -1,14 +1,15 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:viewModels="clr-namespace:ControlCatalog.ViewModels"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             Header="Data Validation"
              x:DataType="viewModels:DataValidationViewModel"
              x:Class="ControlCatalog.Pages.DataValidationPage">
-  <UserControl.DataContext>
+  <ContentPage.DataContext>
     <viewModels:DataValidationViewModel />
-  </UserControl.DataContext>
+  </ContentPage.DataContext>
   <StackPanel TextBlock.TextWrapping="Wrap">
     <Label Target="Email1" Content="Email validation" />
     <TextBox x:Name="Email1"
@@ -38,5 +39,5 @@
       </TextBox.Styles>
     </TextBox>
   </StackPanel>
-</UserControl>
+</ContentPage>
 

samples/ControlCatalog/Pages/DataValidationPage.axaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Markup.Xaml;
 
 namespace ControlCatalog.Pages;
 
-public partial class DataValidationPage : UserControl
+public partial class DataValidationPage : ContentPage
 {
     public DataValidationPage()
     {

samples/ControlCatalog/Pages/DateTimePickerPage.xaml

@@ -1,7 +1,8 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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"
+             Header="DateTimePicker"
              xmlns:sys="using:System"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.DateTimePickerPage">
@@ -207,4 +208,4 @@
       
     </StackPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/DateTimePickerPage.xaml.cs

@@ -2,7 +2,7 @@
 
 namespace ControlCatalog.Pages
 {
-    public partial class DateTimePickerPage : UserControl
+    public partial class DateTimePickerPage : ContentPage
     {
         public DateTimePickerPage()
         {

samples/ControlCatalog/Pages/DialogsPage.xaml

@@ -1,6 +1,7 @@
-<UserControl x:Class="ControlCatalog.Pages.DialogsPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.DialogsPage"
              xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Dialogs"
              xmlns:storage="clr-namespace:Avalonia.Platform.Storage;assembly=Avalonia.Base"
              xmlns:generic="clr-namespace:System.Collections.Generic;assembly=System.Collections">
   <StackPanel Margin="4"
@@ -84,4 +85,4 @@
              PlaceholderText="Picked file content" />
 
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/DialogsPage.xaml.cs

@@ -12,7 +12,7 @@ using Avalonia.Platform.Storage;
 
 namespace ControlCatalog.Pages
 {
-    public partial class DialogsPage : UserControl
+    public partial class DialogsPage : ContentPage
     {
         public DialogsPage()
         {

samples/ControlCatalog/Pages/DragAndDropPage.xaml

@@ -1,15 +1,16 @@
-<UserControl x:Class="ControlCatalog.Pages.DragAndDropPage"
+<ContentPage Theme="{StaticResource ScrollPage}" x:Class="ControlCatalog.Pages.DragAndDropPage"
              xmlns="https://github.com/avaloniaui"
+             Header="Drag And Drop"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-  <UserControl.Styles>
+  <ContentPage.Styles>
     <Style Selector="Border.draggable">
       <Setter Property="Background" Value="Transparent" />
       <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}" />
       <Setter Property="BorderThickness" Value="2" />
       <Setter Property="Padding" Value="16" />
     </Style>
-  </UserControl.Styles>
+  </ContentPage.Styles>
 
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">Example of Drag+Drop capabilities</TextBlock>
@@ -57,4 +58,4 @@
 
     <ContentControl x:Name="DropState" TextBlock.TextWrapping="Wrap" />
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/DragAndDropPage.xaml.cs

@@ -13,7 +13,7 @@ using Avalonia.Platform.Storage;
 
 namespace ControlCatalog.Pages
 {
-    public partial class DragAndDropPage : UserControl
+    public partial class DragAndDropPage : ContentPage
     {
         private readonly DataFormat<string> _customFormat =
             DataFormat.CreateStringApplicationFormat("xxx-avalonia-controlcatalog-custom");

samples/ControlCatalog/Pages/DrawerDemoPage.xaml

@@ -1,11 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Drawer Page"
              x:Class="ControlCatalog.Pages.DrawerDemoPage">
-  <NavigationPage x:Name="SampleNav">
-    <NavigationPage.Styles>
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-        <Setter Property="Background" Value="Transparent" />
-      </Style>
-    </NavigationPage.Styles>
-  </NavigationPage>
-</UserControl>
+  <Grid>
+    <NavigationPage x:Name="SampleNav">
+      <NavigationPage.Styles>
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+          <Setter Property="Background" Value="Transparent" />
+        </Style>
+      </NavigationPage.Styles>
+    </NavigationPage>
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/DrawerDemoPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class DrawerDemoPage : UserControl
+    public partial class DrawerDemoPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/ExpanderPage.xaml

@@ -1,7 +1,8 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
              x:Class="ControlCatalog.Pages.ExpanderPage"
+             Header="Expander"
              x:DataType="viewModels:ExpanderPageViewModel">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">Expands to show nested content</TextBlock>
@@ -72,4 +73,4 @@
       </Expander>
     </StackPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ExpanderPage.xaml.cs

@@ -3,7 +3,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ExpanderPage : UserControl
+    public partial class ExpanderPage : ContentPage
     {
         public ExpanderPage()
         {

samples/ControlCatalog/Pages/FlyoutsPage.axaml

@@ -1,11 +1,12 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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="700"
+             Header="Flyouts"
              x:Class="ControlCatalog.Pages.FlyoutsPage">
 
-    <UserControl.Resources>
+    <ContentPage.Resources>
         <MenuFlyout x:Key="SharedMenuFlyout">
             <MenuItem Header="Item 1">
                 <MenuItem Header="Subitem 1" />
@@ -25,7 +26,7 @@
                 <TextBlock Text="Flyout Content with a custom presenter theme!" TextWrapping="Wrap" />
             </Panel>
         </Flyout>
-    </UserControl.Resources>
+    </ContentPage.Resources>
 
     <ScrollViewer HorizontalScrollBarVisibility="Disabled">
         <StackPanel Spacing="10">
@@ -282,4 +283,4 @@
         </StackPanel>
     </ScrollViewer>
     
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/FlyoutsPage.axaml.cs

@@ -7,7 +7,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class FlyoutsPage : UserControl
+    public partial class FlyoutsPage : ContentPage
     {
         public FlyoutsPage()
         {

samples/ControlCatalog/Pages/FocusPage.xaml

@@ -1,9 +1,10 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:generic="clr-namespace:System.Collections.Generic;assembly=netstandard"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             Header="Focus"
              x:Class="ControlCatalog.Pages.FocusPage">
   <TabControl>
     <TabItem Header="XY Focus">
@@ -47,4 +48,4 @@
       </StackPanel>
     </TabItem>
   </TabControl>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/FocusPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Markup.Xaml;
 
 namespace ControlCatalog.Pages;
 
-public partial class FocusPage : UserControl
+public partial class FocusPage : ContentPage
 {
     public FocusPage()
     {

samples/ControlCatalog/Pages/GesturePage.xaml

@@ -1,11 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Gestures"
              x:Class="ControlCatalog.Pages.GesturePage">
-  <NavigationPage x:Name="SampleNav">
-    <NavigationPage.Styles>
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-        <Setter Property="Background" Value="Transparent" />
-      </Style>
-    </NavigationPage.Styles>
-  </NavigationPage>
-</UserControl>
+  <Grid>
+    <NavigationPage x:Name="SampleNav">
+      <NavigationPage.Styles>
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+          <Setter Property="Background" Value="Transparent" />
+        </Style>
+      </NavigationPage.Styles>
+    </NavigationPage>
+  </Grid>
+</ContentPage>

samples/ControlCatalog/Pages/GesturePage.cs → samples/ControlCatalog/Pages/GesturePage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class GesturePage : UserControl
+    public partial class GesturePage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/HeaderedContentPage.axaml

@@ -1,8 +1,9 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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"
+             Header="HeaderContent"
              x:Class="ControlCatalog.Pages.HeaderedContentPage">
   <WrapPanel ItemWidth="400">
           <HeaderedContentControl Header="This is the text header!"
@@ -26,5 +27,5 @@
             <TextBlock Text="This is the content. But the header can also be non textual"/>
           </HeaderedContentControl>
         </WrapPanel>
-</UserControl>
+</ContentPage>
 

samples/ControlCatalog/Pages/HeaderedContentPage.axaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Markup.Xaml;
 
 namespace ControlCatalog.Pages;
 
-public partial class HeaderedContentPage : UserControl
+public partial class HeaderedContentPage : ContentPage
 {
     public HeaderedContentPage()
     {

samples/ControlCatalog/Pages/ImagePage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Images"
              x:Class="ControlCatalog.Pages.ImagePage">
   <DockPanel>
     <StackPanel DockPanel.Dock="Top" Orientation="Vertical" Spacing="4">
@@ -65,4 +66,4 @@
     </Grid>
     
   </DockPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ImagePage.xaml.cs

@@ -5,7 +5,7 @@ using Avalonia.Media.Imaging;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ImagePage : UserControl
+    public partial class ImagePage : ContentPage
     {
         public ImagePage()
         {

samples/ControlCatalog/Pages/LabelsPage.axaml

@@ -1,13 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:models="using:ControlCatalog.Models"
              mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="250"
+             Header="Labels"
              x:Class="ControlCatalog.Pages.LabelsPage"
              x:Name="_labelsPage"
              x:DataType="models:Person">
-    <UserControl.Styles>
+    <ContentPage.Styles>
         <Style Selector="Label">
             <Setter Property="VerticalAlignment" Value="Center"/>
             <Setter Property="Margin" Value="6,3,0,3"/>
@@ -23,7 +24,7 @@
         <Style Selector="Button[IsDefault=true]">
             <Setter Property="Background" Value="{DynamicResource HighlightBrush}"/>
         </Style>
-    </UserControl.Styles>
+    </ContentPage.Styles>
     <ScrollViewer VerticalScrollBarVisibility="Auto" 
                   HorizontalScrollBarVisibility="Hidden">
         <Grid HorizontalAlignment="Left" VerticalAlignment="Top" RowDefinitions="Auto,Auto,Auto,Auto,Auto,*" ColumnDefinitions="Auto,6,*" Width="246">
@@ -41,4 +42,4 @@
             </StackPanel>
         </Grid>
     </ScrollViewer>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/LabelsPage.axaml.cs

@@ -3,7 +3,7 @@ using ControlCatalog.Models;
 
 namespace ControlCatalog.Pages
 {
-    public partial class LabelsPage : UserControl
+    public partial class LabelsPage : ContentPage
     {
         private Person? _person;
 

samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml

@@ -1,5 +1,6 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="LayoutTransformControl"
              x:Class="ControlCatalog.Pages.LayoutTransformControlPage">
   <DockPanel>
     <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto" Margin="16" DockPanel.Dock="Top">
@@ -24,4 +25,4 @@
       </LayoutTransformControl>
     </Grid>
   </DockPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/LayoutTransformControlPage.xaml.cs

@@ -2,7 +2,7 @@ using Avalonia.Controls;
 
 namespace ControlCatalog.Pages
 {
-    public partial class LayoutTransformControlPage : UserControl
+    public partial class LayoutTransformControlPage : ContentPage
     {
         public LayoutTransformControlPage()
         {

samples/ControlCatalog/Pages/ListBoxPage.xaml

@@ -1,6 +1,7 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
+             Header="ListBox"
              x:Class="ControlCatalog.Pages.ListBoxPage"
              x:DataType="viewModels:ListBoxPageViewModel">
   <DockPanel>
@@ -47,4 +48,4 @@
              SelectionMode="{Binding SelectionMode^}"
              WrapSelection="{Binding WrapSelection}"/>
   </DockPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/ListBoxPage.xaml.cs

@@ -3,7 +3,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class ListBoxPage : UserControl
+    public partial class ListBoxPage : ContentPage
     {
         public ListBoxPage()
         {

samples/ControlCatalog/Pages/MenuPage.xaml

@@ -1,7 +1,8 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
              x:Class="ControlCatalog.Pages.MenuPage"
+             Header="Menus"
              x:DataType="viewModels:MenuPageViewModel">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h2">Exported menu fallback</TextBlock>
@@ -95,4 +96,4 @@
             </StackPanel>
         </WrapPanel>
     </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/MenuPage.xaml.cs

@@ -4,7 +4,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class MenuPage : UserControl
+    public partial class MenuPage : ContentPage
     {
         public MenuPage()
         {

samples/ControlCatalog/Pages/NativeEmbedPage.xaml

@@ -1,10 +1,11 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" 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:local="using:ControlCatalog.Pages"
              d:DesignHeight="800"
              d:DesignWidth="400"
+             Header="Native Embedding"
              x:Class="ControlCatalog.Pages.NativeEmbedPage">
   <DockPanel>
     <Menu DockPanel.Dock="Top">
@@ -65,4 +66,4 @@
       </DockPanel>
     </Grid>
   </DockPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/NativeEmbedPage.xaml.cs

@@ -7,7 +7,7 @@ using Avalonia.Platform;
 
 namespace ControlCatalog.Pages
 {
-    public partial class NativeEmbedPage : UserControl
+    public partial class NativeEmbedPage : ContentPage
     {
         public NativeEmbedPage()
         {

samples/ControlCatalog/Pages/NavigationDemoPage.xaml

@@ -1,11 +1,14 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Header="Navigation Page"
              x:Class="ControlCatalog.Pages.NavigationDemoPage">
-  <NavigationPage x:Name="SampleNav">
-    <NavigationPage.Styles>
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-        <Setter Property="Background" Value="Transparent" />
-      </Style>
-    </NavigationPage.Styles>
-  </NavigationPage>
-</UserControl>
+  <Grid>
+    <NavigationPage x:Name="SampleNav">
+      <NavigationPage.Styles>
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+          <Setter Property="Background" Value="Transparent" />
+        </Style>
+      </NavigationPage.Styles>
+    </NavigationPage>
+</Grid>
+</ContentPage>

samples/ControlCatalog/Pages/NavigationDemoPage.xaml.cs

@@ -4,7 +4,7 @@ using Avalonia.Interactivity;
 
 namespace ControlCatalog.Pages
 {
-    public partial class NavigationDemoPage : UserControl
+    public partial class NavigationDemoPage : ContentPage
     {
         private static readonly (string Group, string Title, string Description, Func<UserControl> Factory)[] Demos =
         {

samples/ControlCatalog/Pages/NotificationsPage.xaml

@@ -1,8 +1,9 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:viewModels="using:ControlCatalog.ViewModels"
              xmlns:system="clr-namespace:System;assembly=System.Runtime"
              x:Class="ControlCatalog.Pages.NotificationsPage"
+             Header="Notifications"
              x:DataType="viewModels:NotificationViewModel">
   <DockPanel>
     <TextBlock DockPanel.Dock="Top"
@@ -25,4 +26,4 @@
       <WindowNotificationManager x:Name="ControlNotifications" />
     </Border>
   </DockPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/NotificationsPage.xaml.cs

@@ -5,7 +5,7 @@ using ControlCatalog.ViewModels;
 
 namespace ControlCatalog.Pages
 {
-    public partial class NotificationsPage : UserControl
+    public partial class NotificationsPage : ContentPage
     {
         private NotificationViewModel _viewModel;
 

samples/ControlCatalog/Pages/NumericUpDownPage.xaml

@@ -1,8 +1,9 @@
-<UserControl xmlns="https://github.com/avaloniaui"
+<ContentPage Theme="{StaticResource ScrollPage}" xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:sys="using:System"
              xmlns:converter="using:ControlCatalog.Converter"
              xmlns:pages="using:ControlCatalog.Pages"
+             Header="NumericUpDown"
              x:Class="ControlCatalog.Pages.NumericUpDownPage"
              x:DataType="pages:NumbersPageViewModel">
   <StackPanel Orientation="Vertical" Spacing="4"
@@ -139,4 +140,4 @@
       </NumericUpDown>
     </StackPanel>
   </StackPanel>
-</UserControl>
+</ContentPage>

samples/ControlCatalog/Pages/NumericUpDownPage.xaml.cs

@@ -9,7 +9,7 @@ using MiniMvvm;
 
 namespace ControlCatalog.Pages
 {
-    public partial class NumericUpDownPage : UserControl
+    public partial class NumericUpDownPage : ContentPage
     {
         public NumericUpDownPage()
         {