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"
+<DrawerPage x:Class="ControlCatalog.MainView"
-             xmlns="https://github.com/avaloniaui"
+            xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:local="using:ControlCatalog"
+            xmlns:local="using:ControlCatalog"
-             xmlns:controls="using:ControlSamples"
+            xmlns:controls="using:ControlSamples"
-             xmlns:models="using:ControlCatalog.Models"
+            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:pages="using:ControlCatalog.Pages"
+            xmlns:models="using:ControlCatalog.Models"
-             xmlns:viewModels="using:ControlCatalog.ViewModels"
+            xmlns:pages="using:ControlCatalog.Pages"
-             x:DataType="viewModels:MainWindowViewModel">
+            xmlns:viewModels="using:ControlCatalog.ViewModels"
-  <Grid>
+            d:DesignWidth="1200"
-    <Grid.Styles>
+            d:DesignHeight="720"
-      <Style Selector="TextBlock.h2">
+            x:DataType="viewModels:MainWindowViewModel"
-        <Setter Property="TextWrapping" Value="Wrap" />
+            DrawerLayoutBehavior="Split"
-        <Setter Property="MaxWidth" Value="400" />
+            IsOpen="{Binding IsDrawerOpened , Mode=TwoWay}"
-        <Setter Property="HorizontalAlignment" Value="Left" />
+            DisplayMode="{Binding DisplayMode, Mode=TwoWay}"
-      </Style>
+            DrawerLength="260"
-    </Grid.Styles>
+            CompactDrawerLength="52"
-    <controls:HamburgerMenu Name="Sidebar">
+            DrawerFooter="{Binding}"
-      <TabItem Header="Composition" IsSelected="True">
+            Drawer="{Binding}"
-        <pages:CompositionPage />
+            DrawerHeader="{Binding}">
-      </TabItem>
+  <Design.DataContext>
-      <TabItem Header="Accelerator">
+    <viewModels:MainWindowViewModel/>
-        <pages:AcceleratorPage />
+  </Design.DataContext>
-      </TabItem>
+  <DrawerPage.Resources>
-      <TabItem Header="Acrylic">
+    <ResourceDictionary>
-        <pages:AcrylicPage />
+      <x:Double x:Key="TabbedPageTabItemHeaderFontSize">20</x:Double>
-      </TabItem>
+      <Thickness x:Key="TabbedPageTabStripPadding">10</Thickness>
-      <TabItem Header="AdornerLayer">
+    </ResourceDictionary>
-        <pages:AdornerLayerPage />
+  </DrawerPage.Resources>
-      </TabItem>
+  <DrawerPage.Styles>
-      <TabItem Header="AutoCompleteBox">
+    <Style Selector="TextBlock.h2">
-        <pages:AutoCompleteBoxPage />
+      <Setter Property="TextWrapping" Value="Wrap" />
-      </TabItem>
+      <Setter Property="MaxWidth" Value="400" />
-      <TabItem Header="Border">
+      <Setter Property="HorizontalAlignment" Value="Left" />
-        <pages:BorderPage />
+    </Style>
-      </TabItem>
+  </DrawerPage.Styles>
-      <TabItem Header="BitmapCache">
+  <DrawerPage.DrawerTemplate>
-        <pages:BitmapCachePage />
+    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
-      </TabItem>
+      <ListBox ItemsSource="{Binding Pages}"
-      <TabItem Header="Buttons">
+               Padding="0,10,0,10"
-        <pages:ButtonsPage />
+               Background="Transparent"
-      </TabItem>
+               ItemContainerTheme="{StaticResource NavHeaderItem}"
-      <TabItem Header="ButtonSpinner">
+               SelectedIndex="{Binding SelectedPageIndex}">
-        <pages:ButtonSpinnerPage />
+        <ListBox.ItemTemplate>
-      </TabItem>
+          <DataTemplate x:DataType="viewModels:PageItem">
-      <TabItem Header="Calendar">
+            <Grid ColumnDefinitions="20,*">
-        <pages:CalendarPage />
+              <PathIcon Grid.Column="0" Width="16" Height="16"
-      </TabItem>
+                        HorizontalAlignment="Center"
-      <TabItem Header="Canvas">
+                        VerticalAlignment="Center"
-        <pages:CanvasPage />
+                        Data="{Binding IconData}"/>
-      </TabItem>
+              <TextBlock Grid.Column="1" Text="{Binding Header}"
-      <TabItem Header="CommandBar"
+                         VerticalAlignment="Center"
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+                         Margin="12,0,0,0"
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+                         TextTrimming="CharacterEllipsis"/>
-        <pages:CommandBarPage />
+            </Grid>
-      </TabItem>
+          </DataTemplate>
-      <TabItem Header="Carousel"
+        </ListBox.ItemTemplate>
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+      </ListBox>
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+    </DataTemplate>
-        <pages:CarouselDemoPage />
+  </DrawerPage.DrawerTemplate>
-      </TabItem>
+  <DrawerPage.DrawerHeaderTemplate>
-      <TabItem Header="CarouselPage"
+    <DataTemplate x:DataType="viewModels:MainWindowViewModel">
-               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
+      <DockPanel LastChildFill="True" Margin="6">
-               ScrollViewer.VerticalScrollBarVisibility="Disabled">
+        <TextBox Name="SearchBox"
-        <pages:CarouselDemoPage />
+                 DockPanel.Dock="Bottom"
-      </TabItem>
+                 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">
+  <NavigationPage Name="NavPage"/>
-        <pages:CheckBoxPage />
+</DrawerPage>
-      </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>

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 +
+                        SetValue(BackgroundProperty, semiTransparentBrush, Avalonia.Data.BindingPriority.Style)!.Dispose +
-                        Sidebar.SetValue(SplitView.PaneBackgroundProperty, 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)
+            if (DataContext == null)
-                Decorations.SelectedIndex = (int)window.WindowDecorations;
+                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">
+      <WrapPanel HorizontalAlignment="Left">
-      <StackPanel>
+        <StackPanel>
-        <Menu>
+          <Menu>
-          <MenuItem Header="_First">
+            <MenuItem Header="_First">
-            <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
+              <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
-            <MenuItem Header="_Disabled Menu Item" IsEnabled="False" InputGesture="Ctrl+D" />
+              <MenuItem Header="_Disabled Menu Item" IsEnabled="False" InputGesture="Ctrl+D" />
-            <Separator />
+              <Separator />
-            <MenuItem Header="Menu with Sub _Menu">
+              <MenuItem Header="Menu with Sub _Menu">
-              <MenuItem Header="Submenu _1" />
+                <MenuItem Header="Submenu _1" />
-              <MenuItem Header="Submenu _2 with Submenu">
+                <MenuItem Header="Submenu _2 with Submenu">
-                <MenuItem Header="Submenu Level 2" />
+                  <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="Menu Item with _Icon" InputGesture="Ctrl+Shift+B">
-                <MenuItem Header="Submenu Level 2" />
+                <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 Header="_Second">
-              <MenuItem.Icon>
+              <MenuItem Header="Second _Menu Item" />
-                <Image Source="/Assets/github_icon.png" />
+              <MenuItem IsChecked="True" Header="Second _Menu toggle item" ToggleType="CheckBox" />
-              </MenuItem.Icon>
+              <Separator />
-            </MenuItem>
+              <MenuItem GroupName="A" Header="Radio 1 - group" ToggleType="Radio" />
-            <MenuItem Header="Menu Item with _Checkbox" ToggleType="CheckBox" />
+              <MenuItem IsChecked="True" GroupName="A" Header="Radio 2 - group" ToggleType="Radio" />
-          </MenuItem>
+              <MenuItem GroupName="A" Header="Radio 3 - group" ToggleType="Radio">
-          <MenuItem Header="_Second">
+                <MenuItem Header="Radio 4 - group" ToggleType="Radio" GroupName="A" />
-            <MenuItem Header="Second _Menu Item" />
+                <MenuItem Header="Radio 5 - group" ToggleType="Radio" GroupName="A" />
-            <MenuItem IsChecked="True" Header="Second _Menu toggle item" ToggleType="CheckBox" />
+              </MenuItem>
-            <Separator />
+              <Separator />
-            <MenuItem GroupName="A" Header="Radio 1 - group" ToggleType="Radio" />
+              <MenuItem Header="Radio 1" ToggleType="Radio" />
-            <MenuItem IsChecked="True" GroupName="A" Header="Radio 2 - group" ToggleType="Radio" />
+              <MenuItem IsChecked="True" Header="Radio 2" ToggleType="Radio" />
-            <MenuItem GroupName="A" Header="Radio 3 - group" ToggleType="Radio">
+              <MenuItem Header="Radio 3" ToggleType="Radio">
-              <MenuItem Header="Radio 4 - group" ToggleType="Radio" GroupName="A" />
+                <MenuItem Header="Radio 4" ToggleType="Radio" />
-              <MenuItem Header="Radio 5 - group" ToggleType="Radio" GroupName="A" />
+                <MenuItem Header="Radio 5" ToggleType="Radio" />
-            </MenuItem>
+              </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 Header="Thir_d">
-          <MenuItem Header="Thir_d">
+              <MenuItem Header="About"/>
-            <MenuItem Header="About"/>
+              <MenuItem Header="_Child">
-            <MenuItem Header="_Child">
+                <MenuItem Header="_Grandchild"/>
-              <MenuItem Header="_Grandchild"/>
+              </MenuItem>
             </MenuItem>
