Getting Started with .NET MAUI Effects View (SfEffectsView)

1 Feb 20242 minutes to read

This section explains the steps required to configure the .NET MAUI Effects View control and customize its elements.

To get start quickly with our .NET MAUI Effects View, you can check the below video.

Adding a SfEffectsView reference

Syncfusion .NET MAUI controls are available in Nuget.org. To add SfEffectsView to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Core and then install it.

Handler registration

In the MauiProgram.cs file, register the handler for Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace EffectsViewMauiSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
		.UseMauiApp<App>()
		.ConfigureSyncfusionCore()
		.ConfigureFonts(fonts =>
		{
			fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		});
		return builder.Build();
	}  
  }
}

Create a simple Effects View

This section explains how to create a Effects View and configure it. The control can be configured entirely in C# code or by the XAML markup.

Adding a SfEffectsView control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

xmlns:effectsView="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"

C#

using Syncfusion.Maui.Core;

Step 3: Set the control to content in ContentPage.

XAML

<ContentPage.Content> 
	 <effectsView:SfEffectsView /> 
</ContentPage.Content>

C#

using Syncfusion.Maui.Core;

namespace EffectsViewMauiSample   
{  
	public partial class MainPage : ContentPage                  
	{ 
	    SfEffectsView effectsView;

		public MainPage()   
		{   
			InitializeComponent();       
			effectsView = new SfEffectsView(); 
			this.Content = effectsView;  
		}  
	}  
}

NOTE

You can refer to our .NET MAUI Effects View feature tour page for its groundbreaking feature representations. You can also explore our .NET MAUI Effects View Example that shows you how to render the Effects View in .NET MAUI.