Getting Started with .NET MAUI Effects View (SfEffectsView)

30 Jun 20222 minutes to read

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

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.

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

    Step 3: Set the control to content in ContentPage.

    <ContentPage.Content> 
    	 <effectsView:SfEffectsView /> 
    </ContentPage.Content>
    using Syncfusion.Maui.Core;
    
    namespace EffectsViewMauiSample   
    {  
    	public partial class MainPage : ContentPage                  
    	{ 
    	    SfEffectsView effectsView;
    
    		public MainPage()   
    		{   
    			InitializeComponent();       
    			effectsView = new SfEffectsView(); 
    			this.Content = effectsView;  
    		}  
    	}  
    }

    Effects View Initialization