Page Prototypes

samples/Avalonia.Labs.Catalog/App.axaml.cs

@@ -3,6 +3,7 @@
 using Avalonia.Markup.Xaml;
 using Avalonia.Labs.Catalog.ViewModels;
 using Avalonia.Labs.Catalog.Views;
+using Avalonia.Labs.Controls;
 
 namespace Avalonia.Labs.Catalog;
 
@@ -19,17 +20,26 @@ public override void OnFrameworkInitializationCompleted()
         {
             desktop.MainWindow = new MainWindow
             {
-                DataContext = new MainViewModel()
+                Content = new PageNavigationHost()
+                {
+                    Page = new MainView()
+                    {
+                        DataContext = new MainViewModel()
+                    }
+                }
             };
         }
         else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
         {
-            singleViewPlatform.MainView = new MainView
+            singleViewPlatform.MainView = new PageNavigationHost()
             {
-                DataContext = new MainViewModel()
+                Page = new MainView()
+                {
+                    DataContext = new MainViewModel()
+                }
             };
         }
 
         base.OnFrameworkInitializationCompleted();
     }
-}
+}

samples/Avalonia.Labs.Catalog/Avalonia.Labs.Catalog.csproj

@@ -9,6 +9,11 @@
     <AvaloniaResource Include="Assets\**" />
     <TrimmerRootDescriptor Include="Roots.xml" />
   </ItemGroup>
+  <Target Name="_InjectAdditionalFiles" BeforeTargets="GenerateMSBuildEditorConfigFileShouldRun">
+    <ItemGroup>
+      <AdditionalFiles Include="@(AvaloniaXaml)" SourceItemGroup="AvaloniaXaml" />
+    </ItemGroup>
+  </Target>
 
   <ItemGroup>
     <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />

samples/Avalonia.Labs.Catalog/ViewModels/MainViewModel.cs

@@ -1,4 +1,6 @@
-using Avalonia.Labs.Catalog.Views;
+using Avalonia.Controls;
+using Avalonia.Controls.Platform;
+using Avalonia.Labs.Catalog.Views;
 using Avalonia.Labs.Controls;
 using Avalonia.Styling;
 using ReactiveUI;
@@ -17,6 +19,7 @@ static MainViewModel()
         private bool? _showNavBar = true;
         private bool? _showBackButton = true;
         private INavigationRouter _navigationRouter;
+        private bool _useSystemSafeArea = true;
 
         public MainViewModel()
         {
@@ -36,12 +39,19 @@ public bool? ShowBackButton
             get => _showBackButton;
             set => this.RaiseAndSetIfChanged(ref _showBackButton, value);
         }
+
         public INavigationRouter NavigationRouter
         {
             get => _navigationRouter;
             set => this.RaiseAndSetIfChanged(ref _navigationRouter, value);
         }
 
