We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfParallaxView

This section explains how to provide scrolling support to any custom control using SfParallaxView.

 Create SfParallaxView sample with all necessary assemblies.

Please refer the below link to create a simple SfParallaxView sample along with the ways to configure it.

https://help.syncfusion.com/xamarin/sfparallaxview/gettingstarted

 

Step 1: Bind any custom control (For example: In this section we have bounded a control which is derived from Xamarin.Forms ListView) to SfParallaxView source property.By default Xamarin.Forms ListView do not have any build-in support to get total scrollable content size and scrolling events. It is mandatory to extends custom control from IParallaxView interface to support parallax scrolling. 

C# :

public class CustomListView : ListView , IParallaxView
    {
        private Size scrollHeight;
        public Size ScrollableContentSize {
            get {
                return this.scrollHeight;
            }
            set {
                this.scrollHeight = value;
                OnPropertyChanged("ScrollableContentSize");
            }
        }
 
        public event EventHandler<ParallaxScrollingEventArgs> Scrolling;
                    . . .
    }

 

Xaml :

 

            <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" Orientation="Vertical" >
 
                             . . .
 
          </parallax:SfParallaxView>
 
            <local:CustomListView x:Name="listview" ItemsSource="{Binding Items}" RowHeight="150" BackgroundColor="Transparent" >
                <local:CustomListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                
                                  . . .
 
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </local:CustomListView.ItemTemplate>
            </local:CustomListView>

 

Step 2: To enable the parallax scrolling, you need to calculate the scrollable content size of the custom control in all platform specific projects.

Forms.Android :

internal class ParallaxViewListViewRenderer : ListViewRenderer
{
         . . .
    CustomListView listViewElement;            
 
private void GetListViewScrollableHeight(NativeAndroid.Widget.ListView listView)
        {
                   . . .
 
           float scrollableHeight = height / density;
             (listViewElement as CustomListView).ScrollableContentSize = new Size(0, scrollableHeight); // since listview supports only vertical orientation, it is enough to calculate the total scrollable height.        
                   . . .
        }
}

 

Forms.iOS :

internal class ParallaxViewListViewRenderer : ListViewRenderer
{
         . . .
 
    CustomListView listViewElement;              
 
    private void GetListViewScrollableHeight()
        {
            if (listViewElement != null)
            {
 
                               . . .
 
                 scrollableHeight = (float)Control.ContentSize.Height;
                listViewElement.ScrollableContentSize = new Size(0, scrollableHeight);
 
                                . . .
 
            }
        }
}

 

Forms.UWP :

internal class ParallaxViewListViewRenderer : ListViewRenderer
{
         . . .
 
    CustomListView listViewElement;              
 
    private void GetListViewScrollableHeight(Xaml.Controls.ListViewBase sender, Xaml.Controls.ContainerContentChangingEventArgs args)
        {
            if (scrollViewer != null)
            {
                         . . .
 
                var scrollableHeight = (float)(_scrollViewer as WindowsScrollViewer).ExtentHeight;
                
                         . . .
           
                listViewElement.ScrollableContentSize = new Size(0, scrollableHeight);
            }
        } 
}

 

The calculated scrollable height value must be assigned to ScrollableContentSize of the custom control (CustomListView).

 

Step 3: You need to calculate and bind the custom control scroll X and Y cordinates to Parallax View control.

 

 
public class CustomListView : ListView , IParallaxView
    {
                  . . .
 
private void CustomListView_CustomListViewScrolling(object sender, ListViewScrollingEventArgs e)
        {
            OnScrollChanged(new ParallaxScrollingEventArgs(e.ScrollX, e.ScrollY, false));
        }
             . . .
    }

 

Screenshot:

 

Parallax scrolling for custom control using xamarin SfParallaxView

 

Sample Link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ParallaxSample-1422855791

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile