Introduction

Supercharge your .NET MAUI projects with Lottie animations! Imagine it as the magic wand for your app's visuals. Thanks to Adobe After Effects, Lottie speaks a special language called JSON, making animations a breeze. Meet SkiaSharp, a Microsoft buddy that helps Lottie shine in .NET MAUI, making your app look cool without the complexity. Learn the ropes in our beginner-friendly guide! Add a dash of Lottie, sprinkle in some JSON magic, and watch your app come to life!

Top advantages of Lottie Animations:

• Vector-based Adaptability: Lottie animations, being vector-based, ensure seamless scalability without compromising resolution.
• Reduced File Size: Compared to formats like GIF or MP4, Lottie files boast significantly smaller sizes while maintaining top-notch quality.

Quick Links:

• Project Setup
• Install Plugin
• Implementation
• Demo
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Install Plugin:

• Library Requirement: SkiaSharp library is essential for displaying Lottie animations.
• Installation via NuGet: Obtain the SkiaSharp library by searching for "SkiaSharp.Extended.UI.Maui" in the NuGet Package Manager.
• Enable Prerelease: Ensure the "Include prerelease" flag is enabled during installation, as MAUI support is currently in prerelease.
• User Interface Guidance: Open the NuGet Package Manager interface to facilitate the installation process.
• Visual Confirmation: The library, once searched, should appear as "SkiaSharp.Extended.UI.Maui" in the NuGet interface.

Implementation

• First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Lottie Animations.

  using SkiaSharp.Views.Maui.Controls.Hosting;

  .UseSkiaSharp()

• Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you)

  xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"

• Unlocking the magic of Lottie animations in your .NET MAUI app is a breeze! If you have JSON files, just add them to the Resources\Raw subfolder. For web-hosted animations, effortlessly consume them by passing the URI to the Lottie view. Explore the treasure trove of free and paid animations on Lottiefiles.com, a popular source for dynamic visuals. In our example, we'll use a JSON animation from the Lottie library repository, already included in the code for your convenience. Feel free to switch it up with your preferred animation!
• We need to add the animation to the Raw folder: Go to Resources ➡ Raw ➡ Right click add ➡ Existing files ➡ animation.json (walking_batman.json in my sample).

<skia:SKLottieView RepeatCount="-1"
                           RepeatMode="Reverse"
                           Source="walking_batman.json" 
                           HeightRequest="400"
                           WidthRequest="400" />

• <skia:SKLottieView>: This is the declaration of the SKLottieView, a specialized view for rendering Lottie animations using the SkiaSharp library.
• RepeatCount="-1": The RepeatCount attribute determines how many times the animation should repeat. A value of -1 means it will repeat indefinitely.
• RepeatMode="Reverse": The RepeatMode attribute sets the behavior of the animation when it repeats. In this case, "Reverse" means the animation will play in reverse each time it repeats.
• Source="walking_batman.json": Specifies the source of the Lottie animation. In this example, the animation is loaded from a file named "Girl.json" located in the project.
• HeightRequest="400" and WidthRequest="400": These attributes set the desired height and width of the SKLottieView, in this case, both set to 400. This property is very important to visualize Lottie animation.

This code essentially integrates a Lottie animation (from the "walking_batman.json" file) into your Xamarin.Forms application, configuring its repeat behavior and dimensions. Adjust these attributes based on your specific animation and layout requirements.

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

Introduction

Our phones and computers are like magic doors to the world, thanks to the apps we use every day. These apps show us stuff using a mix of words, pictures, and special links that let us explore more. 🌐 Links, especially, make it easy for us to dive deep into things. In this guide, we'll learn how to add these special links to your .NET MAUI apps, making it more fun for people to check out what you have to share. Join us on this enlightening journey as we unravel the secrets of Transforming Labels into Hyperlinks with .NET MAUI.

Quick Links:

• Project Setup
• Implementation
• Demo
• Full Code
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Implementation

• In this step, we'll include two labels within the horizontal layout to position them closely to each other.
• The first text will serve as regular text, representing the standard label.
• The second text will function as a hyperlink, characterized by blue text color and underlined as text decoration.
• The following code snippet will help in grasping the concept more clearly.

<HorizontalStackLayout>
	<Label
		Text="To know more about .NET MAUI "
		SemanticProperties.HeadingLevel="Level1"
		FontSize="Default"
		HorizontalOptions="Center" />

	<Label
		Text="Visit Here"
		TextDecorations="Underline"
		TextColor="Blue"
		SemanticProperties.HeadingLevel="Level1"
		FontSize="Default"
		HorizontalOptions="Center" >
		<Label.GestureRecognizers>
			<TapGestureRecognizer Tapped="OnUrlClicked"/>
		</Label.GestureRecognizers>
	</Label>