+        public bool UseSystemSafeArea
+        {
+            get => _useSystemSafeArea;
+            set => this.RaiseAndSetIfChanged(ref _useSystemSafeArea, value);
+        }
+
         public async void NavigateTo(object page)
         {
             if (NavigationRouter != null)

samples/Avalonia.Labs.Catalog/Views/MainView.axaml

@@ -1,53 +1,54 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:viewModels="clr-namespace:Avalonia.Labs.Catalog.ViewModels"
-             mc:Ignorable="d"
-             d:DesignWidth="800"
-             d:DesignHeight="450"
-             x:Class="Avalonia.Labs.Catalog.Views.MainView"
-             xmlns:local="using:Avalonia.Labs.Catalog"
-             xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls"
-             xmlns:views="clr-namespace:Avalonia.Labs.Catalog.Views"
-             x:DataType="viewModels:MainViewModel">
-  <UserControl.Resources>
+<labs:ContentPage 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:Avalonia.Labs.Catalog.ViewModels"
+                  mc:Ignorable="d"
+                  d:DesignWidth="800"
+                  d:DesignHeight="450"
+                  x:Class="Avalonia.Labs.Catalog.Views.MainView"
+                  xmlns:local="using:Avalonia.Labs.Catalog"
+                  xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls"
+                  x:DataType="viewModels:MainViewModel"
+                  Title="{Binding Title}"
+                  AutomaticallyApplySafeAreaPadding="{Binding UseSystemSafeArea, Mode=TwoWay}">
+  <labs:ContentPage.Resources>
     <StreamGeometry x:Key="SwapThemeIcon">M 23.935547,4.0019531 C 23.275047,4.0354318 22.748047,4.5831669 22.748047,5.2519531 V 7.7519531 C 22.748047,8.4423031 23.307647,9.0019531 23.998047,9.0019531 24.688347,9.0019531 25.248047,8.4423031 25.248047,7.7519531 V 5.2519531 C 25.248047,4.5615931 24.688347,4.0019531 23.998047,4.0019531 23.976472,4.0019531 23.956853,4.0008732 23.935547,4.0019531 Z M 10.25,9 C 9.9300987,9 9.6093094,9.1231125 9.3652344,9.3671875 8.8770744,9.8553475 8.8770744,10.646666 9.3652344,11.134766 L 11.865234,13.634766 C 12.353334,14.122966 13.146666,14.122966 13.634766,13.634766 14.122966,13.146666 14.122966,12.355287 13.634766,11.867188 L 11.134766,9.3671875 C 10.890716,9.1231125 10.569901,9 10.25,9 Z M 37.75,9 C 37.430087,9 37.111288,9.1231125 36.867188,9.3671875 L 34.367188,11.867188 C 33.879088,12.355287 33.879087,13.146666 34.367188,13.634766 34.855388,14.122966 35.646666,14.122966 36.134766,13.634766 L 38.634766,11.134766 C 39.122966,10.646666 39.122966,9.8553475 38.634766,9.3671875 38.390716,9.1231125 38.069913,9 37.75,9 Z M 24,14 C 18.47715,14 14,18.47715 14,24 14,29.5228 18.47715,34 24,34 29.5228,34 34,29.5228 34,24 34,18.47715 29.5228,14 24,14 Z M 24,15.5 C 28.6944,15.5 32.5,19.30558 32.5,24 32.5,28.6944 28.6944,32.5 24,32.5 Z M 5.25,22.75 C 4.55965,22.75 4,23.3097 4,24 4,24.6904 4.55965,25.25 5.25,25.25 H 7.75 C 8.44035,25.25 9,24.6904 9,24 9,23.3097 8.44035,22.75 7.75,22.75 Z M 40.25,22.75 C 39.5596,22.75 39,23.3097 39,24 39,24.6904 39.5596,25.25 40.25,25.25 H 42.75 C 43.4403,25.25 44,24.6904 44,24 44,23.3097 43.4403,22.75 42.75,22.75 Z M 12.75,34 C 12.4301,34 12.109284,34.123087 11.865234,34.367188 L 9.3652344,36.867188 C 8.8770744,37.355287 8.8770744,38.146666 9.3652344,38.634766 9.8533844,39.122966 10.646666,39.122966 11.134766,38.634766 L 13.634766,36.134766 C 14.122966,35.646666 14.122966,34.855288 13.634766,34.367188 13.390716,34.123087 13.0699,34 12.75,34 Z M 35.25,34 C 34.930087,34 34.611288,34.123087 34.367188,34.367188 33.879088,34.855288 33.879087,35.646666 34.367188,36.134766 L 36.867188,38.634766 C 37.355388,39.122966 38.146666,39.122966 38.634766,38.634766 39.122966,38.146666 39.122966,37.355287 38.634766,36.867188 L 36.134766,34.367188 C 35.890716,34.123087 35.569913,34 35.25,34 Z M 23.998047,39 C 23.307647,39 22.748047,39.5597 22.748047,40.25 V 42.75 C 22.748047,43.4404 23.307647,44 23.998047,44 24.688347,44 25.248047,43.4404 25.248047,42.75 V 40.25 C 25.248047,39.5597 24.688347,39 23.998047,39 Z</StreamGeometry>
-  </UserControl.Resources>
-    <ScrollViewer HorizontalScrollBarVisibility="Disabled"
-                  VerticalScrollBarVisibility="Auto">
-        <labs:NavigationControl
-            x:Name="Nav"
-            VerticalAlignment="Stretch"
-            IsBackButtonVisible="{Binding ShowBackButton}"
-            IsNavBarVisible="{Binding ShowNavBar}"
-            NavigationRouter="{Binding NavigationRouter}"
-            Header="{Binding NavigationRouter.CurrentPage}"
-            Margin="5"
-            Padding="10"
-            Grid.Row="1"
-            Grid.ColumnSpan="2">
-            <labs:NavigationControl.HeaderTemplate>
-                <DataTemplate x:DataType="viewModels:ViewModelBase">
-                  <DockPanel>
-                    <Button Command="{Binding $parent[views:MainView].DataContext.SwapTheme}"
-                            DockPanel.Dock="Right"
-                            Background="Transparent">
-                      <PathIcon Data="{StaticResource SwapThemeIcon}"
-                                Width="32"
-                                Height="32"
+  </labs:ContentPage.Resources>
+  <ScrollViewer HorizontalScrollBarVisibility="Disabled"
+                VerticalScrollBarVisibility="Auto">
+    <labs:NavigationControl
+      x:Name="Nav"
+      VerticalAlignment="Stretch"
+      IsBackButtonVisible="{Binding ShowBackButton}"
+      IsNavBarVisible="{Binding ShowNavBar}"
+      NavigationRouter="{Binding NavigationRouter}"
+      Header="{Binding NavigationRouter.CurrentPage}"
+      Margin="5"
+      Padding="10"
+      Grid.Row="1"
+      Grid.ColumnSpan="2">
+      <labs:NavigationControl.HeaderTemplate>
+        <DataTemplate x:DataType="viewModels:ViewModelBase">
+          <DockPanel>
+            <Button Command="{Binding $parent[views:MainView].DataContext.SwapTheme}"
+                    DockPanel.Dock="Right"
+                    Background="Transparent">
+              <PathIcon Data="{StaticResource SwapThemeIcon}"
+                        Width="32"
+                        Height="32"
                                 />
-                    </Button>
-                    <Label Content="{Binding Title}"
-                           VerticalAlignment="Center"
-                           VerticalContentAlignment="Center"/>
-                  </DockPanel>
-                </DataTemplate>
-            </labs:NavigationControl.HeaderTemplate>
-            <labs:NavigationControl.DataTemplates>
-                <local:ViewLocator/>
-            </labs:NavigationControl.DataTemplates>
-        </labs:NavigationControl>
+            </Button>
+            <Label Content="{Binding Title}"
+                   VerticalAlignment="Center"
+                   VerticalContentAlignment="Center"/>
+          </DockPanel>
+        </DataTemplate>
+      </labs:NavigationControl.HeaderTemplate>
+      <labs:NavigationControl.DataTemplates>
+        <local:ViewLocator/>
+      </labs:NavigationControl.DataTemplates>
+    </labs:NavigationControl>
 
-    </ScrollViewer>
-</UserControl>
+  </ScrollViewer>
+</labs:ContentPage>

samples/Avalonia.Labs.Catalog/Views/MainView.axaml.cs

@@ -1,10 +1,11 @@
 using Avalonia.Controls;
 using Avalonia.Interactivity;
 using Avalonia.Labs.Catalog.ViewModels;
+using Avalonia.Labs.Controls;
 
 namespace Avalonia.Labs.Catalog.Views;
 
-public partial class MainView : UserControl
+public partial class MainView : ContentPage
 {
     public MainView()
     {

samples/Avalonia.Labs.Controls.Samples/App.axaml.cs

@@ -20,4 +20,4 @@ public override void OnFrameworkInitializationCompleted()
 
         base.OnFrameworkInitializationCompleted();
     }
-}
+}

