Skip to content
Draft
Show file tree
Hide file tree
Changes from all 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
16 changes: 16 additions & 0 deletions controls/skeleton/animation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
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


## See Also

- [Built-in Views]({%slug skeleton-default-view%})
- [Custom Views]({%slug skeleton-custom-view%})
16 changes: 16 additions & 0 deletions controls/skeleton/custom-view.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
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


## See Also

- [Built-in Views]({%slug skeleton-default-view%})
- [Animation]({%slug skeleton-animation%})
16 changes: 16 additions & 0 deletions controls/skeleton/default-view.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
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 Views


## See Also

- [Animation]({%slug skeleton-animation%})
- [Custom Views]({%slug skeleton-custom-view%})
73 changes: 73 additions & 0 deletions controls/skeleton/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
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:

<snippet id='skeleton-getting-started-xaml' />

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<App>()
.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%})
- [Animation]({%slug skeleton-animation%})
- [Custom Views]({%slug skeleton-custom-view%})

## 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)
33 changes: 33 additions & 0 deletions controls/skeleton/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
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.png "Telerik .NET MAUI Skeleton")

## Key Features of the Telerik .NET MAUI Skeleton

* [Built-in views]({%slug skeleton-default-view%})&mdash; 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.
* [Animation]({%slug skeleton-animation%})&mdash; 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%})&mdash; 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.

## 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)