Customization in Xamarin Parallax View

8 Jan 20255 minutes to read

Speed Customization

The Speed value denotes the scrolling speed of the Content added as a background view. Based on the speed value, the background view will scroll along with the foreground view.

XAML

<parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" Speed="0.5" >
            <parallax:SfParallaxView.Content>
                <Image BackgroundColor="Transparent" Source="{Binding Image}" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
            </parallax:SfParallaxView.Content>
     </parallax:SfParallaxView>

C#

using Syncfusion.XForms.ParallaxView;
using Syncfusion.ListView.XForms;

namespace ParallaxView_GettingStarted
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            InitializeComponent();
            ParallaxViewModel view = new ParallaxViewModel();
            BindingContext = view;
            SfParallaxView parallax = new SfParallaxView();
            SfListView listview = new SfListView();
            Image image = new Image();
            Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
            image.Source = ImageSource.FromResource("ParallaxView_GettingStarted.Images.ParallaxWallpaper.png", assembly);
            parallax.Content = image;
            parallax.Speed = 0.5;
            listview.ItemsSource = view.Items;
            parallax.Source = listview;
        }
    }
}

Orientation

The orientation of the content scrolling can be customized to vertical or horizontal using the value of Orientation property.

XAML

<Grid>
          <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" Orientation="Horizontal" >
            <parallax:SfParallaxView.Content>
               
                . . .

            </parallax:SfParallaxView.Content>
          </parallax:SfParallaxView>
     
        <list:SfListView x:Name="listview" Orientation="Horizontal" ItemsSource="{Binding Items}" BackgroundColor="Transparent" ItemSize="100">
               
                    . . .

        </list:SfListView>
        </Grid>

C#

using Syncfusion.XForms.ParallaxView;
using Syncfusion.ListView.XForms;

namespace ParallaxView_GettingStarted
{
    public partial class MainPage : ContentPage
    {

        public MainPage()
        {
            InitializeComponent();
            ParallaxViewModel view = new ParallaxViewModel();
            BindingContext = view;
            SfParallaxView parallax = new SfParallaxView();
            SfListView listview = new SfListView();
            Image image = new Image();
            Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
            image.Source = ImageSource.FromResource("ParallaxView_GettingStarted.Images.ParallaxWallpaper.png", assembly);
            parallax.Content = image;
            parallax.Speed = 0.5;
            parallax.Orientation = Syncfusion.XForms.ParallaxView.Orientation.Horizontal;
            listview.ItemsSource = view.Items;
            parallax.Source = listview;
        }
    }
}

See also

How to provide parallax scrolling support to any custom control using SfParallaxView