Introducing the New WinUI Shimmer Control
Tags: winui, ui, whatsnew, desktop
Published: 2023-10-03 15:20:53

---
title: Introducing the New WinUI Shimmer Control
published: true
date: 2023-09-25 15:09:55 UTC
tags: winui, ui, whatsnew, desktop
canonical_url: https://www.syncfusion.com/blogs/post/new-winui-shimmer-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rjs6mvmh0ljila8hqt1.png
---
We are thrilled to introduce the all-new [WinUI Shimmer Control](https://www.syncfusion.com/winui-controls/shimmer "WinUI Shimmer Control") in our Syncfusion [Essential Studio 2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3") release.

The WinUI Shimmer control is a cutting-edge tool designed to enrich the user interface of your applications. It introduces a stylish shimmer effect that becomes visible when the app loads data or processes tasks in the background. This innovative feature not only boosts the responsiveness of your apps, but it also infuses them with a modern and elegant aesthetic.

The shimmer effect is a visual indicator for users, signalling that the app is diligently processing their request. This clever design element keeps users engaged and patient, even during operations that might take some time.

Let’s explore the features of this new WinUI Shimmer Control and the steps to get started with it.

## Key features

The key features of the control are:

- [Built-in shimmer types](#Built)
- [Custom shimmer types](#Custom)
- [Other customizations](#Customization)

###<a name="Built">Built-in shimmer types</a>

The WinUI Shimmer (SfShimmer) control offers various built-in shimmer types, each tailored to meet specific user interface needs. These built-in options simplify crafting engaging loading animations for your WinUI apps. The built-in shimmer types include **CirclePersona** , **SquarePersona** , **Profile** , **Article** , **Video** , **Feed** , and **Shopping**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Built-in-Shimmer-Types-in-WinUI-Shimmer-Control.gif" alt="Built-in Shimmer Types in WinUI Shimmer Control" style="width:100%">

  <figcaption>Built-in Shimmer Types in WinUI Shimmer Control</figcaption>

</figure>

###<a name="Custom">Custom shimmer type</a>

The custom layout support in the WinUI Shimmer control gives you the creative freedom to design your unique shimmer types. This level of customization grants you complete control over crafting your desired shimmer effects.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Creating-Custom-Shimmer-Effect-Using-WinUI-Shimmer-Control.gif" alt="Creating Custom Shimmer Effect Using WinUI Shimmer Control" style="width:100%">

  <figcaption>Creating Custom Shimmer Effect Using WinUI Shimmer Control</figcaption>

</figure>

###<a name="Customization">Other customizations</a>

The WinUI Shimmer control also provides extensive customization options. You can fine-tune aspects like fill color, wave color, wave width, wave duration, and repeat count to apply the shimmer effect precisely with your app’s design.

#### Fill color

You can customize the shimmer view by changing the fill color according to your preferences. This feature allows for greater personalization and can be adjusted to match the overall aesthetic of the app.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Fill-Color-in-WinUI-Shimmer-Control.gif" alt="Customizing Fill Color in WinUI Shimmer Control" style="width:100%">

  <figcaption>Customizing Fill Color in WinUI Shimmer Control</figcaption>

</figure>

#### Wave color

You can change the shimmer wave color to a desired color.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Wave-Color-in-WinUI-Shimmer-Control.gif" alt="Customizing Wave Color in WinUI Shimmer Control" style="width:100%">

  <figcaption>Customizing Wave Color in WinUI Shimmer Control</figcaption>

</figure>

#### Wave width

The WinUI Shimmer control allows you to adjust the wave width to a preferred value. Whether aiming for a narrow, subtle wave or a wide, prominent one, you can make it happen.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Wave-Width-in-WinUI-Shimmer-Control.gif" alt="Customizing Wave Width in WinUI Shimmer Control" style="width:100%">

  <figcaption>Customizing Wave Width in WinUI Shimmer Control</figcaption>

</figure>

#### Wave duration

You can customize the wave duration, which determines the duration of the animation wave in milliseconds.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Wave-Duration-in-WinUI-Shimmer-Control.gif" alt="Customizing Wave Duration in WinUI Shimmer Control" style="width:100%">

  <figcaption>Customizing Wave Duration in WinUI Shimmer Control</figcaption>

</figure>

### Repeat count

You can also customize the number of times the shimmer effect repeats.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Customizing-Shimmer-Repeat-Count-in-WinUI-Shimmer-Control.gif" alt="Customizing Shimmer Repeat Count in WinUI Shimmer Control" style="width:100%">

  <figcaption>Customizing Shimmer Repeat Count in WinUI Shimmer Control</figcaption>

</figure>

**Note:** For more details, refer to the [WinUI Shimmer Control documentation](https://help.syncfusion.com/winui/shimmer/overview "Getting started with WinUI Shimmer Control").

## Getting started with the WinUI Shimmer Control

Now that we have explored the key features of the WinUI Shimmer Control, let’s see how to seamlessly integrate it, specifically the built-in type **Article** , into your WinUI app.

### Step 1: Create a WinUI application

First, create a simple project using the [Creating app with Windows app SDK](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Creating WinUI app") documentation.

### Step 2: Add the Syncfusion.Core.WinUI NuGet package

Install the latest [Syncfusion.Core.WinUI ](https://www.nuget.org/packages/Syncfusion.Core.WinUI/ "Syncfusion.Core.WinUI NuGet package")NuGet package in the app from [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery") or from the installed location: **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** The **xx.x.x.xx** denotes the version of the installed Syncfusion WinUI Core package.

### Step 3: Add the namespace

Now, include the  **Syncfusion.UI.Xmal**. **Core**  namespace in your XAML file.

```xml
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
```

### Step 4: Initialize the WinUI Shimmer Control

Finally, initialize the WinUI Shimmer Control with the desired shimmer type. Here, we’ll use the **Article** shimmer type.

Refer to the following code example.

```xml
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
      <syncfusion:Shimmer Type="Article">
        <syncfusion:Shimmer.Content>
         …….
        </syncfusion:Shimmer.Content>
      </syncfusion:Shimmer>
    </Grid>
</Page>
```

After executing the above code example, we’ll get the shimmer effect for our article content, like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Integrating-Shimmer-Control-in-WinUI-Application.gif" alt="Integrating Shimmer Control in WinUI Application" style="width:100%">

  <figcaption>Integrating Shimmer Control in WinUI Application</figcaption>

</figure>

## GitHub reference

For more details, refer to the [WinUI Shimmer Control GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/shimmer "Blog: WinUI Shimmer control GitHub demos.").

## Conclusion

Thanks for reading. In this blog, we explored the features of the new Syncfusion [WinUI Shimmer Control](https://www.syncfusion.com/winui-controls/shimmer "WinUI Shimmer Control") available in our [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3") release. Now, you’re all set to enhance your WinUI app’s user experience with our Shimmer Control. Enjoy the benefits of improved responsiveness and engaging loading animations.

Also, check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New page") pages to see other new updates in this release. Try them out and leave your feedback in the comments section below! 

The new version is available for existing customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of Essential Studio products") to check out our newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [Unleashing the Power of Navigation and Filtering with WinUI Segmented Control](https://www.syncfusion.com/blogs/post/navigation-filtering-winui-segmented-control.aspx "Blog: Unleashing the Power of Navigation and Filtering with WinUI Segmented Control")
- [Chart of the Week: Creating a WinUI Spline Area Chart for Top Google Investing Searches in 2022](https://www.syncfusion.com/blogs/post/winui-spline-area-chart-top-google-investing-search-2022.aspx "Blog: Chart of the Week: Creating a WinUI Spline Area Chart for Top Google Investing Searches in 2022")
- [Chart of The Week: Creating A WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers](https://www.syncfusion.com/blogs/post/winui-100-stacked-column-chart-cloud-data-centers.aspx "Blog: Chart of The Week: Creating A WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers")