Skip to content

Commit c13bff2

Browse files
niels9001JustinXinLiu
niels9001
and
JustinXinLiu
committed
Init Shimmer
Co-Authored-By: Justin Liu <[email protected]>
1 parent 2e2f317 commit c13bff2

21 files changed

+754
-0
lines changed

‎components/Shimmer/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\common\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/Shimmer/samples/Assets/Owl.jpg‎

60.2 KB
Loading

‎components/Shimmer/samples/Dependencies.props‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/Shimmer/samples/MultiTarget.props‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Project>
2+
<PropertyGroup>
3+
<!--
4+
MultiTarget is a custom property that indicates which target a project is designed to be built for / run on.
5+
Used to create project references, generate solution files, enable/disable TargetFrameworks, and build nuget packages.
6+
-->
7+
<MultiTarget>uwp;wasdk;</MultiTarget>
8+
</PropertyGroup>
9+
</Project>

‎components/Shimmer/samples/Shimmer.Samples.csproj‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>Shimmer</ToolkitComponentName>
4+
</PropertyGroup>
5+
6+
<!-- Sets this up as a toolkit component's sample project -->
7+
<Import Project="$(RepositoryDirectory)common\ToolkitComponent.SampleProject.props" />
8+
<ItemGroup>
9+
<None Remove="Assets\Owl.jpg" />
10+
</ItemGroup>
11+
<ItemGroup>
12+
<Content Include="Assets\Owl.jpg">
13+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
14+
</Content>
15+
</ItemGroup>
16+
</Project>

‎components/Shimmer/samples/Shimmer.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Shimmer
3+
author: JustinXinLiu
4+
description: An easy to use Shimmer control to indicate something is loading.
5+
keywords: Shimmer, Loading, Control, Layout
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 381
11+
issue-id: 0
12+
---
13+
# Shimmer
14+
15+
The Shimmer control can be used to communicate to the user a certain UI element is fetching data or is loading. The `AnimationDurationInMilliseconds` can be set to change the time in between fades.
16+
17+
> [!SAMPLE ShimmerSample]

‎components/Shimmer/samples/ShimmerSample.xaml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!-- 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. -->
2+
<Page x:Class="ShimmerExperiment.Samples.ShimmerSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:ShimmerExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<StackPanel Spacing="16">
12+
<StackPanel Width="240"
13+
Padding="16"
14+
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
15+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
16+
BorderThickness="1"
17+
CornerRadius="4"
18+
Spacing="12">
19+
20+
<Grid Width="96"
21+
Height="96"
22+
CornerRadius="96">
23+
<Border x:Name="Picture"
24+
Visibility="{x:Bind HasLoaded, Mode=OneWay}">
25+
<Border.Background>
26+
<ImageBrush ImageSource="ms-appx:///Assets/Owl.jpg" />
27+
</Border.Background>
28+
</Border>
29+
<labs:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Picture.Visibility), Mode=OneWay}" />
30+
</Grid>
31+
32+
<Grid Width="80"
33+
Height="20"
34+
HorizontalAlignment="Center">
35+
<TextBlock x:Name="Title"
36+
FontWeight="SemiBold"
37+
Text="This is a title"
38+
Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
39+
<labs:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Title.Visibility), Mode=OneWay}" />
40+
</Grid>
41+
<Grid Width="120"
42+
Height="20"
43+
HorizontalAlignment="Center">
44+
<TextBlock x:Name="Description"
45+
HorizontalAlignment="Center"
46+
Text="This is a description"
47+
Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
48+
<labs:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Description.Visibility), Mode=OneWay}" />
49+
</Grid>
50+
<Grid Width="60"
51+
Height="32"
52+
HorizontalAlignment="Center">
53+
<Button x:Name="Install"
54+
Content="Install"
55+
Style="{StaticResource AccentButtonStyle}"
56+
Visibility="{x:Bind HasLoaded, Mode=OneWay}" />
57+
<labs:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Install.Visibility), Mode=OneWay}" />
58+
</Grid>
59+
</StackPanel>
60+
</StackPanel>
61+
</Page>

‎components/Shimmer/samples/ShimmerSample.xaml.cs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace ShimmerExperiment.Samples;
6+
7+
[ToolkitSampleBoolOption("HasLoaded", false, Title = "Content loaded")]
8+
9+
[ToolkitSample(id: nameof(ShimmerSample), "Basic Shimmer", description: "A sample that shows how to use a shimmer loading indicator.")]
10+
public sealed partial class ShimmerSample : Page
11+
{
12+
public ShimmerSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
17+
private static Visibility ReverseVisibility(Visibility vis) => vis switch
18+
{
19+
Visibility.Collapsed => Visibility.Visible,
20+
Visibility.Visible => Visibility.Collapsed,
21+
_ => throw new System.NotImplementedException(),
22+
23+
};
24+
}

‎components/Shimmer/src/AdditionalAssemblyInfo.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using System.Runtime.CompilerServices;
6+
7+
// These `InternalsVisibleTo` calls are intended to make it easier for
8+
// for any internal code to be testable in all the different test projects
9+
// used with the Labs infrastructure.
10+
[assembly: InternalsVisibleTo("Shimmer.Tests.Uwp")]
11+
[assembly: InternalsVisibleTo("Shimmer.Tests.WinAppSdk")]
12+
[assembly: InternalsVisibleTo("CommunityToolkit.Tests.Uwp")]
13+
[assembly: InternalsVisibleTo("CommunityToolkit.Tests.WinAppSdk")]

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>Shimmer</ToolkitComponentName>
4+
<PackageId>CommunityToolkit.Labs.$(PackageIdVariant).Shimmer</PackageId>
5+
<Description>This package contains Shimmer.</Description>
6+
<Version>0.0.1</Version>
7+
8+
<!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
9+
<RootNamespace>CommunityToolkit.Labs.WinUI.ShimmerRns</RootNamespace>
10+
</PropertyGroup>
11+
12+
<!-- Sets this up as a toolkit component's source project -->
13+
<Import Project="$(RepositoryDirectory)common\ToolkitComponent.SourceProject.props" />
14+
<ItemGroup>
15+
<UpToDateCheckInput Remove="Shimmer\Shimmer.xaml" />
16+
</ItemGroup>
17+
</Project>

0 commit comments

Comments
 (0)