add transitioning content control.

src/Avalonia.Controls/TransitioningContentControl.cs

@@ -0,0 +1,70 @@
+using System;
+using System.Threading;
+using Avalonia.Animation;
+
+namespace Avalonia.Controls;
+
+public class TransitioningContentControl : ContentControl
+{
+    private CancellationTokenSource? _lastTransitionCts;
+    
+    /// <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.5)));
+    
+    
+    /// <summary>
+    /// Defines the <see cref="DisplayedContent"/> property.
+    /// </summary>
+    public static readonly StyledProperty<object?> DisplayedContentProperty =
+        AvaloniaProperty.Register<TransitioningContentControl, object?>(nameof(DisplayedContent));
+    
+    /// <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 or sets the content displayed whenever there is no page currently routed.
+    /// </summary>
+    public object? DisplayedContent
+    {
+        get => GetValue(DisplayedContentProperty);
+        set => SetValue(DisplayedContentProperty, value);
+    }
+
+    protected override void OnPropertyChanged<T>(AvaloniaPropertyChangedEventArgs<T> change)
+    {
+        base.OnPropertyChanged(change);
+
+        if (change.Property == ContentProperty)
+        {
+            UpdateContentWithTransition(change.NewValue.GetValueOrDefault());
+        }
+    }
+
+    /// <summary>
+    /// Updates the content with transitions.
+    /// </summary>
+    /// <param name="content">New content to set.</param>
+    private async void UpdateContentWithTransition(object? content)
+    {
+        _lastTransitionCts?.Cancel();
+        _lastTransitionCts = new CancellationTokenSource();
+
+        if (PageTransition != null)
+            await PageTransition.Start(this, null, true, _lastTransitionCts.Token);
+
+        DisplayedContent = content;
+        
+        if (PageTransition != null)
+            await PageTransition.Start(null, this, true, _lastTransitionCts.Token);
+    }
+}

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 DisplayedContent}"
+                          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 DisplayedContent}"
+                          Padding="{TemplateBinding Padding}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>