feat: add page & modal transitions to NavigationPage.

2026-04-15 21:56:36 +08:00 · 2026-04-14 23:39:41 +08:00
parent 555ecf16d9
commit 0e9dbdd528
3 changed files with 107 additions and 11 deletions
--- a/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml
@@ -12,7 +12,7 @@
            <ScrollViewer DockPanel.Dock="Right" Width="260">
                <StackPanel Margin="12" Spacing="8">
                    <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" />
-                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
+                    <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="14" />

                    <Button Content="Push Page"
                            HorizontalAlignment="Stretch"
@@ -26,6 +26,20 @@

                    <Separator />

+                    <TextBlock Text="Modal Actions" FontWeight="SemiBold" FontSize="14" />
+                    <Button x:Name="PushModalButton"
+                            Content="Push Modal"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPushModal" />
+                    <Button x:Name="PopModalButton"
+                            Content="Pop Modal"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopModal" />
+                    <Button x:Name="PopAllModalsButton"
+                            Content="Pop All Modals"
+                            HorizontalAlignment="Stretch"
+                            Click="OnPopAllModals" />
+
                    <TextBlock Text="Options" FontWeight="SemiBold" FontSize="14" />

                    <CheckBox Name="HasNavBarCheck"
@@ -34,21 +48,38 @@
                              IsCheckedChanged="OnHasNavBarChanged" />
                    <CheckBox Name="HasBackButtonCheck"
                              Content="Has Back Button"
-                              IsChecked="True" 
-                              IsCheckedChanged="OnHasBackButonChanged" />
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasBackButtonChanged" />
+                    <CheckBox Name="HasShadowCheck"
+                              Content="Has Shadow"
+                              IsChecked="True"
+                              IsCheckedChanged="OnHasShadowChanged" />
+                    <CheckBox Name="large" Content="Large" />
+
+                    <Separator />
+
+                    <TextBlock Text="Modal Transition" FontWeight="SemiBold" FontSize="14" />
+                    <ComboBox Name="TransitionCombo"
+                              SelectedIndex="0"
+                              SelectionChanged="OnTransitionChanged">
+                        <ComboBoxItem Content="Slide from Bottom" />
+                        <ComboBoxItem Content="CrossFade" />
+                        <ComboBoxItem Content="None" />
+                    </ComboBox>

                    <Separator />

                    <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
                    <TextBlock Name="StatusText"
                               Text="Depth: 1"
-                               Opacity="0.7"
                               TextWrapping="Wrap" />
                    <TextBlock Name="HeaderText"
                               Text="Current: Home"
-                               Opacity="0.7"
                               TextWrapping="Wrap" />
-                    <ToggleSwitch Content="Large" Name="large" />
+                    <TextBlock Name="ModalText"
+                               Text="Modals: 0"
+                               TextWrapping="Wrap" />
+
                </StackPanel>
            </ScrollViewer>

@@ -59,8 +90,8 @@
                    BorderThickness="1"
                    CornerRadius="6"
                    ClipToBounds="True">
-                <NavigationPage 
-                    Name="DemoNav" 
+                <NavigationPage
+                    Name="DemoNav"
                    Classes.Large="{Binding #large.IsChecked}" />
            </Border>
        </DockPanel>
--- a/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/NavigationPageDemo.axaml.cs
@@ -1,3 +1,5 @@
+using System;
+using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Interactivity;

