diff --git a/winui/SfShimmer/Built-in Views.md b/winui/SfShimmer/Built-in Views.md new file mode 100644 index 000000000..414b141db --- /dev/null +++ b/winui/SfShimmer/Built-in Views.md @@ -0,0 +1,35 @@ +--- +layout: post +title: Built-in Views of WinUI Shimmer Control | Syncfusion +description: Learn about the various built-in views available in the Syncfusion WinUI Shimmer(SfShimmer) control, including Circle Persona, Square Persona, Profile, Article, Video, Feed, and Shopping. +platform: WinUI +control: SfShimmer +documentation: ug +--- + +# Built-in Views of WinUI Shimmer Control (SfShimmer) + +## Built-in types + +Syncfusion WinUI Shimmer (SfShimmer) control provides seven built-in shimmer view types such as CirclePersona, SquarePersona, Profile, Article, Video, Feed, and Shopping. + +![WinUI Shimmmer control with DefaultView](SfShimmer_images/BuiltinView_images/winui_shimmer_BuiltinView.gif) + +The built-in shimmer types can be used by setting the Type of SfShimmer. By default, the CirclePersona is initially rendered. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% highlight C# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.Type = ShimmerType.CirclePersona; + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} \ No newline at end of file diff --git a/winui/SfShimmer/CustomLayout.md b/winui/SfShimmer/CustomLayout.md new file mode 100644 index 000000000..fdb66c159 --- /dev/null +++ b/winui/SfShimmer/CustomLayout.md @@ -0,0 +1,325 @@ +--- +layout: post +title: Custom Layout in WinUI Shimmer control | Syncfusion +description: Learn here all about the Custom Layout support in Syncfusion WinUI Shimmer (SfShimmer) control and more. +platform: WinUI +control: SfShimmer +documentation: ug +--- + +# Custom Layout of WinUI Shimmer (SfShimmer) + +The `Custom Layout` property of the SfShimmer can be used to create your shimmer view. The below code demonstrates how to customize the shimmer view using the WinUI framework elements by `Custom Layout`. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + + SfShimmer sfShimmer = new SfShimmer(); + Grid customLayout = new Grid() + { + ColumnSpacing = 15, + RowSpacing = 10, + }; + + for (int i = 0; i < 12; i++) + { + customLayout.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto }); + } + + customLayout.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto }); + customLayout.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto }); + + Rectangle rectangle1 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 280, + + }; + Grid.SetRow(rectangle1, 0); + Grid.SetColumnSpan(rectangle1, 2); + + Rectangle rectangle2 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 260, + }; + Grid.SetRow(rectangle2, 1); + Grid.SetColumnSpan(rectangle2, 2); + + Rectangle rectangle3 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + }; + Grid.SetRow(rectangle3, 2); + Grid.SetRowSpan(rectangle3, 8); + + Rectangle rectangle4 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 190, + }; + Grid.SetRow(rectangle4, 2); + Grid.SetColumn(rectangle4, 1); + + Rectangle rectangle5 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 190, + }; + Grid.SetRow(rectangle5, 3); + Grid.SetColumn(rectangle5, 1); + + Rectangle rectangle6 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 170, + }; + Grid.SetRow(rectangle6, 4); + Grid.SetColumn(rectangle6, 1); + + Rectangle rectangle7 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 190, + }; + Grid.SetRow(rectangle7, 5); + Grid.SetColumn(rectangle7, 1); + + Rectangle rectangle8 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 150, + }; + Grid.SetRow(rectangle8, 6); + Grid.SetColumn(rectangle8, 1); + + Rectangle rectangle9 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 160, + }; + Grid.SetRow(rectangle9, 7); + Grid.SetColumn(rectangle9, 1); + + Rectangle rectangle10 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 175, + }; + Grid.SetRow(rectangle10, 8); + Grid.SetColumn(rectangle10, 1); + + Rectangle rectangle11 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 160, + }; + Grid.SetRow(rectangle11, 10); + + Rectangle rectangle12 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 30, + Width = 175, + }; + Grid.SetRow(rectangle12, 10); + Grid.SetColumn(rectangle12, 1); + Grid.SetRowSpan(rectangle12, 12); + + Rectangle rectangle13 = new Rectangle() + { + RadiusX = 3, + RadiusY = 3, + HorizontalAlignment = HorizontalAlignment.Left, + Height = 10, + Width = 175, + }; + Grid.SetRow(rectangle13,11); + + customLayout.Children.Add(rectangle1); + customLayout.Children.Add(rectangle2); + customLayout.Children.Add(rectangle3); + customLayout.Children.Add(rectangle4); + customLayout.Children.Add(rectangle5); + customLayout.Children.Add(rectangle6); + customLayout.Children.Add(rectangle7); + customLayout.Children.Add(rectangle8); + customLayout.Children.Add(rectangle9); + customLayout.Children.Add(rectangle10); + customLayout.Children.Add(rectangle11); + customLayout.Children.Add(rectangle12); + customLayout.Children.Add(rectangle13); + + sfShimmer.CustomLayout = customLayout; + + Grid mainGrid = new Grid(); + mainGrid.Children.Add(sfShimmer); + this.Content = mainGrid; + +{% endhighlight %} +{% endtabs %} + +![Shimmer Custom Layout in WinUI](SfShimmer_images/CustomLayout_images/winui_shimmer_customlayout.gif) \ No newline at end of file diff --git a/winui/SfShimmer/Customization.md b/winui/SfShimmer/Customization.md new file mode 100644 index 000000000..f96c30334 --- /dev/null +++ b/winui/SfShimmer/Customization.md @@ -0,0 +1,119 @@ +--- +layout: post +title: Customization in WinUI Shimmer control | Syncfusion +description: Learn how to customize the appearance of the Syncfusion WinUI Shimmer(SfShimmer) control using various properties like Fill, Wave Color, Wave Width, Repeat Count and Wave Duration. +platform: WinUI +control: SfShimmer +documentation: ug +--- + +# Customization in WinUI Shimmer + +This section explains how to customize the appearance of the Syncfusion WinUI Shimmer (SfShimmer) control using various properties. You can modify the following aspects of the Shimmer effect: + +## Fill + +The `Fill` property allows you to set the background color of the Shimmer view. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight c# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.Fill = Color.FromRgba("#89CFF0"); + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} + +![Fill customization in WinUI Shimmer](SfShimmer_images/Customization_images/winui_shimmer_fill.gif) + +## Wave Color + +The `WaveColor` property lets you define the color of the shimmer wave. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight c# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.WaveColor = Color.FromRgba("#89CFF0"); + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} + +![WaveColor customization in WinUI Shimmer](SfShimmer_images/Customization_images/winui_shimmer_wavecolor.gif) + +## Wave Duration + +The `WaveDuration` property determines the duration of the wave animation in milliseconds. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight c# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.WaveDuration =3000; + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} + +![WaveDuration customization in WinUI Shimmer](SfShimmer_images/Customization_images/winui_shimmer_waveduration.gif) + +## Wave Width + +The `WaveWidth` property specifies the width of the shimmer wave. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight c# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.WaveWidth = 70; + Shimmer.WaveColor = Color.FromRgba("#89CFF0"); + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} + +![WaveWidth customization in WinUI Shimmer](SfShimmer_images/Customization_images/winui_shimmer_wavewidth.gif) + +## Repeat Count + +The `RepeatCount` property sets the number of times the built-in view should be repeated. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight c# %} + + SfShimmer Shimmer = new SfShimmer(); + Shimmer.RepeatCount = 3; + this.Content = Shimmer; + +{% endhighlight %} +{% endtabs %} + +![RepeatCount customization in WinUI Shimmer](SfShimmer_images/Customization_images/winui_shimmer_repeatcount.gif) \ No newline at end of file diff --git a/winui/SfShimmer/Getting-Started.md b/winui/SfShimmer/Getting-Started.md new file mode 100644 index 000000000..9eca2a372 --- /dev/null +++ b/winui/SfShimmer/Getting-Started.md @@ -0,0 +1,50 @@ +--- +layout: post +title: Getting started with WinUI Shimmer control | Syncfusion +description: Learn about getting started with the Syncfusion WinUI Shimmer(SfShimmer) control and its basic features here. +platform: WinUI +control: SfShimmer +documentation: ug +--- + +# Getting Started with WinUI Shimmer + +This section explains the steps required to add the WinUI Shimmer control and covers only the basic features needed to get started with the Syncfusion Shimmer control. + +## Creating an application with WinUI Shimmer control + +1. Create a [WinUI 3 desktop app for C# and .NET 6](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop). +2. Add reference to [Syncfusion.Core.WinUI](https://www.nuget.org/packages/Syncfusion.Core.WinUI) NuGet. +3. Import the control namespace `Syncfusion.UI.Xaml.Core` in XAML or C# code. +4. Initialize the [SfShimmer](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Core.SfShimmer.html) control. + +## Initializing Shimmer control + +To initialize the Shimmer control, you can simply add the `SfShimmer` control in your XAML or C# code. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} +{% highlight C# %} + + SfShimmer Shimmer = new SfShimmer(); + +{% endhighlight %} +{% endtabs %} + +![WinUI Shimmer control overview](SfShimmer_images/GettingStarted_images/winui_shimmer_getting_started.gif) \ No newline at end of file diff --git a/winui/SfShimmer/Overview.md b/winui/SfShimmer/Overview.md new file mode 100644 index 000000000..fd8cbed9c --- /dev/null +++ b/winui/SfShimmer/Overview.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview of WinUI SfShimmer control | Syncfusion +description: Learn about the introduction of Syncfusion WinUI Shimmer Control (SfShimmer) with essential features and more. +platform: WinUI +control: Shimmer +documentation: ug +--- + +# WinUI Shimmer Overview + +The WinUI Shimmer control enhances the responsiveness of your application by displaying a shimmer effect during content loading or background processing. + +![WinUI Shimmer control overview](SfShimmer_images/Overview_images/winui_shimmer_overview.gif) + +## Key Features + +* `Shimmer types`: Seven built-in shimmer types. +* `Custom Layout`: Custom shimmer types are supported. +* `Customization`: Customizable with various options such as fill, wave color, wave width, wave duration, and repeat count. \ No newline at end of file diff --git a/winui/SfShimmer/SfShimmer_Images/BuiltinView_images/winui_shimmer_BuiltinView.gif b/winui/SfShimmer/SfShimmer_Images/BuiltinView_images/winui_shimmer_BuiltinView.gif new file mode 100644 index 000000000..1bf1fc3c9 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/BuiltinView_images/winui_shimmer_BuiltinView.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/CustomLayout_images/winui_shimmer_customlayout.gif b/winui/SfShimmer/SfShimmer_Images/CustomLayout_images/winui_shimmer_customlayout.gif new file mode 100644 index 000000000..4c05efb6b Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/CustomLayout_images/winui_shimmer_customlayout.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_fill.gif b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_fill.gif new file mode 100644 index 000000000..810fa33a8 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_fill.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_repeatcount.gif b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_repeatcount.gif new file mode 100644 index 000000000..3257aee9d Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_repeatcount.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavecolor.gif b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavecolor.gif new file mode 100644 index 000000000..eaf262c62 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavecolor.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_waveduration.gif b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_waveduration.gif new file mode 100644 index 000000000..99346d648 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_waveduration.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavewidth.gif b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavewidth.gif new file mode 100644 index 000000000..15e063940 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Customization_images/winui_shimmer_wavewidth.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/GettingStarted_images/winui_shimmer_getting_started.gif b/winui/SfShimmer/SfShimmer_Images/GettingStarted_images/winui_shimmer_getting_started.gif new file mode 100644 index 000000000..084cb297b Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/GettingStarted_images/winui_shimmer_getting_started.gif differ diff --git a/winui/SfShimmer/SfShimmer_Images/Overview_images/winui_shimmer_overview.gif b/winui/SfShimmer/SfShimmer_Images/Overview_images/winui_shimmer_overview.gif new file mode 100644 index 000000000..33d98e839 Binary files /dev/null and b/winui/SfShimmer/SfShimmer_Images/Overview_images/winui_shimmer_overview.gif differ