diff --git a/controls/skeleton/animation.md b/controls/skeleton/animation.md new file mode 100644 index 00000000..9ba89236 --- /dev/null +++ b/controls/skeleton/animation.md @@ -0,0 +1,32 @@ +--- +title: Animation +meta_title: .NET MAUI Skeleton Documentation - Animation +description: Learn what are the animation types you can apply to the Telerik .NET MAUI Skeleton control when the content is loading. +position: 2 +tags: .net maui, telerik .net maui, ui for .net maui, shimmer, microsoft .net maui +slug: skeleton-animation +--- + +# .NET MAUI Skeleton Animation + +The Skeleton control includes built-in animation options that allow you to create a smooth and engaging loading experience for the app users. + +You can change the animation type by setting the `AnimationType` (`enum` of type `Telerik.Maui.Controls.Skeleton.SkeletonAnimationType`) property to one of the available options: + +* `None`—No animation is applied to the Skeleton control. The skeleton remains static without any visual effects. +* (Default) `Pulse`—Applies a pulsing animation that smoothly fades the skeleton in and out, creating a subtle breathing effect. This is the default animation type and provides visual feedback that content is actively loading. + +![Telerik UI for .NET MAUI Skeleton Animation Types](images/skeleton-animation-types.gif) + +Below is a quick example showing how to set the `AnimationType` property to `None`: + + + +> For a runnable example with the Skeleton Animation, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Animation** category. + +## See Also + +- [Built-in Views]({%slug skeleton-default-view%}) +- [Configuration]({%slug skeleton-configuration%}) +- [Custom Views]({%slug skeleton-custom-view%}) +- [Styling]({%slug skeleton-styling%}) diff --git a/controls/skeleton/configuration.md b/controls/skeleton/configuration.md new file mode 100644 index 00000000..ab5cda8b --- /dev/null +++ b/controls/skeleton/configuration.md @@ -0,0 +1,46 @@ +--- +title: Configuration +meta_title: .NET MAUI Skeleton Documentation - Configuration +description: Learn how to configure the width, height, and other properties in Telerik .NET MAUI Skeleton control. +position: 2 +tags: .net maui, telerik .net maui, ui for .net maui, shimmer, microsoft .net maui +slug: skeleton-configuration +--- + +# .NET MAUI Skeleton Configuration + +The Telerik UI for .NET MAUI Skeleton control provides a variety of properties that allow you to configure its appearance and behavior to fit your application's needs. + +## Loading + +The `IsLoading` (`bool`) property indicates whether the content of the Skeleton control is currently in a loading state. When set to `true`, the skeleton view is displayed, simulating the loading of content. When set to `false`, the actual content is shown. The default value is `true`. + +## Width and Height + +The Skeleton allows you to specify the size of the loading view by using the following properties: + +* `LoadingViewMinimumHeight` (`double`)—Specifies the minimum height of the Skeleton loading view. The default value is `64`. +* `LoadingViewMinimumWidth` (`double`)—Specifies the minimum width of the Skeleton loading view. The default value is `64`. + +## Repeat Count + +The `RepeatCount` (`int`) property allows you to specify how many times the loading view should be repeated. This is useful for creating a list of skeleton items that mimic the structure of the actual content. The default value is `1`, meaning the loading view is displayed only once. + +In addition, you can apply spacing between the repeated skeleton views by setting the `RepeatSpacing` (`double`) property. The default value is `10`. + +Below is a quick example showing how to set the `RepeatCount` and `RepeatSpacing` properties: + + + +This is the result: + +![Telerik UI for .NET MAUI Skeleton Repeat Count](images/skeleton-repeat-count.gif) + +> For a runnable example with the Skeleton Repeat Count scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Repeat Count** category. + +## See Also + +- [Built-in Views]({%slug skeleton-default-view%}) +- [Animation]({%slug skeleton-animation%}) +- [Custom Views]({%slug skeleton-custom-view%}) +- [Styling]({%slug skeleton-styling%}) diff --git a/controls/skeleton/custom-view.md b/controls/skeleton/custom-view.md new file mode 100644 index 00000000..15b81557 --- /dev/null +++ b/controls/skeleton/custom-view.md @@ -0,0 +1,73 @@ +--- +title: Custom View +meta_title: .NET MAUI Skeleton Documentation - Custom View +description: Learn how to apply a custom view to the Telerik .NET MAUI Skeleton control to match your application's design. +position: 2 +tags: .net maui, telerik .net maui, ui for .net maui, shimmer, microsoft .net maui +slug: skeleton-custom-view +--- + +# .NET MAUI Skeleton Custom View + +The Telerik UI for .NET MAUI Skeleton control allows you to create custom skeleton views to match the specific design and layout of your application. + +This is particularly useful when the built-in skeleton types do not fit your requirements. + +## Custom Template + +To create a custom skeleton view, you can define your own layout using XAML or C# and set it to the `LoadingViewTemplate` (`DataTemplate`) property of the `RadSkeleton`. + +Here is an example of how to define a custom loading template as skeleton view: + +1. Define the `RadSkeleton` control: + + + +2. Create a custom loading template and set it to the `RadSkeleton.LoadingViewTemplate` property: + + + +3. Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +This is the result: + +![MAUI Skeleton Custom Template](images/skeleton-custom-template.gif) + +> For a runnable example with the Skeleton Custom Loading Template scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Custom View** category. + +## Custom Drawable + +You can also create a custom drawable object by implementing the `IDrawable` interface. This allows you to have full control over the appearance and behavior of the skeleton view. + +To apply the custom drawable to the `RadSkeleton`, set it to the `LoadingViewDrawable` property. + +Here is an example of how to define a custom drawable object as skeleton view: + +1. Define the `RadSkeleton` control: + + + +2. Create a custom `MyCustomDrawable` class that inherits from the `IDrawable` interface: + + + +3. Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +This is the result: + +![MAUI Skeleton Custom Template](images/skeleton-custom-drawable.gif) + +## See Also + +- [Built-in Views]({%slug skeleton-default-view%}) +- [Configuration]({%slug skeleton-configuration%}) +- [Animation]({%slug skeleton-animation%}) +- [Styling]({%slug skeleton-styling%}) diff --git a/controls/skeleton/default-view.md b/controls/skeleton/default-view.md new file mode 100644 index 00000000..19cf45a7 --- /dev/null +++ b/controls/skeleton/default-view.md @@ -0,0 +1,42 @@ +--- +title: Default Views +meta_title: .NET MAUI Skeleton Documentation - Built-in Views +description: Learn what are the built-in views you can use with the Telerik .NET MAUI Skeleton control. +position: 2 +tags: .net maui, telerik .net maui, ui for .net maui, shimmer, microsoft .net maui +slug: skeleton-default-view +--- + +# .NET MAUI Skeleton Built-in Types (Views) + +The Telerik UI for .NET MAUI Skeleton control comes with a set of built-in views that you can use to quickly create skeleton screens for common UI elements. These built-in views help you to represent the structure and layout of your content while it is being loaded. + +You can change the type of the skeleton loading view by setting the `SkeletonType` (`enum` of type `Telerik.Maui.Controls.Skeleton.SkeletonType`) property. The available built-in types are: + +* `Article`—Displays a skeleton layout suitable for article content, typically showing an image and text lines with varying widths. +* `Text`—Displays a simple text skeleton with horizontal lines representing text content. +* (Default) `PersonaCircle`—Displays a persona skeleton with a circular avatar and text lines, commonly used for user profiles or contacts. +* `PersonaSquare`—Displays a persona skeleton with a square avatar and text lines, an alternative to `PersonaCircle`. +* `Image`—Displays a skeleton for image-based content, showing a placeholder for an image. +* `Video`—Displays a skeleton suitable for video content, showing a large rectangular placeholder. +* `Card`—Displays a card-style skeleton layout with sections for image and text content. +* `ContentFeed`—Displays a content feed skeleton layout, suitable for social media feeds or news lists. + +![Telerik UI for .NET MAUI Skeleton Types](images/skeleton-types.png) + +Below is a quick example showing how to set the `SkeletonType` property to `Article`: + + + +This is the result: + +![Telerik UI for .NET MAUI Skeleton Type Article](images/skeleton-type-article.png) + +> For a runnable example with the Skeleton Built-in Views, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Built-in Views** category. + +## See Also + +- [Configuration]({%slug skeleton-configuration%}) +- [Animation]({%slug skeleton-animation%}) +- [Custom Views]({%slug skeleton-custom-view%}) +- [Styling]({%slug skeleton-styling%}) diff --git a/controls/skeleton/getting-started.md b/controls/skeleton/getting-started.md new file mode 100644 index 00000000..d12b687e --- /dev/null +++ b/controls/skeleton/getting-started.md @@ -0,0 +1,76 @@ +--- +title: Getting Started +page_title: Getting Started with .NET MAUI Skeleton +description: Get started with the Telerik UI for .NET MAUI Skeleton control and add the control to your .NET MAUI project. +position: 1 +slug: skeleton-getting-started +--- + +# Getting Started with the .NET MAUI Skeleton + +This guide provides the information you need to start using the Telerik UI for [.NET MAUI Skeleton]({%slug skeleton-overview%}) by adding the control to your project. + +At the end, you will be able to achieve the following result. + +![Telerik UI for .NET MAUI Skeleton Getting Started example](images/skeleton-getting-started.png) + +## Prerequisites + +Before adding the Skeleton, you need to: + +1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application). + +1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui). + +1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui). + +## Define the Control + +1. When your .NET MAUI application is set up, you are ready to add a Skeleton control to your page: + + + + +2. Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +3. Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project: + +```C# +using Telerik.Maui.Controls.Compatibility; +public static class MauiProgram +{ + public static MauiApp CreateMauiApp() + { + var builder = MauiApp.CreateBuilder(); + builder + .UseTelerik() + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + return builder.Build(); + } +} +``` + +> For a runnable example with the Skeleton Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Getting Started** category. + +## Additional Resources + +- [Built-in Views]({%slug skeleton-default-view%}) +- [Configuration]({%slug skeleton-configuration%}) +- [Animation]({%slug skeleton-animation%}) +- [Custom Views]({%slug skeleton-custom-view%}) +- [Styling]({%slug skeleton-styling%}) + +## See Also + +- [.NET MAUI Skeleton Product Page](https://www.telerik.com/maui-ui/skeleton) +- [.NET MAUI Skeleton Forum Page](https://www.telerik.com/forums/maui?tagId=1764) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) \ No newline at end of file diff --git a/controls/skeleton/images/skeleton-animation-types.gif b/controls/skeleton/images/skeleton-animation-types.gif new file mode 100644 index 00000000..fcda881e Binary files /dev/null and b/controls/skeleton/images/skeleton-animation-types.gif differ diff --git a/controls/skeleton/images/skeleton-custom-drawable.gif b/controls/skeleton/images/skeleton-custom-drawable.gif new file mode 100644 index 00000000..587548b4 Binary files /dev/null and b/controls/skeleton/images/skeleton-custom-drawable.gif differ diff --git a/controls/skeleton/images/skeleton-custom-template.gif b/controls/skeleton/images/skeleton-custom-template.gif new file mode 100644 index 00000000..aa6534c8 Binary files /dev/null and b/controls/skeleton/images/skeleton-custom-template.gif differ diff --git a/controls/skeleton/images/skeleton-getting-started.png b/controls/skeleton/images/skeleton-getting-started.png new file mode 100644 index 00000000..bdb13b5b Binary files /dev/null and b/controls/skeleton/images/skeleton-getting-started.png differ diff --git a/controls/skeleton/images/skeleton-overview.gif b/controls/skeleton/images/skeleton-overview.gif new file mode 100644 index 00000000..e4104a0b Binary files /dev/null and b/controls/skeleton/images/skeleton-overview.gif differ diff --git a/controls/skeleton/images/skeleton-repeat-count.gif b/controls/skeleton/images/skeleton-repeat-count.gif new file mode 100644 index 00000000..05034bf9 Binary files /dev/null and b/controls/skeleton/images/skeleton-repeat-count.gif differ diff --git a/controls/skeleton/images/skeleton-styling.png b/controls/skeleton/images/skeleton-styling.png new file mode 100644 index 00000000..4781abd1 Binary files /dev/null and b/controls/skeleton/images/skeleton-styling.png differ diff --git a/controls/skeleton/images/skeleton-type-article.png b/controls/skeleton/images/skeleton-type-article.png new file mode 100644 index 00000000..66469372 Binary files /dev/null and b/controls/skeleton/images/skeleton-type-article.png differ diff --git a/controls/skeleton/images/skeleton-types.png b/controls/skeleton/images/skeleton-types.png new file mode 100644 index 00000000..1be8dcae Binary files /dev/null and b/controls/skeleton/images/skeleton-types.png differ diff --git a/controls/skeleton/overview.md b/controls/skeleton/overview.md new file mode 100644 index 00000000..ef0631a4 --- /dev/null +++ b/controls/skeleton/overview.md @@ -0,0 +1,37 @@ +--- +title: Overview +meta_title: .NET MAUI Skeleton Documentation - Overview +description: +tags: shimmer for .net maui, .net maui, ui for .net maui, microsoft .net maui +position: 0 +slug: skeleton-overview +--- + +# .NET MAUI Skeleton Overview + +The Telerik UI for .NET MAUI Skeleton control is a UI element that serves as a placeholder while content is being loaded. It provides a visual representation of the layout and structure of the content that will eventually be displayed, helping to improve the user experience during loading times. + +The animation of the skeleton indicates that the content is in the process of loading, which can help to reduce perceived wait times and keep users engaged. In addition, you can use the built-in skeletons and to apply a custom one to match the skeleton's appearance to your application's design. + +![A sample Telerik UI for .NET MAUI Skeleton](images/skeleton-overview.gif) + +## Key Features of the Telerik .NET MAUI Skeleton + +* [Built-in views]({%slug skeleton-default-view%})— The Skeleton control comes with a set of built-in views that you can use to quickly create skeleton screens for common UI elements, such as text, images, and buttons. +* [Width and Height]({%slug skeleton-configuration%}#width-and-height)— You can set minimum width and minimum height to define the size of the Skeleton control according to your layout needs. +* [Repeat Count]({%slug skeleton-configuration%}#repeat-count)— You can set the `RepeatCount` property to specify how many times the skeleton view should be repeated within the control. This is useful for creating lists or grids of skeleton items. +* [Animation]({%slug skeleton-animation%})— The Skeleton control includes built-in animation options that allow you to create a smooth and engaging loading experience for your users. +* [Custom Views]({%slug skeleton-custom-view%}#custom-template)— The Skeleton control allows you to create custom skeleton views using XAML or C#, giving you full control over the appearance and layout of your skeleton screens. +* [Custom Drawable]({%slug skeleton-custom-view%}#custom-drawable)—You can create a custom drawable object by implementing the `IDrawable` interface. This allows you to have full control over the appearance and behavior of the skeleton view. +* [Styling API]({%slug skeleton-styling%})—You can customize the appearance of the Skeleton using the styling API, which allows you to set properties like background color, border color, corner radius, loading view color, and more. + +## Next Steps + +- [Getting Started with the Telerik UI for .NET MAUI Skeleton]({%slug skeleton-getting-started%}) + +## See Also + +- [.NET MAUI Skeleton Product Page](https://www.telerik.com/maui-ui/skeleton) +- [.NET MAUI Skeleton Forum Page](https://www.telerik.com/forums/maui?tagId=1764) +- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui) +- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap) \ No newline at end of file diff --git a/controls/skeleton/styling.md b/controls/skeleton/styling.md new file mode 100644 index 00000000..5e9dbab7 --- /dev/null +++ b/controls/skeleton/styling.md @@ -0,0 +1,53 @@ +--- +title: Styling +meta_title: .NET MAUI Skeleton Documentation - Styling +description: Learn how to style the Telerik .NET MAUI Skeleton control to match your application's design. +position: 2 +tags: .net maui, telerik .net maui, ui for .net maui, shimmer, microsoft .net maui +slug: skeleton-styling +--- + +# .NET MAUI Skeleton Styling + +The Telerik UI for .NET MAUI Skeleton control provides extensive styling options that allow you to customize its visual appearance to match your application's design. + +## Styling Properties + +To style the border around the Skeleton, use the following properties: + +* `Background` (`Brush`)—Specifies the background brush of the control. +* `BorderBrush` (`Brush`)—Specifies the border brush of the control. +* `BorderColor` (`Color`)—Specifies the border color of the control. +* `BorderThickness` (`Thickness`)—Specifies the border thickness of the control. +* `CornerRadius` (`CornerRadius`)—Specifies the corner radius of the control. +* `Padding` (`Thickness`)—Specifies the padding of the control. + +To style the loading view, use the following properties: + +* `LoadingViewColor` (`Color`)—Specifies the base color of the skeleton loading view. + +Here is an example of how to style the Skeleton control in XAML: + +**1.** Define the Skeleton control in XAML: + + + +**2.** Add the `telerik` namespace: + +```XAML +xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" +``` + +This is the result: + +![Telerik UI for .NET MAUI Skeleton Styling](images/skeleton-styling.png) + +> For a runnable example with the Skeleton Styling scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Skeleton > Styling** category. + + +## See Also + +- [Built-in Views]({%slug skeleton-default-view%}) +- [Configuration]({%slug skeleton-configuration%}) +- [Animation]({%slug skeleton-animation%}) +- [Custom Views]({%slug skeleton-custom-view%}) diff --git a/docs-builder.yml b/docs-builder.yml index bd8af89f..0c556561 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -111,6 +111,8 @@ meta: position: 10 controls/slider: title: Slider + controls/skeleton: + title: Skeleton controls/signaturepad: title: SignaturePad controls/sidedrawer: diff --git a/introduction.md b/introduction.md index 0a557559..ea449ab9 100644 --- a/introduction.md +++ b/introduction.md @@ -70,6 +70,7 @@ Telerik UI for .NET MAUI features the following controls for cross-platform deve + @@ -84,9 +85,10 @@ Telerik UI for .NET MAUI features the following controls for cross-platform deve - + + @@ -100,6 +102,7 @@ Telerik UI for .NET MAUI features the following controls for cross-platform deve +