@@ -6,6 +8,7 @@ namespace Semi.Avalonia.Demo.Pages;
 public partial class NavigationPageDemo : UserControl
 {
    private int _pageCount;
+    private int _modalCount;

    public NavigationPageDemo()
    {
@@ -15,7 +18,7 @@ public partial class NavigationPageDemo : UserControl

    private async void OnLoaded(object? sender, RoutedEventArgs e)
    {
-        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages.", 0), null);
+        await DemoNav.PushAsync(NavigationDemoHelper.MakePage("Home", "Welcome!\nUse the buttons to push and pop pages/modals.", 0), null);
        UpdateStatus();
    }

@@ -42,6 +45,27 @@ public partial class NavigationPageDemo : UserControl
        UpdateStatus();
    }

+    private async void OnPushModal(object? sender, RoutedEventArgs e)
+    {
+        _modalCount++;
+        var modal = NavigationDemoHelper.MakePage($"Modal {_modalCount}", "This page was presented modally.\nTap 'Pop Modal' to dismiss.", _modalCount);
+        await DemoNav.PushModalAsync(modal);
+        UpdateStatus();
+    }
+
+    private async void OnPopModal(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopModalAsync();
+        UpdateStatus();
+    }
+
+    private async void OnPopAllModals(object? sender, RoutedEventArgs e)
+    {
+        await DemoNav.PopAllModalsAsync();
+        _modalCount = 0;
+        UpdateStatus();
+    }
+
    private void OnHasNavBarChanged(object? sender, RoutedEventArgs e)
    {
        if (DemoNav == null)
@@ -50,7 +74,7 @@ public partial class NavigationPageDemo : UserControl
            NavigationPage.SetHasNavigationBar(DemoNav.CurrentPage, HasNavBarCheck.IsChecked == true);
    }

-    private void OnHasBackButonChanged(object? sender, RoutedEventArgs e)
+    private void OnHasBackButtonChanged(object? sender, RoutedEventArgs e)
    {
        if (DemoNav == null)
            return;
@@ -58,9 +82,30 @@ public partial class NavigationPageDemo : UserControl
            NavigationPage.SetHasBackButton(DemoNav.CurrentPage, HasBackButtonCheck.IsChecked == true);
    }

+    private void OnHasShadowChanged(object? sender, RoutedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        if (DemoNav.CurrentPage != null)
+            DemoNav.HasShadow = HasShadowCheck.IsChecked == true;
+    }
+
+    private void OnTransitionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (DemoNav == null)
+            return;
+        DemoNav.ModalTransition = TransitionCombo.SelectedIndex switch
+        {
+            1 => new CrossFade(TimeSpan.FromMilliseconds(250)),
+            2 => null,
+            _ => new PageSlide(TimeSpan.FromMilliseconds(300), PageSlide.SlideAxis.Vertical)
+        };
+    }
+
    private void UpdateStatus()
    {
        StatusText.Text = $"Depth: {DemoNav.StackDepth}";
        HeaderText.Text = $"Current: {DemoNav.CurrentPage?.Header ?? "(none)"}";
+        ModalText.Text = $"Modals: {DemoNav.ModalStack.Count}";
    }
 }
--- a/src/Semi.Avalonia/Controls/NavigationPage.axaml
+++ b/src/Semi.Avalonia/Controls/NavigationPage.axaml
@@ -8,6 +8,26 @@
    <ControlTheme x:Key="{x:Type NavigationPage}" TargetType="NavigationPage">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarMinHeight}" />
+        <Setter Property="PageTransition">
+            <PageSlide Duration="0:0:0.3" Orientation="Horizontal" FillMode="Forward">
+                <PageSlide.SlideInEasing>
+                    <SplineEasing X1="0.16" Y1="1" X2="0.3" Y2="1" />
+                </PageSlide.SlideInEasing>
+                <PageSlide.SlideOutEasing>
+                    <SplineEasing X1="0.2" Y1="0.85" X2="0.3" Y2="1" />
+                </PageSlide.SlideOutEasing>
+            </PageSlide>
+        </Setter>
+        <Setter Property="ModalTransition">
+            <PageSlide Duration="0:0:0.25" Orientation="Vertical" FillMode="Forward">
+                <PageSlide.SlideInEasing>
+                    <SplineEasing X1="0.16" Y1="1" X2="0.3" Y2="1" />
+                </PageSlide.SlideInEasing>
+                <PageSlide.SlideOutEasing>
+                    <SplineEasing X1="0.2" Y1="0.85" X2="0.3" Y2="1" />
+                </PageSlide.SlideOutEasing>
+            </PageSlide>
+        </Setter>
        <Setter Property="Template">
            <ControlTemplate TargetType="NavigationPage">
                <Panel ClipToBounds="True">
@@ -115,7 +135,7 @@
        <Style Selector="^:nav-bar-compact /template/ ContentPresenter#PART_TopCommandBar CommandBar">
            <Setter Property="DefaultLabelPosition" Value="Collapsed" />
        </Style>
-        
+
        <Style Selector="^.Large">
            <Setter Property="BarHeight" Value="{DynamicResource NavigationPageBarLargeMinHeight}" />
        </Style>