Use system compositor in Gallery

WinUIGallery/Assets/AnimatedVisuals/LottieLogo1.cs

@@ -9,8 +9,8 @@
 using System;
 using System.Numerics;
 using Microsoft.Graphics.Canvas.Geometry;
-using Microsoft.UI.Composition;
 using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Composition;
 
 namespace AnimatedVisuals;
 

WinUIGallery/Controls/ControlExample.xaml

@@ -2,7 +2,6 @@
     x:Class="WinUIGallery.Controls.ControlExample"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:WinUIGallery.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -12,32 +11,6 @@
     d:DesignWidth="1000"
     IsTabStop="False"
     mc:Ignorable="d">
-    <UserControl.Resources>
-        <animations:ImplicitAnimationSet x:Name="ShowTransitions">
-            <animations:OffsetAnimation
-                EasingMode="EaseOut"
-                From="0,24,0"
-                To="0"
-                Duration="0:0:0.4" />
-            <animations:OpacityAnimation
-                EasingMode="EaseOut"
-                From="0"
-                To="1"
-                Duration="0:0:0.2" />
-        </animations:ImplicitAnimationSet>
-        <animations:ImplicitAnimationSet x:Name="HideTransitions">
-            <animations:OffsetAnimation
-                EasingMode="EaseOut"
-                From="0"
-                To="0,24,0"
-                Duration="0:0:0.2" />
-            <animations:OpacityAnimation
-                EasingMode="EaseOut"
-                From="1"
-                To="0"
-                Duration="0:0:0.1" />
-        </animations:ImplicitAnimationSet>
-    </UserControl.Resources>
     <Grid x:Name="rootGrid" IsTabStop="False">
         <Grid.Resources>
             <ResourceDictionary>
@@ -190,13 +163,10 @@
                             Text="C#" />
                     </SelectorBar>
 
-                    <!--  using animations:Implicit... with Grid.Row causes Grid.Row to have no effect, Therefore, the Grid.Row is applied in the grid  -->
                     <Grid Grid.Row="1" x:DefaultBindMode="OneWay" IsTabStop="False">
                         <ContentPresenter x:Name="XamlContentPresenter" Visibility="Collapsed" IsTabStop="False">
                             <local:SampleCodePresenter
                                 x:Name="XamlPresenter"
-                                animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                                animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                                 Code="{x:Bind Xaml}"
                                 CodeSourceFile="{x:Bind XamlSource}"
                                 Padding="16,0,16,16"
@@ -206,8 +176,6 @@
                         <ContentPresenter x:Name="CSharpContentPresenter" Visibility="Collapsed" IsTabStop="False">
                             <local:SampleCodePresenter
                                 x:Name="CSharpPresenter"
-                                animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                                animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                                 Code="{x:Bind CSharp}"
                                 CodeSourceFile="{x:Bind CSharpSource}"
                                 Padding="16,0,16,16"

WinUIGallery/Controls/ControlExample.xaml.cs

@@ -11,6 +11,7 @@
 using System.Linq;
 using Windows.Foundation;
 using Windows.Storage;
+using WinUIGallery.Helpers;
 
 namespace WinUIGallery.Controls;
 
@@ -184,6 +185,8 @@ public Visibility SourceCodeVisibility
     public ControlExample()
     {
         this.InitializeComponent();
+        SystemCompositionAnimations.SetImplicitShowHide(XamlPresenter);
+        SystemCompositionAnimations.SetImplicitShowHide(CSharpPresenter);
         Substitutions = new List<ControlExampleSubstitution>();
         this.Loaded += ControlExample_Loaded;
     }

WinUIGallery/Controls/OpacityMaskView.xaml.cs

@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-using Microsoft.UI.Composition;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Hosting;
 using Microsoft.UI.Xaml.Media;
 using System.Numerics;
+using Windows.UI.Composition;
 
 namespace WinUIGallery.Controls;
 
@@ -30,7 +30,7 @@ public partial class OpacityMaskView : ContentControl
     private const string MaskContainerTemplateName = "PART_MaskContainer";
     private const string RootGridTemplateName = "PART_RootGrid";
 
-    private readonly Compositor _compositor = CompositionTarget.GetCompositorForCurrentThread();
+    private readonly Compositor _compositor = Microsoft.UI.Xaml.Media.CompositionTarget.GetCompositorForCurrentThread();
     private CompositionBrush? _mask;
     private CompositionMaskBrush? _maskBrush;
 

WinUIGallery/Helpers/SystemCompositionAnimations.cs