samples/Avalonia.Labs.Controls.Samples/Avalonia.Labs.Controls.Samples.csproj

@@ -13,7 +13,11 @@
     <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
     <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
   </ItemGroup>
-
+  <Target Name="_InjectAdditionalFiles" BeforeTargets="GenerateMSBuildEditorConfigFileShouldRun">
+    <ItemGroup>
+      <AdditionalFiles Include="@(AvaloniaXaml)" SourceItemGroup="AvaloniaXaml" />
+    </ItemGroup>
+  </Target>
   <ItemGroup>
     <ProjectReference Include="..\..\src\Avalonia.Labs.Controls\Avalonia.Labs.Controls.csproj" />
   </ItemGroup>

src/Avalonia.Labs.Controls/Avalonia.Labs.Controls.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
     <Nullable>enable</Nullable>
     <IsPackable>true</IsPackable>
     <GeneratePackageOnBuild>True</GeneratePackageOnBuild>

src/Avalonia.Labs.Controls/Page/CarouselPage.cs

@@ -0,0 +1,39 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Templates;
+using Avalonia.Layout;
+
+namespace Avalonia.Labs.Controls
+{
+    public class CarouselPage : SelectingMultiPage
+    {
+        private static readonly FuncTemplate<Panel?> DefaultPanel =
+            new FuncTemplate<Panel?>(() => new StackPanel()
+            {
+                Orientation = Orientation.Horizontal
+            });
+
+        public static readonly StyledProperty<ITemplate<Panel?>> ItemsPanelProperty =
+            ItemsControl.ItemsPanelProperty.AddOwner<CarouselPage>();
+
+        public static readonly StyledProperty<Vector> OffsetProperty = AvaloniaProperty.Register<CarouselPage, Vector>(nameof(Offset));
+
+        static CarouselPage()
+        {
+            ItemsPanelProperty.OverrideDefaultValue<CarouselPage>(DefaultPanel);
+        }
+
+        public Vector Offset
+        {
+            get => GetValue(OffsetProperty);
+            set => SetValue(OffsetProperty, value);
+        }
+
+        public ITemplate<Panel?> ItemsPanel
+        {
+            get => GetValue(ItemsPanelProperty);
+            set => SetValue(ItemsPanelProperty, value);
+        }
+
+        internal ScrollViewer? ScrollViewerPart { get; private set; }
+    }
+}

