Getting Started with .NET MAUI Parallax View (SfParallaxView)

14 Jul 202612 minutes to read

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

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

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio 2022 v17.12 or later.

Step 1: Create a new .NET MAUI project

  1. Go to File > New > Project and choose the .NET MAUI App template.
  2. Name the project and choose a location. Then, click Next.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI ParallaxView NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.ParallaxView and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio Code.
  3. Ensure that the .NET MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Open the Command Palette by pressing Ctrl+Shift+P and type .NET:New Project and press Enter.
  2. Choose the .NET MAUI App template.
  3. Select the project location, type the project name and press Enter.
  4. Then choose Create project

Step 2: Install the Syncfusion® MAUI ParallaxView NuGet package

  1. Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code.
  2. Ensure you’re in the project root directory where your .csproj file is located.
  3. Run the command dotnet add package Syncfusion.Maui.ParallaxView to install the Syncfusion® .NET MAUI ParallaxView package.
  4. To ensure all dependencies are installed, run dotnet restore.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with JetBrains Rider 2024.3 or later.
  3. Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Go to File > New Solution, Select .NET (C#) and choose the .NET MAUI App template.
  2. Enter the Project Name, Solution Name, and Location.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI ParallaxView NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.ParallaxView and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: dotnet restore

Step 3: Register Syncfusion handler

Make sure to add the namespace.

using Syncfusion.Maui.Core.Hosting;

Register the Syncfusion core handler in your CreateMauiApp method of MauiProgram.cs file to use Syncfusion controls.

builder.ConfigureSyncfusionCore();

Step 4: Initialize the view model

Now let us define simple data model and view model.

public class Contacts
{
    public string Name { get; set; }
    public string Author { get; set; }
    public ImageSource ItemImage { get; set; }
}

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"},
            .....
        };
        for (int i = 0; i < Items.Count; i++)
        {
            Items[i].ItemImage = ImageSource.FromResource("ParallaxViewGettingStarted.parallax" + i + ".png", assembly);
        }
    }
}

Step 4: Import the Parallax View namespace

Add the following namespace in your XAML or C#.

xmlns:parallaxView="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView"
using Syncfusion.Maui.ParallaxView;

Step 5: Add a parallax view component

Initialize the SfParallaxView control and add the Content, it represents the background view of a parallax view. Set any kind of view to the Content property, such as Image and StackLayout.

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.

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

<Grid>
    <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" >
        <parallax:SfParallaxView.Content>
            <Image BackgroundColor="Transparent" Source="{Binding Image}" Aspect="AspectFill" />
        </parallax:SfParallaxView.Content>
    </parallax:SfParallaxView> 
        <list:SfListView x:Name="listview" ItemsSource="{Binding Items}">
            <list:SfListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.5*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image BackgroundColor="Transparent" Source="{Binding ItemImage}" Grid.Column="0" Aspect="AspectFit" />
                            <StackLayout BackgroundColor="Transparent" Grid.Column="1">
                                <Label TextColor="White" Text="{Binding Name}"/>
                                <Label Text="{Binding Author}" TextColor="White"/>
                            </StackLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </list:SfListView.ItemTemplate>
        </list:SfListView>
</Grid>
var listView = new SfListView
{
    ItemsSource = new Binding("Items")
};

listView.ItemTemplate = new DataTemplate(() =>
{
    var grid = new Grid();

    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(0.5, GridUnitType.Star) });
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

    var image = new Image
    {
        BackgroundColor = Colors.Transparent,
        Aspect = Aspect.AspectFit
    };
    image.SetBinding(Image.SourceProperty, "ItemImage");

    var nameLabel = new Label
    {
        TextColor = Colors.White,
    };
    nameLabel.SetBinding(Label.TextProperty, "Name");

    var authorLabel = new Label
    {
        TextColor = Colors.White,
    };
    authorLabel.SetBinding(Label.TextProperty, "Author");

    var stackLayout = new StackLayout
    {
        BackgroundColor = Colors.Transparent,
        Children = { nameLabel, authorLabel }
    };

    grid.Add(image, 0, 0);
    grid.Add(stackLayout, 1, 0);

    return new ViewCell
    {
        View = grid
    };
});

    var parallaxView = new SfParallaxView
    {
        Source = listView // link with ListView
    };

    var headerImage = new Image
    {
        BackgroundColor = Colors.Transparent,
        Aspect = Aspect.AspectFill
    };
    headerImage.SetBinding(Image.SourceProperty, "Image");

    parallaxView.Content = headerImage;
    var rootGrid = new Grid();
    rootGrid.Children.Add(parallaxView);
    rootGrid.Children.Add(listView);

TIPS

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

Syncfusion .NET MAUI Parallax View

You can download the Parallax View Getting Started sample from GitHub.

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 degradation in image quality.