[Experiment] Shimmer

common/GlobalUsings_WinUI.cs

@@ -7,7 +7,7 @@
 
 global using System.Runtime.InteropServices.WindowsRuntime;
 
-global using CommunityToolkit.Labs.WinUI;
+global using CommunityToolkit.Controls.WinUI;
 
 global using Windows.Foundation;
 global using Windows.Foundation.Collections;

components/Shimmer/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\common\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/Shimmer/samples/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/Shimmer/samples/MultiTarget.props

@@ -0,0 +1,9 @@
+<Project>
+  <PropertyGroup>
+    <!--
+          MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
+          Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
+        -->
+    <MultiTarget>uwp;wasdk;</MultiTarget>
+  </PropertyGroup>
+</Project>

components/Shimmer/samples/Shimmer.Samples.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>Shimmer</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(RepositoryDirectory)common\ToolkitComponent.SampleProject.props" />
+  <ItemGroup>
+    <None Remove="Assets\Owl.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Assets\Owl.jpg">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+</Project>

components/Shimmer/samples/Shimmer.md

@@ -0,0 +1,17 @@
+---
+title: Shimmer
+author: JustinXinLiu
+description: An easy to use Shimmer control to indicate something is loading.
+keywords: Shimmer, Loading, Control, Layout
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Layout
+discussion-id: 381
+issue-id: 390
+---
+# Shimmer
+
+The Shimmer control can be used to communicate to the user a certain UI element is fetching data or is loading. The `Duration` can be set to change the time in between fades.
+
+> [!SAMPLE ShimmerSample]

components/Shimmer/samples/ShimmerSample.xaml

@@ -0,0 +1,61 @@
+<!--  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.  -->
+<Page x:Class="ShimmerExperiment.Samples.ShimmerSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:ShimmerExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <StackPanel Spacing="16">
+        <StackPanel Width="240"
+                    Padding="16"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    BorderThickness="1"
+                    CornerRadius="4"
+                    Spacing="12">
+
+            <Grid Width="96"
+                  Height="96"
+                  CornerRadius="96">
+                <Border x:Name="Picture"
+                        Visibility="{x:Bind HasLoaded, Mode=OneWay}">
+                    <Border.Background>
+                        <ImageBrush ImageSource="ms-appx:///Assets/Owl.jpg" />
+                    </Border.Background>
+                </Border>
+                <controls:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Picture.Visibility), Mode=OneWay}" />
+            </Grid>
+
+            <Grid Width="80"
+                  Height="20"
+                  HorizontalAlignment="Center">
+                <TextBlock x:Name="Title"
+                           FontWeight="SemiBold"
+                           Text="This is a title"
+                           Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
+                <controls:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Title.Visibility), Mode=OneWay}" />
+            </Grid>
+            <Grid Width="120"
+                  Height="20"
+                  HorizontalAlignment="Center">
+                <TextBlock x:Name="Description"
+                           HorizontalAlignment="Center"
+                           Text="This is a description"
+                           Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
+                <controls:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Description.Visibility), Mode=OneWay}" />
+            </Grid>
+            <Grid Width="60"
+                  Height="32"
+                  HorizontalAlignment="Center">
+                <Button x:Name="Install"
+                        Content="Install"
+                        Style="{StaticResource AccentButtonStyle}"
+                        Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
+                <controls:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Install.Visibility), Mode=OneWay}" />
+            </Grid>
+        </StackPanel>
+    </StackPanel>
+</Page>

components/Shimmer/samples/ShimmerSample.xaml.cs

@@ -0,0 +1,24 @@
+// 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 ShimmerExperiment.Samples;
+
+[ToolkitSampleBoolOption("HasLoaded", false, Title = "Content loaded")]
+
+[ToolkitSample(id: nameof(ShimmerSample), "Basic Shimmer", description: "A sample that shows how to use a shimmer loading indicator.")]
+public sealed partial class ShimmerSample : Page
+{
+    public ShimmerSample()
+    {
+        this.InitializeComponent();
+    }
+
+    private static Visibility ReverseVisibility(Visibility vis) => vis switch
+    {
+        Visibility.Collapsed => Visibility.Visible,
+        Visibility.Visible => Visibility.Collapsed,
+        _ => throw new System.NotImplementedException(),
+
+    };
+}

components/Shimmer/src/AdditionalAssemblyInfo.cs

