Merge pull request #7611 from AvaloniaUI/feature/transitioning-content-control

add transitioning content control.

src/Avalonia.Controls/TransitioningContentControl.cs

@@ -0,0 +1,96 @@
+using System;
+using System.Threading;
+using Avalonia.Animation;
+using Avalonia.Controls.Templates;
+using Avalonia.Threading;
+
+namespace Avalonia.Controls;
+
+/// <summary>
+/// Displays <see cref="ContentControl.Content"/> according to a <see cref="FuncDataTemplate"/>.
+/// Uses <see cref="PageTransition"/> to move between the old and new content values. 
+/// </summary>
+public class TransitioningContentControl : ContentControl
+{
+    private CancellationTokenSource? _lastTransitionCts;
+    private object? _currentContent;
+
+    /// <summary>
+    /// Defines the <see cref="PageTransition"/> property.
+    /// </summary>
+    public static readonly StyledProperty<IPageTransition?> PageTransitionProperty =
+        AvaloniaProperty.Register<TransitioningContentControl, IPageTransition?>(nameof(PageTransition),
+            new CrossFade(TimeSpan.FromSeconds(0.125)));
+    
+    /// <summary>
+    /// Defines the <see cref="CurrentContent"/> property.
+    /// </summary>
+    public static readonly DirectProperty<TransitioningContentControl, object?> CurrentContentProperty =
+        AvaloniaProperty.RegisterDirect<TransitioningContentControl, object?>(nameof(CurrentContent),
+            o => o.CurrentContent);
+
+    /// <summary>
+    /// Gets or sets the animation played when content appears and disappears.
+    /// </summary>
+    public IPageTransition? PageTransition
+    {
+        get => GetValue(PageTransitionProperty);
+        set => SetValue(PageTransitionProperty, value);
+    }
+
+    /// <summary>
+    /// Gets the content currently displayed on the screen.
+    /// </summary>
+    public object? CurrentContent
+    {
+        get => _currentContent;
+        private set => SetAndRaise(CurrentContentProperty, ref _currentContent, value);
+    }
+
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnAttachedToVisualTree(e);
+
+        Dispatcher.UIThread.Post(() => UpdateContentWithTransition(Content));
+    }
+
+    protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        base.OnDetachedFromVisualTree(e);
+        
+        _lastTransitionCts?.Cancel();
+    }
+
+    protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+    {
+        base.OnPropertyChanged(change);
+
+        if (change.Property == ContentProperty)
+        {
+            Dispatcher.UIThread.Post(() => UpdateContentWithTransition(Content));
+        }
+    }
+
+    /// <summary>
+    /// Updates the content with transitions.
+    /// </summary>
+    /// <param name="content">New content to set.</param>
+    private async void UpdateContentWithTransition(object? content)
+    {
+        if (VisualRoot is null)
+        {
+            return;
+        }
+
+        _lastTransitionCts?.Cancel();
+        _lastTransitionCts = new CancellationTokenSource();
+
+        if (PageTransition != null)
+            await PageTransition.Start(this, null, true, _lastTransitionCts.Token);
+
+        CurrentContent = content;
+
+        if (PageTransition != null)
+            await PageTransition.Start(null, this, true, _lastTransitionCts.Token);
+    }
+}

src/Avalonia.ReactiveUI/TransitioningContentControl.cs

@@ -10,6 +10,7 @@ namespace Avalonia.ReactiveUI
     /// <summary>
     /// A ContentControl that animates the transition when its content is changed.
     /// </summary>
+    [Obsolete("Use TransitioningContentControl in Avalonia.Controls namespace")]
     public class TransitioningContentControl : ContentControl, IStyleable
     {
         /// <summary>

src/Avalonia.Themes.Default/Controls/TransitioningContentControl.xaml

@@ -0,0 +1,20 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Style Selector="TransitioningContentControl">
+    <!-- Set Defaults -->
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding CurrentContent}"
+                          Padding="{TemplateBinding Padding}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>

src/Avalonia.Themes.Default/DefaultTheme.xaml

@@ -38,6 +38,7 @@
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/TabItem.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/TextBox.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/ToggleButton.xaml"/>
+  <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/TransitioningContentControl.xaml" />
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/Expander.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/TitleBar.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Default/Controls/TreeView.xaml"/>

src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml

@@ -37,6 +37,7 @@
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TabItem.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TextBox.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleButton.xaml"/>
+  <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TransitioningContentControl.xaml" />
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Expander.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TitleBar.xaml"/>
   <StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TreeView.xaml"/>

src/Avalonia.Themes.Fluent/Controls/TransitioningContentControl.xaml

@@ -0,0 +1,20 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Style Selector="TransitioningContentControl">
+    <!-- Set Defaults -->
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding CurrentContent}"
+                          Padding="{TemplateBinding Padding}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>

src/Avalonia.Visuals/Animation/PageSlide.cs

@@ -79,6 +79,7 @@ namespace Avalonia.Animation
                 var animation = new Animation
                 {
                     Easing = SlideOutEasing,
+                    FillMode = FillMode.Forward,
                     Children =
                     {
                         new KeyFrame
@@ -109,6 +110,7 @@ namespace Avalonia.Animation
                 to.IsVisible = true;
                 var animation = new Animation
                 {
+                    FillMode = FillMode.Forward,
                     Easing = SlideInEasing,
                     Children =
                     {