-          </MenuItem>
+          </Menu>
-        </Menu>
+        </StackPanel>
-      </StackPanel>
 
-    </WrapPanel>
+      </WrapPanel>
 
-    <StackPanel Spacing="10">
+      <StackPanel Spacing="10">
-      <TextBlock Classes="h2">Accelerator Support</TextBlock>
+        <TextBlock Classes="h2">Accelerator Support</TextBlock>
 
-      <TabControl Margin="10" BorderBrush="Gray" BorderThickness="1">
+        <TabControl Margin="10" BorderBrush="Gray" BorderThickness="1">
-        <TabItem Header="_Tab 1">
+          <TabItem Header="_Tab 1">
-          <StackPanel>
+            <StackPanel>
-            <TextBlock Margin="5">This is tab 1 content</TextBlock>
+              <TextBlock Margin="5">This is tab 1 content</TextBlock>
-            <Label Name="Tab1Label1" Target="Tab1TextBox1">_Label Tab1Label1</Label>
+              <Label Name="Tab1Label1" Target="Tab1TextBox1">_Label Tab1Label1</Label>
-            <TextBox Name="Tab1TextBox1" Margin="5">This is tab 1 content</TextBox>
+              <TextBox Name="Tab1TextBox1" Margin="5">This is tab 1 content</TextBox>
-            <Label Name="Tab1Label2" Target="Tab1TextBox2">Label _Tab1Label2</Label>
+              <Label Name="Tab1Label2" Target="Tab1TextBox2">Label _Tab1Label2</Label>
-            <TextBox Name="Tab1TextBox2" Margin="5">This is tab 1 content</TextBox>
+              <TextBox Name="Tab1TextBox2" Margin="5">This is tab 1 content</TextBox>
-          </StackPanel>
+            </StackPanel>
 