@@ -0,0 +1,71 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Hosting;
+using System;
+using System.Numerics;
+using Windows.UI.Composition;
+
+namespace WinUIGallery.Helpers;
+
+internal static class SystemCompositionAnimations
+{
+    public static void SetImplicitShowHide(UIElement element)
+    {
+        Compositor compositor = ElementCompositionPreview.GetElementVisual(element).Compositor;
+
+        ElementCompositionPreview.SetImplicitShowAnimation(
+            element,
+            CreateAnimationGroup(
+                compositor,
+                new Vector3(0, 24, 0),
+                Vector3.Zero,
+                0,
+                1,
+                TimeSpan.FromMilliseconds(400),
+                TimeSpan.FromMilliseconds(200)));
+
+        ElementCompositionPreview.SetImplicitHideAnimation(
+            element,
+            CreateAnimationGroup(
+                compositor,
+                Vector3.Zero,
+                new Vector3(0, 24, 0),
+                1,
+                0,
+                TimeSpan.FromMilliseconds(200),
+                TimeSpan.FromMilliseconds(100)));
+    }
+
+    private static CompositionAnimationGroup CreateAnimationGroup(
+        Compositor compositor,
+        Vector3 offsetFrom,
+        Vector3 offsetTo,
+        float opacityFrom,
+        float opacityTo,
+        TimeSpan offsetDuration,
+        TimeSpan opacityDuration)
+    {
+        CubicBezierEasingFunction easing = compositor.CreateCubicBezierEasingFunction(
+            new Vector2(0, 0),
+            new Vector2(0.58f, 1));
+
+        Vector3KeyFrameAnimation offset = compositor.CreateVector3KeyFrameAnimation();
+        offset.Target = "Offset";
+        offset.InsertKeyFrame(0, offsetFrom);
+        offset.InsertKeyFrame(1, offsetTo, easing);
+        offset.Duration = offsetDuration;
+
+        ScalarKeyFrameAnimation opacity = compositor.CreateScalarKeyFrameAnimation();
+        opacity.Target = "Opacity";
+        opacity.InsertKeyFrame(0, opacityFrom);
+        opacity.InsertKeyFrame(1, opacityTo, easing);
+        opacity.Duration = opacityDuration;
+
+        CompositionAnimationGroup group = compositor.CreateAnimationGroup();
+        group.Add(offset);
+        group.Add(opacity);
+        return group;
+    }
+}

WinUIGallery/Pages/HomePage.xaml

@@ -13,39 +13,13 @@
     x:Class="WinUIGallery.Pages.HomePage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:controls="using:WinUIGallery.Controls"
     xmlns:local="using:WinUIGallery.Pages"
     xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
     HighContrastAdjustment="None">
     <Grid>
         <Grid.Resources>
             <CornerRadius x:Key="GridViewItemCornerRadius">8</CornerRadius>
-
-            <animations:ImplicitAnimationSet x:Name="ShowTransitions">
-                <animations:OffsetAnimation
-                    EasingMode="EaseOut"
-                    From="0,24,0"
-                    To="0"
-                    Duration="0:0:0.4" />
-                <animations:OpacityAnimation
-                    EasingMode="EaseOut"
-                    From="0"
-                    To="1"
-                    Duration="0:0:0.2" />
-            </animations:ImplicitAnimationSet>
-            <animations:ImplicitAnimationSet x:Name="HideTransitions">
-                <animations:OffsetAnimation
-                    EasingMode="EaseOut"
-                    From="0"
-                    To="0,24,0"
-                    Duration="0:0:0.2" />
-                <animations:OpacityAnimation
-                    EasingMode="EaseOut"
-                    From="1"
-                    To="0"
-                    Duration="0:0:0.1" />
-            </animations:ImplicitAnimationSet>
         </Grid.Resources>
 
         <!--  This grid acts as a root panel for the page.  -->
@@ -83,8 +57,6 @@
                         <StackPanel
                             x:Name="RecentSamplesPanel"
                             Grid.Row="1"
-                            animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                             Spacing="12">
                             <TextBlock
                                 x:Name="RecentlyVisitedTitle"
@@ -127,10 +99,7 @@
                         </StackPanel>
                     </toolkit:Case>
                     <toolkit:Case Value="Favorites">
-                        <StackPanel
-                            x:Name="FavoriteSamplesPanel"
-                            animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
-                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}">
+                        <StackPanel x:Name="FavoriteSamplesPanel">
                             <GridView
                                 x:Name="FavoriteSamples"
                                 ItemTemplate="{StaticResource ControlItemTemplate}"

WinUIGallery/Pages/HomePage.xaml.cs

@@ -20,6 +20,8 @@ public sealed partial class HomePage : ItemsPageBase
     public HomePage()
     {
         this.InitializeComponent();
+        SystemCompositionAnimations.SetImplicitShowHide(RecentSamplesPanel);
+        SystemCompositionAnimations.SetImplicitShowHide(FavoriteSamplesPanel);
     }
 
     protected override void OnNavigatedTo(NavigationEventArgs e)