src/Avalonia.Labs.Controls/Page/ContentPage.cs

@@ -0,0 +1,123 @@
+using System;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Presenters;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Layout;
+using Avalonia.LogicalTree;
+using Avalonia.Metadata;
+
+namespace Avalonia.Labs.Controls
+{
+    [TemplatePart("PART_ContentPresenter", typeof(ContentPresenter))]
+    public class ContentPage : Page
+    {
+        public static readonly StyledProperty<object?> ContentProperty =
+           ContentControl.ContentProperty.AddOwner<ContentPage>();
+
+        public static readonly StyledProperty<IDataTemplate?> ContentTemplateProperty =            
+           ContentControl.ContentTemplateProperty.AddOwner<ContentPage>();
+
+        public static readonly StyledProperty<bool> AutomaticallyApplySafeAreaPaddingProperty =
+            AvaloniaProperty.Register<ContentPage, bool>(nameof(AutomaticallyApplySafeAreaPadding), true);
+
+        public static readonly StyledProperty<HorizontalAlignment> HorizontalContentAlignmentProperty =
+            ContentControl.HorizontalContentAlignmentProperty.AddOwner<ContentPage>();
+
+        public static readonly StyledProperty<VerticalAlignment> VerticalContentAlignmentProperty =
+            ContentControl.VerticalContentAlignmentProperty.AddOwner<ContentPage>();
+
+        public HorizontalAlignment HorizontalContentAlignment
+        {
+            get { return GetValue(HorizontalContentAlignmentProperty); }
+            set { SetValue(HorizontalContentAlignmentProperty, value); }
+        }
+
+        public VerticalAlignment VerticalContentAlignment
+        {
+            get { return GetValue(VerticalContentAlignmentProperty); }
+            set { SetValue(VerticalContentAlignmentProperty, value); }
+        }
+
+        private ContentPresenter? _contentPresenter;
+
+        [Content]
+        [DependsOn(nameof(ContentTemplate))]
+        public object? Content
+        {
+            get { return GetValue(ContentProperty); }
+            set { SetValue(ContentProperty, value); }
+        }
+
+        public IDataTemplate? ContentTemplate
+        {
+            get { return GetValue(ContentTemplateProperty); }
+            set { SetValue(ContentTemplateProperty, value); }
+        }
+
+        public bool AutomaticallyApplySafeAreaPadding
+        {
+            get { return GetValue(AutomaticallyApplySafeAreaPaddingProperty); }
+            set { SetValue(AutomaticallyApplySafeAreaPaddingProperty, value); }
+        }
+
+        static ContentPage()
+        {
+            ContentProperty.Changed.AddClassHandler<ContentPage>((x, e) => x.ContentChanged(e));
+        }
+
+        private void ContentChanged(AvaloniaPropertyChangedEventArgs e)
+        {
+            if (e.OldValue is ILogical oldChild)
+            {
+                LogicalChildren.Remove(oldChild);
+            }
+
+            if (e.NewValue is ILogical newChild)
+            {
+                LogicalChildren.Add(newChild);
+            }
+        }
+
+        protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+        {
+            base.OnApplyTemplate(e);
+
+            _contentPresenter = e.NameScope.Get<ContentPresenter>("PART_ContentPresenter");
+
+            if(_contentPresenter == null )
+            {
+                throw new NullReferenceException("PART_ContentPresenter isn't found the template");
+            }
+
+            UpdateContentSafeAreaPadding();
+        }
+
+        protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+        {
+            base.OnPropertyChanged(change);
+
+            if (change.Property == AutomaticallyApplySafeAreaPaddingProperty)
+            {
+                UpdateContentSafeAreaPadding();
+            }
+            else if (change.Property == ContentProperty)
+            {
+                UpdateContentSafeAreaPadding();
+            }
+        }
+
+        protected override void UpdateContentSafeAreaPadding()
+        {
+            if (_contentPresenter != null)
+            {
+                _contentPresenter.Padding = AutomaticallyApplySafeAreaPadding ? Padding.ApplySafeAreaPadding(SafeAreaPadding) : Padding;
+                _contentPresenter.InvalidateMeasure();
+
+                if (ActiveChildPage != null)
+                    ActiveChildPage.SafeAreaPadding = Padding.GetRemainingSafeAreaPadding(SafeAreaPadding);
+            }
+        }
+    }
+}