-        </TabItem>
+          </TabItem>
-        <TabItem Header="T_ab 2">
+          <TabItem Header="T_ab 2">
-          <TextBlock Margin="5">This is tab 2 content</TextBlock>
+            <TextBlock Margin="5">This is tab 2 content</TextBlock>
-        </TabItem>
+          </TabItem>
-        <TabItem Header="_Tab 3">
+          <TabItem Header="_Tab 3">
 
-        </TabItem>
+          </TabItem>
-        <TabItem Header="_Tab 4">
+          <TabItem Header="_Tab 4">
-          <TextBlock Margin="5">This is tab 4 content</TextBlock>
+            <TextBlock Margin="5">This is tab 4 content</TextBlock>
-        </TabItem>
+          </TabItem>
-        <TabItem Header="_Fab 5">
+          <TabItem Header="_Fab 5">
-          <TextBlock Margin="5">This is fab 5 content</TextBlock>
+            <TextBlock Margin="5">This is fab 5 content</TextBlock>
-        </TabItem>
+          </TabItem>
-      </TabControl>
+        </TabControl>
-    </StackPanel>
+      </StackPanel>
 
 
-    <StackPanel Spacing="10">
+      <StackPanel Spacing="10">
-      <Label Name="Label0">Label with Ac_celerator 'C' and no Target</Label>
+        <Label Name="Label0">Label with Ac_celerator 'C' and no Target</Label>
-      <TextBox Name="TextBox0" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox0" Text="Some Text"></TextBox>
 
-      <Label Name="Label1" Target="TextBox1">_Label with Accelerator 'L'</Label>
+        <Label Name="Label1" Target="TextBox1">_Label with Accelerator 'L'</Label>
-      <TextBox Name="TextBox1" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox1" Text="Some Text"></TextBox>
 
-      <Label Name="Label2" Target="TextBox2">La_bel with Accelerator 'B'</Label>
+        <Label Name="Label2" Target="TextBox2">La_bel with Accelerator 'B'</Label>
-      <TextBox Name="TextBox2" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox2" Text="Some Text"></TextBox>
 