WinUIGallery/Samples/ContentIsland/ContentIslandPage.xaml

@@ -32,11 +32,11 @@
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="*" />
                     </Grid.RowDefinitions>
-                    <TextBlock Text="Here's an ContentIsland in a ScrollViewer. Notice now the content scrolls and clips correctly." />
+                    <TextBlock Text="Here's a ContentIsland in a ScrollViewer. Notice how the content scrolls and clips correctly." />
                     <Button
                         Grid.Row="1"
                         Click="LoadModel_Click"
-                        Content="Load model"
+                        Content="Load content"
                         Style="{StaticResource AccentButtonStyle}" />
                     <toolkit:WrapPanel
                         x:Name="_rectanglePanel"

WinUIGallery/Samples/ContentIsland/ContentIslandPage.xaml.cs

@@ -1,7 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-using Microsoft.UI.Composition;
 using Microsoft.UI.Content;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
@@ -11,6 +10,7 @@
 using System.Collections.Generic;
 using System.Numerics;
 using System.Threading.Tasks;
+using Windows.UI.Composition;
 
 namespace WinUIGallery.ControlPages;
 
@@ -20,7 +20,7 @@ private sealed class IslandEntry(ChildSiteLink childSiteLink, Rectangle rect, Ev
     {
         public ChildSiteLink ChildSiteLink { get; } = childSiteLink;
 
-        public ContentIsland? HelmetIsland { get; set; }
+        public ContentIsland? ChildIsland { get; set; }
 
         public Rectangle Rect { get; } = rect;
 
@@ -63,12 +63,14 @@ public async Task LoadModel()
             return;
         }
 
-        ContainerVisual placementVisual = (ContainerVisual)ElementCompositionPreview.GetElementVisual(rect);
+        Visual elementVisual = ElementCompositionPreview.GetElementVisual(rect);
+        ContainerVisual placementVisual = elementVisual.Compositor.CreateContainerVisual();
+        ElementCompositionPreview.SetElementChildVisual(rect, placementVisual);
         Vector2 size = rect.ActualSize;
 
         // The ChildSiteLink must live as long as the visual connection between parent and child islands.
 #pragma warning disable CA2000 // Dispose objects before losing scope
-        ChildSiteLink childSiteLink = ChildSiteLink.Create(parentIsland, placementVisual);
+        ChildSiteLink childSiteLink = ChildSiteLink.CreateForSystemVisual(parentIsland, placementVisual);
 #pragma warning restore CA2000
 
         // We also need to keep the offset of the ChildContentLink within the parent ContentIsland in sync
@@ -79,7 +81,7 @@ public async Task LoadModel()
             // xaml layout change on this thread!
             var transform = rect.TransformToVisual(null);
             var point = transform.TransformPoint(new Windows.Foundation.Point(0, 0));
-            childSiteLink.LocalToParentTransformMatrix = System.Numerics.Matrix4x4.CreateTranslation(
+            childSiteLink.LocalToParentTransformMatrix = Matrix4x4.CreateTranslation(
                 (float)(point.X),
                 (float)(point.Y),
                 0);
@@ -97,18 +99,22 @@ public async Task LoadModel()
 
         // The ContentIsland is connected to the ChildSiteLink and must outlive this method.
 #pragma warning disable CA2000 // Dispose objects before losing scope
-        ContentIsland helmetIsland = await HelmetScenario.CreateIsland(placementVisual.Compositor);
+        ContentIsland contentIsland = await SystemCompositionIslandScenario.CreateIslandAsync(
+            placementVisual.Compositor,
+            size);
 #pragma warning restore CA2000
 
         if (!childSiteLink.IsClosed)
         {
-            entry.HelmetIsland = helmetIsland;
-            childSiteLink.Connect(helmetIsland);
+            entry.ChildIsland = contentIsland;
+            childSiteLink.ProcessesKeyboardInput = contentIsland.ProcessesKeyboardInput;
+            childSiteLink.ProcessesPointerInput = contentIsland.ProcessesPointerInput;
+            childSiteLink.Connect(contentIsland);
         }
         else
         {
             // The page was unloaded while the island was loading; release it immediately.
-            helmetIsland.Dispose();
+            contentIsland.Dispose();
         }
     }
 
@@ -118,10 +124,11 @@ private void OnUnloaded(object sender, RoutedEventArgs e)
         {
             entry.Rect.LayoutUpdated -= entry.LayoutUpdatedHandler;
             entry.ChildSiteLink.Dispose();
-            entry.HelmetIsland?.Dispose();
+            entry.ChildIsland?.Dispose();
+            ElementCompositionPreview.SetElementChildVisual(entry.Rect, null);
         }
 
         _islandEntries.Clear();
         NextHostElementIndex = 0;
     }
-}
+}