diff --git a/README.md b/README.md index 94b4f92..05a2f3c 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,242 @@ -# MAUI-Parallax-View-Sample-Demos -These samples demonstrates the MAUI Parallax View Demos. +# Getting Started with .NET MAUI Parallax View (SfParallaxView) + +This section explains the steps required to configure the [`SfParallaxView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html) 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](https://www.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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html). + +###### Xaml +```xaml + + + + + +``` + +###### C# +```C# +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() + .ConfigureSyncfusionCore() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + return builder.Build(); + } + } +} +``` + +## Add content to the parallax view + +The [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Content) represents the background view of a parallax view. Set any kind of view to the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Content) property, such as Image and StackLayout. + +The following code sample demonstrates how to set the content property to the parallax view. + +###### Xaml +```xaml + + + + + + + + + + + + + +``` + +###### C# +```C# +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`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Source) represents the foreground view of the parallax view. The value of the [`Source`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Source) should be a scrollable content or the view which implements the [IParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html) interface. + +Currently, the [SfParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html) directly supports the following controls. Bind the control to the [`Source`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Source) property. + + 1. ScrollView + 2. Syncfusion ListView + +The following code sample demonstrates how to bind the Syncfusion ListView to the [`Source`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Source) property. + +###### Xaml +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +###### C# +```C# +public partial class MainPage : ContentPage +{ + public MainPage() + { + InitializeComponent(); + BindingContext = new ParallaxViewModel(); + } +} + +public class ParallaxViewModel +{ + public ImageSource Image { get; set; } + public ObservableCollection Items { get; set; } + + public ParallaxViewModel() + { + Assembly assembly = typeof(ParallaxViewModel).GetTypeInfo().Assembly; + Image = ImageSource.FromResource("ParallaxViewGettingStarted.parallax.jpg", assembly); + Items = new ObservableCollection() + { + 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; } +} +``` + +T> The size of the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Content) view will automatically be stretched to the size of the [`Source`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Source) view. + +![Output of Parallax View](ParallaxView_Images/maui_parallaxview.gif)