-      <Label Name="Label3" Target="TextBox3">L_abel with Accelerator 'A'</Label>
+        <Label Name="Label3" Target="TextBox3">L_abel with Accelerator 'A'</Label>
-      <TextBox Name="TextBox3" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox3" Text="Some Text"></TextBox>
 
-      <Label Name="Label4" Target="TextBox4">La_bel with Accelerator 'B'</Label>
+        <Label Name="Label4" Target="TextBox4">La_bel with Accelerator 'B'</Label>
-      <TextBox Name="TextBox4" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox4" Text="Some Text"></TextBox>
 
-      <Label Name="Label5" Target="TextBox5">_Flabel with Accelerator 'F' (Same as in Menu > File)</Label>
+        <Label Name="Label5" Target="TextBox5">_Flabel with Accelerator 'F' (Same as in Menu > File)</Label>
-      <TextBox Name="TextBox5" Text="Some Text"></TextBox>
+        <TextBox Name="TextBox5" Text="Some Text"></TextBox>
 
-    </StackPanel>
+      </StackPanel>
 
-    <StackPanel Spacing="10" Orientation="Horizontal">
+      <StackPanel Spacing="10" Orientation="Horizontal">
-      <Button Name="Button1">_Button 1</Button>
+        <Button Name="Button1">_Button 1</Button>
-      <Button Name="Button2">_Button 2</Button>
+        <Button Name="Button2">_Button 2</Button>
-      <Button Name="Button3">_Button 3</Button>
+        <Button Name="Button3">_Button 3</Button>
+      </StackPanel>
     </StackPanel>
-  </StackPanel>
+</ContentPage>
-</UserControl>

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>
+  </ContentPage.Styles>
-  <StackPanel Spacing="20">
+    <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"
+          <ExperimentalAcrylicMaterial BackgroundSource="Digger" TintColor="White" />
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#FF0000"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
         </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>
+      <UniformGrid x:Name="BordersGrid"
-        <ExperimentalAcrylicBorder.Material>
+                   HorizontalAlignment="Stretch"
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+                   MaxWidth="660"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                   Columns="3">
-                                       TintColor="#00FF00"
+        <UniformGrid.Styles>
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+          <Style Selector="ExperimentalAcrylicBorder">
-        </ExperimentalAcrylicBorder.Material>
+            <Setter Property="Height" Value="{Binding $self.Bounds.Width}" />
-      </ExperimentalAcrylicBorder>
+            <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>
-        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#000000"
+                                         TintColor="#00FF00"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
+          </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#0000FF"
+                                         TintColor="#000000"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
+          </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#FFFF00"
+                                         TintColor="#0000FF"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
+          </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        </ExperimentalAcrylicBorder>
 
-      <ExperimentalAcrylicBorder>
+        <ExperimentalAcrylicBorder>
-        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#000000"
+                                         TintColor="#FFFF00"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
+          </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        </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>
-        <ExperimentalAcrylicBorder.Material>
+          <ExperimentalAcrylicBorder.Material>
-          <ExperimentalAcrylicMaterial BackgroundSource="Digger"
+            <ExperimentalAcrylicMaterial BackgroundSource="Digger"
-                                       MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
+                                         MaterialOpacity="{Binding #MaterialOpacitySlider.Value}"
-                                       TintColor="#3c3c3c"
+                                         TintColor="White"
-                                       TintOpacity="{Binding #TintOpacitySlider.Value}" />
+                                         TintOpacity="{Binding #TintOpacitySlider.Value}" />
-        </ExperimentalAcrylicBorder.Material>
+          </ExperimentalAcrylicBorder.Material>
-      </ExperimentalAcrylicBorder>
+        </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>
-
+    </StackPanel>
-    </UniformGrid>
+</ContentPage>
-
-
-    <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>

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>
+      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Top">
-    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto" Margin="16" DockPanel.Dock="Top">
+        <Button Name="AddAdorner"
-      <TextBlock Grid.Column="0" Grid.Row="0">Rotation</TextBlock>
+                Click="AddAdorner_OnClick"
-      <Slider Name="rotation" Maximum="360" Grid.Column="1" Grid.Row="0"/>
+                Content="Add Adorner"
-    </Grid>
+                Margin="6" />
+        <Button Name="RemoveAdorner"
+                Click="RemoveAdorner_OnClick"
+                Content="Remove Adorner"
+                Margin="6" />
+      </StackPanel>
 
