diff --git a/winui/Shimmer/Getting-Started.md b/winui/Shimmer/Getting-Started.md index 0d61261a..79778076 100644 --- a/winui/Shimmer/Getting-Started.md +++ b/winui/Shimmer/Getting-Started.md @@ -48,4 +48,85 @@ SfShimmer Shimmer = new SfShimmer(); {% endhighlight %} {% endtabs %} -![WinUI Shimmer control overview](Shimmer_Images/winui_shimmer_getting_started.gif) \ No newline at end of file +![WinUI Shimmer control overview](Shimmer_Images/winui_shimmer_getting_started.gif) + +## Loading shimmer content + +When you set the IsActive property to false in SfShimmer, the content is displayed without any shimmer animation. Conversely, when IsActive is set to true, which is its default state, only the animation is displayed, and the content remains invisible. This allows you to control how your content is presented, with the option to show the animation exclusively when IsActive is set to true. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + + + +{% endhighlight %} +{% highlight C# %} + +SfShimmer shimmer = new SfShimmer(); +shimmer.Name = "shimmer"; +shimmer.Width = 500; +shimmer.WaveDuration = 3000; + +StackPanel stackPanel = new StackPanel(); +stackPanel.Orientation = Orientation.Horizontal; + +Image image = new Image(); +image.Source = new BitmapImage(new Uri("Assets/Icon.png")); +image.Width = 130; +image.Height = 130; + +StackPanel textStackPanel = new StackPanel(); +textStackPanel.Orientation = Orientation.Vertical; + +TextBlock textBlock1 = new TextBlock(); +textBlock1.Text = "Syncfusion provides an ecosystem of compatible developer"; +textBlock1.FontWeight = FontWeights.SemiLight; +textBlock1.FontSize = 13; +textBlock1.Margin = new Thickness(-10, 20, 0, 0); + +TextBlock textBlock2 = new TextBlock(); +textBlock2.Text = "control suites, embeddable BI platforms, and business software."; +textBlock2.FontWeight = FontWeights.SemiLight; +textBlock2.FontSize = 13; +textBlock2.Margin = new Thickness(-10, 0, 0, 0); + +TextBlock textBlock3 = new TextBlock(); +textBlock3.Text = "We are proud to serve a wide variety of customers, from individual"; +textBlock3.FontWeight = FontWeights.SemiLight; +textBlock3.FontSize = 13; +textBlock3.Margin = new Thickness(-10, 20, 0, 0); + +TextBlock textBlock4 = new TextBlock(); +textBlock4.Text = "developers to Fortune 100 companies."; +textBlock4.FontWeight = FontWeights.SemiLight; +textBlock4.FontSize = 13; +textBlock4.Margin = new Thickness(-10, 0, 0, 0); + +textStackPanel.Children.Add(textBlock1); +textStackPanel.Children.Add(textBlock2); +textStackPanel.Children.Add(textBlock3); +textStackPanel.Children.Add(textBlock4); + +stackPanel.Children.Add(image); +stackPanel.Children.Add(textStackPanel); + +shimmer.Content = stackPanel; + +this.Content = shimmer; + +{% endhighlight %} +{% endtabs %} + +![WinUI Shimmer control Content](Shimmer_Images/winui_shimmer_content.gif) \ No newline at end of file diff --git a/winui/Shimmer/Shimmer_Images/winui_shimmer_content.gif b/winui/Shimmer/Shimmer_Images/winui_shimmer_content.gif new file mode 100644 index 00000000..2c32fa64 Binary files /dev/null and b/winui/Shimmer/Shimmer_Images/winui_shimmer_content.gif differ