Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Experiment] Shimmer #391

Merged
merged 10 commits into from
Mar 10, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/Shimmer/OpenSolution.bat
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@ECHO OFF

powershell ..\..\common\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*
Binary file added components/Shimmer/samples/Assets/Owl.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions components/Shimmer/samples/Dependencies.props
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions components/Shimmer/samples/MultiTarget.props
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions components/Shimmer/samples/Shimmer.Samples.csproj
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions components/Shimmer/samples/Shimmer.md
Original file line number Diff line number Diff line change
@@ -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]
61 changes: 61 additions & 0 deletions components/Shimmer/samples/ShimmerSample.xaml
Original file line number Diff line number Diff line change
@@ -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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
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>
<labs: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}" />
<labs: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}" />
<labs: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}" />
<labs:Shimmer Visibility="{x:Bind local:ShimmerSample.ReverseVisibility(Install.Visibility), Mode=OneWay}" />
</Grid>
</StackPanel>
</StackPanel>
</Page>
24 changes: 24 additions & 0 deletions components/Shimmer/samples/ShimmerSample.xaml.cs
Original file line number Diff line number Diff line change
@@ -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(),

};
}
13 changes: 13 additions & 0 deletions components/Shimmer/src/AdditionalAssemblyInfo.cs
Original file line number Diff line number Diff line change
@@ -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")]
17 changes: 17 additions & 0 deletions components/Shimmer/src/CommunityToolkit.Labs.WinUI.Shimmer.csproj
Original file line number Diff line number Diff line change
@@ -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>
35 changes: 35 additions & 0 deletions components/Shimmer/src/Dependencies.props
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions components/Shimmer/src/MultiTarget.props
Original file line number Diff line number Diff line change
@@ -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>
45 changes: 45 additions & 0 deletions components/Shimmer/src/Shimmer/Shimmer.Properties.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
// 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.Labs.WinUI;
public partial class Shimmer : Control
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
{
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();
michael-hawker marked this conversation as resolved.
Show resolved Hide resolved
}
}));

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.TryStartAnimation();
}
else
{
self.StopAnimation();
}
}));

public TimeSpan Duration
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
{
get => (TimeSpan)GetValue(DurationProperty);
set => SetValue(DurationProperty, value);
}

public bool IsActive
{
get => (bool)GetValue(IsActiveProperty);
set => SetValue(IsActiveProperty, value);
}
}
Loading