-    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Top">
+      <Grid ColumnDefinitions="24,Auto,24"
-      <Button Name="AddAdorner" 
+            RowDefinitions="24,Auto,24"
-              Click="AddAdorner_OnClick"
+            HorizontalAlignment="Center"
-              Content="Add Adorner" 
+            VerticalAlignment="Center">
-              Margin="6" />
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="0"/>
-      <Button Name="RemoveAdorner" 
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="0" Grid.Row="1"/>
-              Click="RemoveAdorner_OnClick"
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="2" Grid.Row="1"/>
-              Content="Remove Adorner"
+        <Border Background="{DynamicResource SystemAccentColor}" Grid.Column="1" Grid.Row="2"/>
-              Margin="6" />
-    </StackPanel>
 
-    <Grid ColumnDefinitions="24,Auto,24" 
+        <LayoutTransformControl Name="layoutTransform" Grid.Column="1" Grid.Row="1">
-          RowDefinitions="24,Auto,24"
+          <LayoutTransformControl.LayoutTransform>
-          HorizontalAlignment="Center"
+            <RotateTransform Angle="{Binding #rotation.Value}"/>
-          VerticalAlignment="Center">
+          </LayoutTransformControl.LayoutTransform>
-      <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">
+          <Button Name="AdornerButton"
-        <LayoutTransformControl.LayoutTransform>
+                  Content="Adorned Button"
-          <RotateTransform Angle="{Binding #rotation.Value}"/>
+                  HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
-        </LayoutTransformControl.LayoutTransform>
+                  VerticalContentAlignment="Center" VerticalAlignment="Stretch"
-
+                  Width="200" Height="42">
-        <Button Name="AdornerButton"
+            <AdornerLayer.Adorner>
-                Content="Adorned Button" 
+              <Border AdornerLayer.IsClipEnabled="False" ClipToBounds="False" Background="Red" Opacity="0.3" Margin="-5" Padding="5"
-                HorizontalAlignment="Stretch" HorizontalContentAlignment="Center"
+                      IsHitTestVisible="False">
-                VerticalContentAlignment="Center" VerticalAlignment="Stretch" 
+                <Canvas
-                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,0" EndPoint="10000,0" Stroke="Cyan" StrokeThickness="1" />
-                <Line StartPoint="-10000,42" EndPoint="10000,42" 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="0,-10000" EndPoint="0,10000" Stroke="Cyan" StrokeThickness="1" />
-                <Line StartPoint="200,-10000" EndPoint="200,10000" Stroke="Cyan" StrokeThickness="1" />
+                  <Line StartPoint="200,-10000" EndPoint="200,10000" Stroke="Cyan" StrokeThickness="1" />
-              </Canvas>
+                </Canvas>
-            </Border>
+              </Border>
-          </AdornerLayer.Adorner>
+            </AdornerLayer.Adorner>
-          <Button.ContextMenu>
+            <Button.ContextMenu>
-            <ContextMenu PlacementTarget="{ResolveByName AdornerCanvas}" Placement="TopEdgeAlignedLeft">
+              <ContextMenu PlacementTarget="{ResolveByName AdornerCanvas}" Placement="TopEdgeAlignedLeft">
-              <MenuItem Header="Menu 1"/>
+                <MenuItem Header="Menu 1"/>
-              <MenuItem Header="Menu 2"/>
+                <MenuItem Header="Menu 2"/>
-            </ContextMenu>
+              </ContextMenu>
-          </Button.ContextMenu>
+            </Button.ContextMenu>
-        </Button>
+          </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"
+  <ScrollViewer
-              Spacing="4"
+  HorizontalScrollBarVisibility="Disabled">
-              MaxWidth="660">
+    <StackPanel Orientation="Vertical"
-    <TextBlock Classes="h2">A control into which the user can input text</TextBlock>
+                Spacing="4"
+                MaxWidth="660">
+      <TextBlock Classes="h2">A control into which the user can input text</TextBlock>
 
