Getting Started with .NET MAUI Parallax View (SfParallaxView)

30 Oct 202415 minutes to read

This section explains the steps required to configure the SfParallaxView control and add basic elements to it using various APIs.

Creating an application using .NET MAUI Parallax View

  1. Create a new .NET MAUI application in Visual studio.
  2. Syncfusion .NET MAUI components are available in nuget.org. To add SfParallaxView to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.ParallaxView and then install it.
  3. To initialize the control, import the Parallax View namespace.
  4. Initialize SfParallaxView.
<ContentPage
    . . .    
    xmlns:parallaxView="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView">
    <Grid>
        <parallaxView:SfParallaxView/>
    </Grid>
</ContentPage>
using Syncfusion.Maui.ParallaxView;
namespace ParallaxViewGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();  
            Grid grid = new Grid();         
            SfParallaxView parallaxView = new SfParallaxView(); 
            grid.Children.Add(parallaxView);
            this.Content = grid;
        }
    }   
}

Register the handler

Syncfusion.Maui.Core Nuget is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core.

  • C#
    • using Microsoft.Extensions.Logging;
using Syncfusion.Maui.Core.Hosting;

namespace ParallaxViewGettingStarted
{
    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();
        }
    }
}

    Add content to the parallax view

    The Content represents the background view of a parallax view. Set any kind of view to the Content property, such as Image and StackLayout.

    The following code sample demonstrates how to set the content property to the parallax view.

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ParallaxViewGettingStarted"
    xmlns:parallax="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView"
    x:Class="ParallaxViewGettingStarted.MainPage">
      
    <ContentPage.Content>
        <Grid>            
            <parallax:SfParallaxView x:Name="parallaxview">
                <parallax:SfParallaxView.Content>
                    <Image Source="{Binding Image}" BackgroundColor="Transparent" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
                </parallax:SfParallaxView.Content>
            </parallax:SfParallaxView>       
        </Grid>
    </ContentPage.Content>
	
</ContentPage>
    using Syncfusion.Maui.ParallaxView;

namespace ParallaxViewGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new ParallaxViewModel();
        }
    }

    public class ParallaxViewModel
    {
        public ImageSource Image { get; set; }

        public ParallaxViewModel()
        {
            Image = ImageSource.FromResource("ParallaxViewGettingStarted.parallax.jpg", typeof(MainPage).GetTypeInfo().Assembly);
        }
    }  
}

    Bind source to the parallax view

    The Source represents the foreground view of the parallax view. The value of the Source should be a scrollable content or the view which implements the IParallaxView interface.

    Currently, the SfParallaxView directly supports the following controls. Bind the control to the Source property.

    1. ScrollView
2. Syncfusion ListView

    The following code sample demonstrates how to bind the Syncfusion ListView to the Source property.

    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ParallaxViewGettingStarted"
    xmlns:parallax="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView"
    xmlns:list="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
    x:Class="ParallaxViewGettingStarted.MainPage">
      
    <ContentPage.Content>
        <Grid>
            <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" >
                <parallax:SfParallaxView.Content>
                    <Image BackgroundColor="Transparent" Source="{Binding Image}" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
                </parallax:SfParallaxView.Content>
            </parallax:SfParallaxView>
     
            <list:SfListView x:Name="listview" ItemsSource="{Binding Items}" BackgroundColor="Transparent" ItemSize="100">
                <list:SfListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.5*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image BackgroundColor="Transparent" HeightRequest="90" HorizontalOptions="CenterAndExpand" 
                                       WidthRequest="90" Source="{Binding ItemImage}" Grid.Column="0" VerticalOptions="CenterAndExpand" Aspect="AspectFit" />
                                <StackLayout BackgroundColor="Transparent" Grid.Column="1" VerticalOptions="CenterAndExpand" 
                                             HorizontalOptions="FillAndExpand" Orientation="Vertical">
                                    <Label HorizontalOptions="FillAndExpand" TextColor="White" Text="{Binding Name}"/>
                                    <Label HorizontalOptions="FillAndExpand" Text="{Binding Author}" TextColor="White"/>
                                </StackLayout>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </list:SfListView.ItemTemplate>
            </list:SfListView>
        </Grid>
    </ContentPage.Content>
	
</ContentPage>
    public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new ParallaxViewModel();
    }
}

public class ParallaxViewModel
{
    public ImageSource Image { get; set; }
    public ObservableCollection<Contacts> Items { get; set; }

    public ParallaxViewModel()
    {
        Assembly assembly = typeof(ParallaxViewModel).GetTypeInfo().Assembly;
        Image = ImageSource.FromResource("ParallaxViewGettingStarted.parallax.jpg", assembly);
        Items = new ObservableCollection<Contacts>()
        {
            new Contacts() { Name = "Thriller", Author = "Michael Jackson" },
            new Contacts() { Name = "Like a Prayer", Author = "Madonna" },
            new Contacts() { Name = "When Doves Cry", Author = "Prince" },
            new Contacts() { Name = "I Wanna Dance", Author = "Whitney Houston" },
            new Contacts() { Name = "It’s Gonna Be Me", Author = "N Sync"},
            new Contacts() { Name = "Everybody", Author = "Backstreet Boys"},
            new Contacts() { Name = "Rolling in the Deep", Author = "Adele" },
            new Contacts() { Name = "Don’t Stop Believing", Author = "Journey" },
            new Contacts() { Name = "Billie Jean", Author = "Michael Jackson" },             
            new Contacts() { Name = "Firework", Author = "Katy Perry"},               
            new Contacts() { Name = "Thriller", Author = "Michael Jackson" },
            new Contacts() { Name = "Like a Prayer", Author = "Madonna" },
            new Contacts() { Name = "When Doves Cry", Author = "Prince" },
            new Contacts() { Name = "I Wanna Dance", Author = "Whitney Houston" },
            new Contacts() { Name = "It’s Gonna Be Me", Author = "N Sync" },
            new Contacts() { Name = "Everybody", Author = "Backstreet Boys" },
            new Contacts() { Name = "Rolling in the Deep", Author = "Adele" },
            new Contacts() { Name = "Don’t Stop Believing", Author = "Journey"},
        };

        for (int i = 0; i < Items.Count; i++)
        {
            Items[i].ItemImage = ImageSource.FromResource("ParallaxViewGettingStarted.parallax" + i + ".png", assembly);
        }
    }
}

public class Contacts
{
    public string Name { get; set; }

    public string Author { get; set; }

    public ImageSource ItemImage { get; set; }
}

    TIPS

    The size of the Content view will automatically be stretched to the size of the Source view.

    Output of Parallax View

    You can find the complete getting started sample from this link.

    NOTE

    #11230 In Android, when an image’s pixel size cannot stretch to fit the Parallax View Source control during loading, it results in a Java.Lang.RuntimeException. It is necessary to use the image as Parallax View Content without pixelation.