From 0d2336335c851bc8faa3ee7f99d39742360a3f58 Mon Sep 17 00:00:00 2001
From: snehakPV <129383872+snehakPV@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:53:53 +0530
Subject: [PATCH 1/2] Updated Read me file

---
 README.md | 263 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 261 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 94b4f92..4bdaf92 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,261 @@
-# 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).
+
+{% tabs %} 
+
+{% highlight xaml %}
+
+<ContentPage
+    . . .    
+    xmlns:parallaxView="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView">
+    <Grid>
+        <parallaxView:SfParallaxView/>
+    </Grid>
+</ContentPage>
+ 
+{% endhighlight %}
+
+{% highlight 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;
+        }
+    }   
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## 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.
+
+{% highlight 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<App>()
+            .ConfigureSyncfusionCore()
+            .ConfigureFonts(fonts =>
+            {
+                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+            });
+
+            return builder.Build();
+        }
+    }
+}
+
+{% endhighlight %}
+
+
+## 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.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:ParallaxViewGettingStarted"
+    xmlns:parallax="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView"
+    x:Class="ParallaxViewGettingStarted.MainPage">
+      
+    <ContentPage.Content>
+        <Grid>            
+            <parallax:SfParallaxView x:Name="parallaxview">
+                <parallax:SfParallaxView.Content>
+                    <Image Source="{Binding Image}" BackgroundColor="Transparent" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
+                </parallax:SfParallaxView.Content>
+            </parallax:SfParallaxView>       
+        </Grid>
+    </ContentPage.Content>
+	
+</ContentPage>
+
+{% endhighlight %}
+
+{% highlight 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);
+        }
+    }  
+}  
+
+{% endhighlight %}
+{% endtabs %}
+
+## 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.
+
+{% tabs %}
+
+{% highlight xaml %}
+
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:ParallaxViewGettingStarted"
+    xmlns:parallax="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView"
+    xmlns:list="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
+    x:Class="ParallaxViewGettingStarted.MainPage">
+      
+    <ContentPage.Content>
+        <Grid>
+            <parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" >
+                <parallax:SfParallaxView.Content>
+                <Image BackgroundColor="Transparent" Source="{Binding Image}" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
+                </parallax:SfParallaxView.Content>
+            </parallax:SfParallaxView>
+     
+            <list:SfListView x:Name="listview" ItemsSource="{Binding Items}" BackgroundColor="Transparent" ItemSize="100">
+                <list:SfListView.ItemTemplate>
+                    <DataTemplate>
+                        <ViewCell>
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="0.5*" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+                                <Image BackgroundColor="Transparent" HeightRequest="90" HorizontalOptions="CenterAndExpand" 
+                                    WidthRequest="90" Source="{Binding ItemImage}" Grid.Column="0" VerticalOptions="CenterAndExpand" Aspect="AspectFit" />
+                                <StackLayout BackgroundColor="Transparent" Grid.Column="1" VerticalOptions="CenterAndExpand" 
+                                    HorizontalOptions="FillAndExpand" Orientation="Vertical">
+                                    <Label HorizontalOptions="FillAndExpand" TextColor="White" Text="{Binding Name}"/>
+                                    <Label HorizontalOptions="FillAndExpand" Text="{Binding Author}" TextColor="White"/>
+                                </StackLayout>
+                            </Grid>
+                        </ViewCell>
+                    </DataTemplate>
+                </list:SfListView.ItemTemplate>
+            </list:SfListView>
+        </Grid>
+    </ContentPage.Content>
+	
+</ContentPage>
+
+{% endhighlight %}
+
+{% highlight c# %}
+
+public partial class MainPage : ContentPage
+{
+    public MainPage()
+    {
+        InitializeComponent();
+        BindingContext = new ParallaxViewModel();
+    }
+}
+
+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"},
+            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; }
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+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)

From ebf6f73602fff3496a448c0c900dad4987a3f1c4 Mon Sep 17 00:00:00 2001
From: snehakPV <129383872+snehakPV@users.noreply.github.com>
Date: Mon, 18 Mar 2024 12:24:31 +0530
Subject: [PATCH 2/2] Update README.md

---
 README.md | 61 +++++++++++++++++++------------------------------------
 1 file changed, 21 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 4bdaf92..05a2f3c 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,8 @@ This section explains the steps required to configure the [`SfParallaxView`](htt
 3. To initialize the control, import the Parallax View namespace.
 4. Initialize [SfParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html).
 
-{% tabs %} 
-
-{% highlight xaml %}
-
+###### Xaml
+```xaml
 <ContentPage
     . . .    
     xmlns:parallaxView="clr-namespace:Syncfusion.Maui.ParallaxView;assembly=Syncfusion.Maui.ParallaxView">
@@ -20,11 +18,10 @@ This section explains the steps required to configure the [`SfParallaxView`](htt
         <parallaxView:SfParallaxView/>
     </Grid>
 </ContentPage>
- 
-{% endhighlight %}
-
-{% highlight C# %}
+```
 
+###### C#
+```C#
 using Syncfusion.Maui.ParallaxView;
 namespace ParallaxViewGettingStarted
 {
@@ -40,17 +37,14 @@ namespace ParallaxViewGettingStarted
         }
     }   
 }
-
-{% endhighlight %}
-
-{% endtabs %}
+```
 
 ## 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.
 
-{% highlight C# %}
-
+######
+```C#
 using Microsoft.Extensions.Logging;
 using Syncfusion.Maui.Core.Hosting;
 
@@ -73,9 +67,7 @@ namespace ParallaxViewGettingStarted
         }
     }
 }
-
-{% endhighlight %}
-
+```
 
 ## Add content to the parallax view
 
@@ -83,10 +75,8 @@ The [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView
 
 The following code sample demonstrates how to set the content property to the parallax view.
 
-{% tabs %}
-
-{% highlight xaml %}
-
+###### Xaml
+```xaml
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:ParallaxViewGettingStarted"
@@ -104,11 +94,10 @@ The following code sample demonstrates how to set the content property to the pa
     </ContentPage.Content>
 	
 </ContentPage>
+```
 
-{% endhighlight %}
-
-{% highlight c# %}
-
+###### C#
+```C#
 using Syncfusion.Maui.ParallaxView;
 
 namespace ParallaxViewGettingStarted
@@ -132,9 +121,7 @@ namespace ParallaxViewGettingStarted
         }
     }  
 }  
-
-{% endhighlight %}
-{% endtabs %}
+```
 
 ## Bind source to the parallax view
 
@@ -147,10 +134,8 @@ Currently, the [SfParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.M
 
 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.
 
-{% tabs %}
-
-{% highlight xaml %}
-
+###### Xaml
+```xaml
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:local="clr-namespace:ParallaxViewGettingStarted"
@@ -191,11 +176,10 @@ The following code sample demonstrates how to bind the Syncfusion ListView to th
     </ContentPage.Content>
 	
 </ContentPage>
+```
 
-{% endhighlight %}
-
-{% highlight c# %}
-
+###### C#
+```C#
 public partial class MainPage : ContentPage
 {
     public MainPage()
@@ -251,10 +235,7 @@ public class Contacts
 
     public ImageSource ItemImage { get; set; }
 }
-
-{% endhighlight %}
-
-{% endtabs %}
+```
 
 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.