-    <UniformGrid Margin="-8,0"
+      <UniformGrid Margin="-8,0"
-                 Columns="2">
+                   Columns="2">
-      <UniformGrid.Styles>
+        <UniformGrid.Styles>
-        <Style Selector="StackPanel">
+          <Style Selector="StackPanel">
-          <Setter Property="Margin" Value="8" />
+            <Setter Property="Margin" Value="8" />
-        </Style>
+          </Style>
-      </UniformGrid.Styles>
+        </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" />
+        <TextBlock Text="With Validation Errors" />
-        <AutoCompleteBox MinimumPrefixLength="0" />
+        <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>
+  </ScrollViewer>
-</UserControl>
+</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>
+      <DockPanel.Resources>
-            <BitmapCache x:Key="Cache"/>
+        <BitmapCache x:Key="Cache"/>
-            <ScaleTransform x:Key="Transform" ScaleX="1" ScaleY="{Binding $self.ScaleX, Mode=OneWay}"/>
+        <ScaleTransform x:Key="Transform" ScaleX="1" ScaleY="{Binding $self.ScaleX, Mode=OneWay}"/>
-            <TranslateTransform x:Key="SubPixelTransform"/>
+        <TranslateTransform x:Key="SubPixelTransform"/>
-        </DockPanel.Resources>
+      </DockPanel.Resources>
-        <StackPanel DockPanel.Dock="Right" ZIndex="1">
+      <StackPanel DockPanel.Dock="Right" ZIndex="1">
-            <TextBlock>Render at scale</TextBlock>
+        <TextBlock>Render at scale</TextBlock>
-            <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Cache}, Path=RenderAtScale, Mode=TwoWay}" Width="200"/>
+        <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Cache}, Path=RenderAtScale, Mode=TwoWay}" Width="200"/>
-            <TextBlock>Scale</TextBlock>
+        <TextBlock>Scale</TextBlock>
-            <Slider Minimum="0.1" Maximum="4" Value="{Binding Source={StaticResource Transform}, Path=ScaleX, Mode=TwoWay}" Width="200"/>
+        <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=EnableClearType, Mode=TwoWay}">Enable clear type</CheckBox>
 
-            <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=SnapsToDevicePixels, Mode=TwoWay}">Snap to device pixels</CheckBox>
+        <CheckBox IsChecked="{Binding Source={StaticResource Cache}, Path=SnapsToDevicePixels, Mode=TwoWay}">Snap to device pixels</CheckBox>
-            <TextBlock>Subpixel offset X</TextBlock>
+        <TextBlock>Subpixel offset X</TextBlock>
-            <Slider Minimum="0" Maximum="1" Value="{Binding Source={StaticResource SubPixelTransform}, Path=X, Mode=TwoWay}" Width="200"/>
+        <Slider Minimum="0" Maximum="1" Value="{Binding Source={StaticResource SubPixelTransform}, Path=X, Mode=TwoWay}" Width="200"/>
-        </StackPanel>
+      </StackPanel>
-        <Decorator RenderTransform="{StaticResource SubPixelTransform}">
+      <Decorator RenderTransform="{StaticResource SubPixelTransform}">
-            <Border Background="Beige" Margin="10"
+        <Border Background="Beige" Margin="10"
-                    RenderTransform="{StaticResource Transform}"
+                RenderTransform="{StaticResource Transform}"
-                    RenderTransformOrigin="0.5,0.5">
+                RenderTransformOrigin="0.5,0.5">
-                <Border Margin="10"
+          <Border Margin="10"
-                    CacheMode="{StaticResource Cache}"
+                  CacheMode="{StaticResource Cache}"
-                    TextElement.Foreground="Black">
+                  TextElement.Foreground="Black">
-                    <Border
+            <Border
-                        Margin="10"
+            Margin="10"
-                        BorderThickness="2"
+            BorderThickness="2"
-                        BorderBrush="Black"
+            BorderBrush="Black"
-                        Background="White">
+            Background="White">
-                        <StackPanel>
+              <StackPanel>
-                            <Slider MinWidth="200"/>
+                <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>
+                <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>
+              </StackPanel>
-                    </Border>
-                </Border>
             </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">