</HorizontalStackLayout>

• Incorporate the tap gesture event "OnUrlClicked" to open the specified URL link, as demonstrated below.

  private async void OnUrlClicked(object sender, TappedEventArgs e)
  {
  	await Launcher.OpenAsync("https://www.androidmads.info/search/label/.net%20maui");
  }

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

Introduction

.NET MAUI, a cross-platform framework, empowers developers to build native mobile and desktop applications using C# and XAML. It enables the creation of apps that seamlessly operate on Android, iOS, macOS, and Windows, all from a unified codebase. This open-source platform is an advancement of Xamarin Forms, expanding its reach to desktop scenarios while enhancing UI controls for improved performance and extensibility.

In this article, we will see how to use SwipeView in .NET MAUI project. SwipeView is a container control that wraps around an item of content, and provides context menu items that are revealed by a swipe gesture.

Quick Links:

• Project Setup
• Implementation
• Demo
• Full Code
• Download Code

Project Setup:

• Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  
• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  
• In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  
• In the Additional information window, click the Create button:
  
• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app
  

Implementation

SwipeView defines the following attributes:

• LeftItems: This property, of type SwipeItems, represents the swipe items accessible when swiping the control from the left side.
• RightItems: This property, of type SwipeItems, represents the swipe items accessible when swiping the control from the right side.
• TopItems: This property, of type SwipeItems, represents the swipe items accessible when swiping the control from top to bottom.
• BottomItems: This property, of type SwipeItems, represents the swipe items accessible when swiping the control from bottom to top.
• Threshold: This property, of type double, determines the number of device-independent units required to trigger a swipe gesture and fully reveal swipe items.

The SwipeView class additionally introduces three events:

• SwipeStarted: This event is triggered when a swipe commences. It is accompanied by a SwipeStartedEventArgs object that includes a property named SwipeDirection of type SwipeDirection.
• SwipeChanging: Raised during the progression of a swipe, the SwipeChanging event provides a SwipeChangingEventArgs object. This object encompasses a SwipeDirection property of type SwipeDirection and an Offset property of type double.
• SwipeEnded: When a swipe concludes, the SwipeEnded event is raised. Its accompanying SwipeEndedEventArgs object contains a SwipeDirection property of type SwipeDirection and an IsOpen property of type bool.

Here's an example demonstrating how to create a SwipeView in XAML.

<SwipeView>
	<SwipeView.LeftItems>
		<SwipeItems>
			<SwipeItem Text="Favorite"
					   IconImageSource="heart.png"
					   BackgroundColor="LightGreen"
					   Invoked="OnFavoriteSwipeItemInvoked" />
		</SwipeItems>
	</SwipeView.LeftItems>
	<SwipeView.RightItems>
		<SwipeItems>
			<SwipeItem Text="Delete"
					   IconImageSource="delete.png"
					   BackgroundColor="LightPink"
					   Invoked="OnDeleteSwipeItemInvoked" />
		</SwipeItems>
	</SwipeView.RightItems>
	<!-- Content -->
	<Grid BackgroundColor="LightGray">
		<Label Text="Swipe Right or Left"
			   HorizontalOptions="Center"
			   VerticalOptions="Center" />
	</Grid>
</SwipeView>

In this example, we will use the listview to display the swipe view and the full example below

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSwipeView.MainPage">

    <ListView x:Name="list">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <SwipeView>
                        <SwipeView.LeftItems>
                            <SwipeItems>
                                <SwipeItem Text="Favorite"
										   IconImageSource="heart.png"
										   BackgroundColor="LightGreen"
										   Invoked="OnFavoriteSwipeItemInvoked" />
                            </SwipeItems>
                        </SwipeView.LeftItems>
                        <SwipeView.RightItems>
                            <SwipeItems>
                                <SwipeItem Text="Delete"
										   IconImageSource="delete.png"
										   BackgroundColor="LightPink"
										   Invoked="OnDeleteSwipeItemInvoked" />
                            </SwipeItems>
                        </SwipeView.RightItems>
                        <!-- Content -->
                        <Grid BackgroundColor="LightGray">
                            <Label Text="Swipe Right or Left"
								   HorizontalOptions="Center"
								   VerticalOptions="Center" />
                        </Grid>
                    </SwipeView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</ContentPage>

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Tweet

References

To learn more about Swipe View