@@ -0,0 +1,13 @@
+// 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.
+
+using System.Runtime.CompilerServices;
+
+// These `InternalsVisibleTo` calls are intended to make it easier for
+// for any internal code to be testable in all the different test projects
+// used with the Labs infrastructure.
+[assembly: InternalsVisibleTo("Shimmer.Tests.Uwp")]
+[assembly: InternalsVisibleTo("Shimmer.Tests.WinAppSdk")]
+[assembly: InternalsVisibleTo("CommunityToolkit.Tests.Uwp")]
+[assembly: InternalsVisibleTo("CommunityToolkit.Tests.WinAppSdk")]

components/Shimmer/src/CommunityToolkit.Labs.WinUI.Shimmer.csproj

@@ -0,0 +1,17 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>Shimmer</ToolkitComponentName>
+    <PackageId>CommunityToolkit.Labs.$(PackageIdVariant).Shimmer</PackageId>
+    <Description>This package contains Shimmer.</Description>
+    <Version>0.0.1</Version>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.Labs.WinUI.ShimmerRns</RootNamespace>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(RepositoryDirectory)common\ToolkitComponent.SourceProject.props" />
+  <ItemGroup>
+    <UpToDateCheckInput Remove="Shimmer\Shimmer.xaml" />
+  </ItemGroup>
+</Project>

components/Shimmer/src/Dependencies.props

@@ -0,0 +1,35 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+  <!-- WinUI 2 / UWP -->
+  <ItemGroup Condition="'$(IsUwp)' == 'true'">
+    <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI" Version="7.1.3"/> -->
+    <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Animations" Version="7.1.2"/>
+  </ItemGroup>
+
+  <!-- WinUI 2 / Uno -->
+  <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+    <!--  <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI" Version="7.1.11"/> -->
+    <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Animations" Version="7.1.10"/>
+  </ItemGroup>
+
+  <!-- WinUI 3 / WinAppSdk -->
+  <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+    <!-- <PackageReference Include="CommunityToolkit.WinUI.UI" Version="7.1.2"/> -->
+    <PackageReference Include="CommunityToolkit.WinUI.UI.Animations" Version="7.1.2"/>
+  </ItemGroup>
+
+  <!-- WinUI 3 / Uno -->
+  <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+    <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI" Version="7.1.100"/> -->
+    <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Animations" Version="7.1.100"/>
+  </ItemGroup>
+</Project>

components/Shimmer/src/MultiTarget.props

@@ -0,0 +1,9 @@
+<Project>
+    <PropertyGroup>
+        <!--
+          MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
+          Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
+        -->
+        <MultiTarget>uwp;wasdk;</MultiTarget>
+    </PropertyGroup>
+</Project>

components/Shimmer/src/Shimmer/Shimmer.Properties.cs

@@ -0,0 +1,59 @@
+// 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 CommunityToolkit.WinUI.Controls;
+
+public partial class Shimmer : Control
+{
+    /// <summary>
+    /// Identifies the <see cref="Duration"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty DurationProperty = DependencyProperty.Register(
+        nameof(Duration), typeof(TimeSpan), typeof(Shimmer), new PropertyMetadata(TimeSpan.FromMilliseconds(1600), (s, e) =>
+        {
+            var self = (Shimmer)s;
+            if (self.IsActive)
+            {
+                self.TryStartAnimation();
+            }
+        }));
+
+    /// <summary>
+    /// Identifies the <see cref="IsActive"/> dependency property.
+    /// </summary>
+    public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register(
+        nameof(IsActive), typeof(bool), typeof(Shimmer), new PropertyMetadata(true, (s, e) =>
+        {
+            var self = (Shimmer)s;
+            var isActive = (bool)e.NewValue;
+
+            if (isActive)
+            {
+                self.StopAnimation();
+                self.TryStartAnimation();
+            }
+            else
+            {
+                self.StopAnimation();
+            }
+        }));
+
+    /// <summary>
+    /// Gets or sets the animation duration
+    /// </summary>
+    public TimeSpan Duration
+    {
+        get => (TimeSpan)GetValue(DurationProperty);
+        set => SetValue(DurationProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets if the animation is playing
+    /// </summary>
+    public bool IsActive
+    {
+        get => (bool)GetValue(IsActiveProperty);
+        set => SetValue(IsActiveProperty, value);
+    }
+}