+  <ScrollViewer
-    <StackPanel.Resources>
+  HorizontalScrollBarVisibility="Disabled">
-      <SolidColorBrush x:Key="SemiTransparentSystemAccentBrush" Color="{DynamicResource SystemAccentColor}" Opacity="0.4" />
+    <StackPanel Orientation="Vertical" Spacing="4">
-    </StackPanel.Resources>
+      <StackPanel.Resources>
-    <TextBlock Classes="h2">A control which decorates a child with a border and background</TextBlock>
+        <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"
+      <StackPanel Orientation="Vertical"
-                Margin="0,16,0,0"
+                  Margin="0,16,0,0"
-                HorizontalAlignment="Center"
+                  HorizontalAlignment="Center"
-                Spacing="16">
+                  Spacing="16">
-      <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16">
+        <Border BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="2" Padding="16">
-        <TextBlock>Border</TextBlock>
+          <TextBlock>Border</TextBlock>
-      </Border>
+        </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
-              BackgroundSizing="CenterBorder"
+                BackgroundSizing="CenterBorder"
-              BorderThickness="8"
+                BorderThickness="8"
-              Padding="12">
+                Padding="12">
-        <TextBlock>Background And CenterBorder</TextBlock>
+          <TextBlock>Background And CenterBorder</TextBlock>
-      </Border>
+        </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
-              BackgroundSizing="InnerBorderEdge"
+                BackgroundSizing="InnerBorderEdge"
-              BorderThickness="8"
+                BorderThickness="8"
-              Padding="12">
+                Padding="12">
-        <TextBlock>Background And InnerBorderEdge</TextBlock>
+          <TextBlock>Background And InnerBorderEdge</TextBlock>
-      </Border>
+        </Border>
-      <Border Background="{DynamicResource SystemAccentColorDark1}" 
+        <Border Background="{DynamicResource SystemAccentColorDark1}"
-              BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}" 
+                BorderBrush="{DynamicResource SemiTransparentSystemAccentBrush}"
-              BackgroundSizing="OuterBorderEdge"
+                BackgroundSizing="OuterBorderEdge"
-              BorderThickness="8"
+                BorderThickness="8"
-              Padding="12">
+                Padding="12">
-        <TextBlock>Background And OuterBorderEdge</TextBlock>
+          <TextBlock>Background And OuterBorderEdge</TextBlock>
-      </Border>
+        </Border>
-      <Border BorderBrush="{DynamicResource SystemAccentColor}"
+        <Border BorderBrush="{DynamicResource SystemAccentColor}"
-              BorderThickness="4"
+                BorderThickness="4"
-              CornerRadius="8"
+                CornerRadius="8"
-              Padding="16">
+                Padding="16">
-        <TextBlock>Rounded Corners</TextBlock>
+          <TextBlock>Rounded Corners</TextBlock>
-      </Border>
+        </Border>
-      <Border Background="{DynamicResource SystemAccentColor}"
+        <Border Background="{DynamicResource SystemAccentColor}"
-              CornerRadius="8"
+                CornerRadius="8"
-              Padding="16">
+                Padding="16">
-        <TextBlock>Rounded Corners</TextBlock>
+          <TextBlock>Rounded Corners</TextBlock>
-      </Border>
+        </Border>
-      <Border Width="100" Height="100"
+        <Border Width="100" Height="100"
-              BorderThickness="0"
+                BorderThickness="0"
-              Background="White"
+                Background="White"
-              CornerRadius="100" ClipToBounds="True">
+                CornerRadius="100" ClipToBounds="True">
-        <Image Source="/Assets/maple-leaf-888807_640.jpg" Stretch="UniformToFill" />
+          <Image Source="/Assets/maple-leaf-888807_640.jpg" Stretch="UniformToFill" />
-      </Border>
+        </Border>
-      <TextBlock Text="Border with Clipping" HorizontalAlignment="Center" />
+        <TextBlock Text="Border with Clipping" HorizontalAlignment="Center" />
+      </StackPanel>
     </StackPanel>
