[SwitchPresenter] Sample as a loader replacement

components/Primitives/samples/Primitives.Samples.csproj

@@ -11,6 +11,7 @@
   <ItemGroup>
     <ProjectReference Include="$(ToolkitExtensionsSourceProject)"></ProjectReference>
     <ProjectReference Include="$(ToolkitSizersSourceProject)"></ProjectReference>
+    <ProjectReference Include="$(ToolkitAnimationsSourceProject)"></ProjectReference>
   </ItemGroup>
 
   <ItemGroup>

components/Primitives/samples/SwitchPresenter.md

@@ -12,7 +12,7 @@ issue-id: 0
 icon: Assets/SwitchPresenter.png
 ---
 
-The `SwitchPresenter` control acts like a switch statement for XAML. It allows a developer to display certain content based on the condition of another value as an alternative to managing multiple Visibility values or complex visual states.
+The `SwitchPresenter` control acts like a switch statement for XAML. It allows a developer to display certain content based on the condition of another value as an alternative to managing multiple `Visibility` values or complex visual states.
 
 Unlike traditional approaches of showing/hiding components within a page, the `SwitchPresenter` will only load and attach the matching Case's content to the Visual Tree.
 
@@ -25,3 +25,7 @@ SwitchPresenter can make it easier to follow complex layout changes or layouts w
 Or it can simply be used to clearly display different outcomes based on some state which can be useful for a `NavigationView` or with a simple enum as in the following example:
 
 > [!SAMPLE SwitchPresenterValueSample]
+
+`SwitchPresenter` can also be used as a replacement for the deprecated `Loading` control. This provides more fine-grained control over animations and content within each state:
+
+> [!SAMPLE SwitchPresenterLoaderSample]

components/Primitives/samples/SwitchPresenter/SwitchPresenterLoaderSample.xaml

@@ -0,0 +1,65 @@
+<Page x:Class="PrimitivesExperiment.Samples.SwitchPresenter.SwitchPresenterLoaderSample"
+      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:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:PrimitivesExperiment.Samples.SwitchPresenter"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+    <Page.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>
+    </Page.Resources>
+    <Grid Padding="16">
+        <controls:SwitchPresenter HorizontalAlignment="Center"
+                                  TargetType="x:Boolean"
+                                  Value="{x:Bind LoadingState, Mode=OneWay}">
+            <controls:Case Value="True">
+                <StackPanel HorizontalAlignment="Center"
+                            animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
+                            animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
+                            Orientation="Vertical"
+                            Spacing="8">
+                    <muxc:ProgressRing IsActive="{x:Bind LoadingState, Mode=OneWay}" />
+                    <TextBlock HorizontalAlignment="Center"
+                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                               Style="{StaticResource CaptionTextBlockStyle}"
+                               Text="Fetching data.." />
+                </StackPanel>
+            </controls:Case>
+            <controls:Case Value="False">
+                <TextBlock HorizontalAlignment="Center"
+                           animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
+                           animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
+                           TextAlignment="Center"
+                           TextWrapping="WrapWholeWords">
+                    <Run FontWeight="SemiBold"
+                         Text="Content has loaded" />
+                    <LineBreak />
+                    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
+                </TextBlock>
+            </controls:Case>
+        </controls:SwitchPresenter>
+    </Grid>
+</Page>

components/Primitives/samples/SwitchPresenter/SwitchPresenterLoaderSample.xaml.cs

@@ -0,0 +1,15 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace PrimitivesExperiment.Samples.SwitchPresenter;
+
+[ToolkitSampleBoolOption("LoadingState", true, Title = "IsLoading")]
+[ToolkitSample(id: nameof(SwitchPresenterLoaderSample), "SwitchPresenter Loader", description: $"A sample for showing how to use a {nameof(SwitchPresenter)} to show a loading UI when data is loading.")]
+public sealed partial class SwitchPresenterLoaderSample : Page
+{
+    public SwitchPresenterLoaderSample()
+    {
+        this.InitializeComponent();
+    }
+}