Add TransitioningContentControl-DemoPage

samples/ControlCatalog/ControlCatalog.csproj

@@ -28,5 +28,11 @@
     <ProjectReference Include="..\SampleControls\ControlSamples.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Compile Update="Pages\TransitioningContentControlPage.axaml.cs">
+      <DependentUpon>TransitioningContentControlPage.axaml</DependentUpon>
+    </Compile>
+  </ItemGroup>
+
   <Import Project="..\..\build\BuildTargets.targets" />
 </Project>

samples/ControlCatalog/MainView.xaml

@@ -145,6 +145,9 @@
       <TabItem Header="ToolTip">
         <pages:ToolTipPage />
       </TabItem>
+      <TabItem Header="TransitioningContentControl">
+        <pages:TransitioningContentControlPage />
+      </TabItem>
       <TabItem Header="TreeView">
         <pages:TreeViewPage />
       </TabItem>

samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml

@@ -0,0 +1,35 @@
+<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:vm="using:ControlCatalog.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:DataType="vm:TransitioningContentControlPageViewModel"
+             x:CompileBindings="True"
+             x:Class="ControlCatalog.Pages.TransitioningContentControlPage">
+
+    <UserControl.DataContext>
+        <vm:TransitioningContentControlPageViewModel />
+    </UserControl.DataContext>
+    <DockPanel LastChildFill="True">
+
+        <TextBlock DockPanel.Dock="Top" Classes="h2">The TransitioningContentControl control allows you to show a page transition whenever the Content changes.</TextBlock>
+
+        <Border DockPanel.Dock="Bottom" Background="{DynamicResource ThemeControlLowBrush}">
+            <StackPanel Margin="5" Spacing="5">
+                <TextBlock>Select a transition</TextBlock>
+               <ComboBox Items="{Binding PageTransitions}" SelectedItem="{Binding SelectedTransition}" /> 
+            </StackPanel>
+        </Border>
+        
+        <Button DockPanel.Dock="Left" Command="{Binding PrevImage}" Content="&lt;" />
+        <Button DockPanel.Dock="Right" Command="{Binding NextImage}" Content=">" />
+<TransitioningContentControl Content="{Binding SelectedImage}" PageTransition="{Binding SelectedTransition.Transition}" >
+    <TransitioningContentControl.ContentTemplate>
+        <DataTemplate DataType="Bitmap">
+            <Image Source="{Binding}"  />
+        </DataTemplate>
+    </TransitioningContentControl.ContentTemplate>
+</TransitioningContentControl>
+</DockPanel>
+</UserControl>

samples/ControlCatalog/Pages/TransitioningContentControlPage.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace ControlCatalog.Pages
+{
+    public partial class TransitioningContentControlPage : UserControl
+    {
+        public TransitioningContentControlPage()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

samples/ControlCatalog/ViewModels/TransitioningContentControlPageViewModel.cs

@@ -0,0 +1,110 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Text;
+using Avalonia;
+using Avalonia.Animation;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+using MiniMvvm;
+
+namespace ControlCatalog.ViewModels
+{
+    public class TransitioningContentControlPageViewModel : ViewModelBase
+    {
+        public TransitioningContentControlPageViewModel()
+        {
+            var assetLoader = AvaloniaLocator.Current.GetService<IAssetLoader>();
+
+            var images = new string[] 
+            { 
+                "delicate-arch-896885_640.jpg", 
+                "hirsch-899118_640.jpg", 
+                "maple-leaf-888807_640.jpg" 
+            };
+
+            foreach (var image in images)
+            {
+                var path = $"avares://ControlCatalog/Assets/{image}";
+                Images.Add(new Bitmap(assetLoader.Open(new Uri(path))));
+            }
+
+            SelectedImage = Images[0];
+            SelectedTransition = PageTransitions[0];
+        }
+
+        public List<PageTransition> PageTransitions { get; } = new List<PageTransition>()
+        {
+            new PageTransition("Slide horizontally", new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Horizontal)),
+            new PageTransition("Slide vertically", new PageSlide(TimeSpan.FromMilliseconds(500), PageSlide.SlideAxis.Vertical))
+        };
+
+        public List<Bitmap> Images { get; } = new List<Bitmap>();
+
+
+        private Bitmap? _SelectedImage;
+
+        /// <summary>
+        /// Gets or Sets the selected image
+        /// </summary>
+        public Bitmap? SelectedImage
+        {
+            get { return _SelectedImage; }
+            set { this.RaiseAndSetIfChanged(ref _SelectedImage, value); }
+        }
+
+
+        private PageTransition _SelectedTransition;
+
+        /// <summary>
+        /// Gets or sets the transition to play
+        /// </summary>
+        public PageTransition SelectedTransition
+        {
+            get { return _SelectedTransition; }
+            set { this.RaiseAndSetIfChanged(ref _SelectedTransition, value); }
+        }
+
+        public void NextImage()
+        {
+            var index = Images.IndexOf(SelectedImage) + 1;
+            
+            if (index >= Images.Count)
+            {
+                index = 0;
+            }
+
+            SelectedImage = Images[index];
+        }
+
+        public void PrevImage()
+        {
+            var index = Images.IndexOf(SelectedImage) - 1;
+
+            if (index < 0)
+            {
+                index = Images.Count-1;
+            }
+
+            SelectedImage = Images[index];
+        }
+    }
+
+    public class PageTransition
+    {
+        public PageTransition(string displayTitle, IPageTransition transition)
+        {
+            DisplayTitle = displayTitle;
+            Transition = transition;
+        }
+
+        public string DisplayTitle { get; }
+        public IPageTransition Transition { get; }
+
+        public override string ToString()
+        {
+            return DisplayTitle;
+        }
+
+    }
+}