-  </StackPanel>
+  </ScrollViewer>
-</UserControl>
+</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">
+  <Grid>
-    <NavigationPage.Styles>
+    <NavigationPage x:Name="SampleNav">
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+      <NavigationPage.Styles>
-        <Setter Property="Background" Value="Transparent" />
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-      </Style>
+          <Setter Property="Background" Value="Transparent" />
-    </NavigationPage.Styles>
+        </Style>
-  </NavigationPage>
+      </NavigationPage.Styles>
-</UserControl>
+    </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>
+  </ContentPage.Resources>
-  <NavigationPage x:Name="SampleNav" />
+  <Grid>
-</UserControl>
+    <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"
+<TabbedPage xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:pages="using:ControlCatalog.Pages"
+            xmlns:pages="using:ControlCatalog.Pages"
-             x:Class="ControlCatalog.Pages.CompositionPage">
+            Header="Composition"
-  <TabControl>
+            x:Class="ControlCatalog.Pages.CompositionPage">
-    <TabItem Header="Implicit animations">
+  <ContentPage Theme="{StaticResource ScrollPage}" Header="Implicit animations">
-      <StackPanel>
+    <StackPanel>
-        <Grid ColumnDefinitions="*,10,40" Margin="0 0 40 0">
+      <Grid ColumnDefinitions="*,10,40" Margin="0 0 40 0">
-          <ItemsControl x:Name="Items">
+        <ItemsControl x:Name="Items">
-            <ItemsControl.ItemsPanel>
+          <ItemsControl.ItemsPanel>
-              <ItemsPanelTemplate>
+            <ItemsPanelTemplate>
-                <WrapPanel/>
+              <WrapPanel/>
-              </ItemsPanelTemplate>
+            </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
+          </ItemsControl.ItemsPanel>
-            <ItemsControl.DataTemplates>
+          <ItemsControl.DataTemplates>
-              <DataTemplate DataType="pages:CompositionPageColorItem">
+            <DataTemplate DataType="pages:CompositionPageColorItem">
-                <Border 
+              <Border
-                  pages:CompositionPage.EnableAnimations="True"
+              pages:CompositionPage.EnableAnimations="True"
-                  Padding="10" BorderBrush="Gray" BorderThickness="2"
+              Padding="10" BorderBrush="Gray" BorderThickness="2"
-                  Background="{Binding ColorBrush}" Width="100" Height="100" Margin="10">
+              Background="{Binding ColorBrush}" Width="100" Height="100" Margin="10">
-                    <TextBlock Text="{Binding ColorHexValue}"/>
+                <TextBlock Text="{Binding ColorHexValue}"/>
-                </Border>
+              </Border>
-              </DataTemplate>
+            </DataTemplate>
-            </ItemsControl.DataTemplates>
+          </ItemsControl.DataTemplates>
-          </ItemsControl>
+        </ItemsControl>
-          <GridSplitter Margin="2" BorderThickness="1" BorderBrush="Gray" 
+        <GridSplitter Margin="2" BorderThickness="1" BorderBrush="Gray"
-                        Background="#e0e0e0" Grid.Column="1"
+                      Background="#e0e0e0" Grid.Column="1"
-                        ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"
+                      ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"
-          />
+                      />
-          <Border Grid.Column="2">
+        <Border Grid.Column="2">
-            <LayoutTransformControl HorizontalAlignment="Center" MinWidth="30">
+          <LayoutTransformControl HorizontalAlignment="Center" MinWidth="30">
-              <LayoutTransformControl.LayoutTransform>
+            <LayoutTransformControl.LayoutTransform>
-                <RotateTransform Angle="90"/>
+              <RotateTransform Angle="90"/>
-              </LayoutTransformControl.LayoutTransform>
+            </LayoutTransformControl.LayoutTransform>
-              <TextBlock>Resize me</TextBlock>
+            <TextBlock>Resize me</TextBlock>
-            </LayoutTransformControl>
+          </LayoutTransformControl>
-          </Border>
+        </Border>
-        </Grid>
+      </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>
+      <Control x:Name="CustomVisualHost" />
-    <TabItem Header="Animation">
+    </DockPanel>
-      <DockPanel>
+  </ContentPage>
-        <Button DockPanel.Dock="Top" Margin="10" Click="ButtonThreadSleep">Thread.Sleep(10000);</Button>
+</TabbedPage>
-        <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>

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">
+  <Grid>
-    <NavigationPage.Styles>
+    <NavigationPage x:Name="SampleNav">
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+      <NavigationPage.Styles>
-        <Setter Property="Background" Value="Transparent" />
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-      </Style>
+          <Setter Property="Background" Value="Transparent" />
-    </NavigationPage.Styles>
+        </Style>
-  </NavigationPage>
+      </NavigationPage.Styles>
-</UserControl>
+    </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">
+  <Grid>
-    <NavigationPage.Styles>
+    <NavigationPage x:Name="SampleNav">
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+      <NavigationPage.Styles>
-        <Setter Property="Background" Value="Transparent" />
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-      </Style>
+          <Setter Property="Background" Value="Transparent" />
-    </NavigationPage.Styles>
+        </Style>
-  </NavigationPage>
+      </NavigationPage.Styles>
-</UserControl>
+    </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">
+  <Grid>
-    <NavigationPage.Styles>
+    <NavigationPage x:Name="SampleNav">
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+      <NavigationPage.Styles>
-        <Setter Property="Background" Value="Transparent" />
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-      </Style>
+          <Setter Property="Background" Value="Transparent" />
-    </NavigationPage.Styles>
+        </Style>
-  </NavigationPage>
+      </NavigationPage.Styles>
-</UserControl>
+    </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">
+  <Grid>
-    <NavigationPage.Styles>
+    <NavigationPage x:Name="SampleNav">
-      <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
+      <NavigationPage.Styles>
-        <Setter Property="Background" Value="Transparent" />
+        <Style Selector="NavigationPage#SampleNav /template/ Border#PART_NavigationBar">
-      </Style>
+          <Setter Property="Background" Value="Transparent" />
-    </NavigationPage.Styles>
+        </Style>
-  </NavigationPage>
+      </NavigationPage.Styles>
-</UserControl>
+    </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()
         {