How to provide parallax scrolling support to any custom control using 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:
Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ParallaxSample-1422855791
