Skip to content

Improved Sunburst Chart, ParallaxView UG Content Using Syncfusion Continue AI #3303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: hotfix/hotfix-v29.1.33
Choose a base branch
from
Open

Improved Sunburst Chart, ParallaxView UG Content Using Syncfusion Continue AI #3303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c77b25a
updated content for sunburst and Parallax-View files
Harsha-SF4223 May 21, 2025
6545242
updated API reference link
Harsha-SF4223 May 22, 2025
387c49b
updated trade mark
Harsha-SF4223 May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions MAUI/Parallax-View/Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ documentation: ug

## Speed Customization

The [`Speed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Speed) value denotes the scrolling speed of the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Content) added as a background view. Based on the speed value, the background view will scroll along with the foreground view.
The [`Speed`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Speed) property determines the scrolling speed of the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Content) added as a background view. Based on the speed value, the background view will scroll along with the foreground view.

{% tabs %}

{% highlight xaml %}

<parallax:SfParallaxView Source="{x:Reference Name = listview}" x:Name="parallaxview" Speed="0.5" >
<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>
Expand All @@ -33,7 +33,6 @@ namespace ParallaxViewGettingStarted
{
public partial class MainPage : ContentPage
{

public MainPage()
{
InitializeComponent();
Expand All @@ -44,10 +43,10 @@ namespace ParallaxViewGettingStarted
Image image = new Image();
Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;
image.Source = ImageSource.FromResource("ParallaxViewGettingStarted.parallax.jpg", assembly);
image.BackgroundColor = Colors.Transparent,
image.HorizontalOptions = LayoutOptions.Fill,
image.VerticalOptions = LayoutOptions.Fill,
image.Aspect = Aspect.AspectFill
image.BackgroundColor = Colors.Transparent;
image.HorizontalOptions = LayoutOptions.Fill;
image.VerticalOptions = LayoutOptions.Fill;
image.Aspect = Aspect.AspectFill;
parallax.Content = image;
parallax.Speed = 0.5;
listview.ItemsSource = view.Items;
Expand All @@ -63,22 +62,22 @@ namespace ParallaxViewGettingStarted

## Orientation

The orientation of the content scrolling can be customized to vertical or horizontal using the value of the [`Orientation`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Orientation) property.
The orientation of the content scrolling can be customized to vertical or horizontal using the [`Orientation`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html#Syncfusion_Maui_ParallaxView_SfParallaxView_Orientation) property.

{% tabs %}

{% highlight xaml %}

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

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

{% endhighlight %}
Expand All @@ -105,8 +104,8 @@ namespace ParallaxViewGettingStarted
parallax.Orientation = Syncfusion.Maui.ParallaxView.Orientation.Horizontal;
listview.ItemsSource = view.Items;
listview.Orientation = ItemsLayoutOrientation.Horizontal;
listview.BackgroundColor = Colors.Transparent,
listview.ItemSize = 100
listview.BackgroundColor = Colors.Transparent;
listview.ItemSize = 100;
parallax.Source = listview;
this.Content = parallax;
}
Expand Down
30 changes: 15 additions & 15 deletions MAUI/Parallax-View/Getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

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.

To get start quickly with our .NET MAUI Parallax View, you can check the below video.
To get started quickly with our .NET MAUI Parallax View, you can check the below video.

{% youtube "https://youtu.be/ezzIDWYYrUc" %}

Expand All @@ -22,7 +22,7 @@ To get start quickly with our .NET MAUI Parallax View, you can check the below v

Before proceeding, ensure that the following are set up:

1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed.
1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later.
2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.8 or later).

## Step 1: Create a new .NET MAUI project
Expand All @@ -31,15 +31,15 @@ Before proceeding, ensure that the following are set up:
2. Name the project and choose a location. Click **Next**.
3. Select the .NET framework version and click **Create**.

## Step 2: Install the Syncfusion<sup>®</sup> .NET MAUI Parallax View Package
## Step 2: Install the Syncfusion® .NET MAUI Parallax View Package

1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**.
2. Search for [Syncfusion.Maui.ParallaxView](https://www.nuget.org/packages/Syncfusion.Maui.ParallaxView/) and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored.

## Step 3: Register the handler

[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion<sup>®</sup> controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion<sup>®</sup> core.
[Syncfusion.Maui.Core](https://www.nuget.org/packages/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.

{% tabs %}
{% highlight C# tabtitle="MauiProgram.cs" hl_lines="2 13" %}
Expand Down Expand Up @@ -72,7 +72,7 @@ namespace ParallaxViewGettingStarted

## Step 4: Add .NET MAUI Parallax View

1. To initialize the control, import the `Synfusion.Maui.ParallaxView` namespace.
1. To initialize the control, import the `Syncfusion.Maui.ParallaxView` namespace.
2. Initialize [SfParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html).

{% tabs %}
Expand Down Expand Up @@ -117,7 +117,7 @@ namespace ParallaxViewGettingStarted

Before proceeding, ensure that the following are set up:

1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed.
1. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later.
2. Set up a .NET MAUI environment with Visual Studio Code.
3. Ensure that the .NET MAUI extension is installed and configured as described [here.](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-8.0&tabs=visual-studio-code)

Expand All @@ -128,16 +128,16 @@ Before proceeding, ensure that the following are set up:
3. Select the project location, type the project name and press **Enter.**
4. Then choose **Create project.**

## Step 2: Install the Syncfusion<sup>®</sup> .NET MAUI Parallax View Package
## Step 2: Install the Syncfusion® .NET MAUI Parallax View Package

1. Press <kbd>Ctrl</kbd> + <kbd>`</kbd> (backtick) to open the integrated terminal in Visual Studio Code.
2. Ensure you're in the project root directory where your .csproj file is located.
3. Run the command `dotnet add package Syncfusion.Maui.ParallaxView` to install the Syncfusion<sup>®</sup> .NET MAUI ParallaxView NuGet package.
3. Run the command `dotnet add package Syncfusion.Maui.ParallaxView` to install the Syncfusion® .NET MAUI ParallaxView NuGet package.
4. To ensure all dependencies are installed, run `dotnet restore`.

## Step 3: Register the handler

[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core) nuget is a dependent package for all Syncfusion<sup>®</sup> controls of .NET MAUI. In the **MauiProgram.cs** file, register the handler for Syncfusion<sup>®</sup> core.
[Syncfusion.Maui.Core](https://www.nuget.org/packages/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.

{% tabs %}
{% highlight C# tabtitle="MauiProgram.cs" hl_lines="2 13" %}
Expand Down Expand Up @@ -170,7 +170,7 @@ namespace ParallaxViewGettingStarted

## Step 4: Add .NET MAUI Parallax View

1. To initialize the control, import the `Synfusion.Maui.ParallaxView` namespace.
1. To initialize the control, import the `Syncfusion.Maui.ParallaxView` namespace.
2. Initialize [SfParallaxView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ParallaxView.SfParallaxView.html).

{% tabs %}
Expand Down Expand Up @@ -353,20 +353,20 @@ public class ParallaxViewModel
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 = "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 = "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 = "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 = "Don't Stop Believing", Author = "Journey"},
};

for (int i = 0; i < Items.Count; i++)
Expand Down Expand Up @@ -395,4 +395,4 @@ T> The size of the [`Content`](https://help.syncfusion.com/cr/maui/Syncfusion.Ma

You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/MAUI-Parallax-View-Sample-Demos).

N> [\#11230](https://github.com/dotnet/maui/issues/11230) In Android, when an image's pixel size cannot stretch to fit the Parallax View Source control during loading, it results in a Java.Lang.RuntimeException. It is necessary to use the image as Parallax View Content without pixelation.
N> [\#11230](https://github.com/dotnet/maui/issues/11230) In Android, when an image's pixel size cannot stretch to fit the Parallax View Source control during loading, it results in a Java.Lang.RuntimeException. It is necessary to use the image as Parallax View Content without pixelation.
24 changes: 12 additions & 12 deletions MAUI/Parallax-View/custom-controls.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Custom controls in .NET MAUI Parallax View Control | Syncfusion
description: Learn about Scrolling support for custom controls support in Syncfusion® .NET MAUI Parallax View (SfParallaxView) control and more.
description: Learn about scrolling support for custom controls in Syncfusion® .NET MAUI Parallax View (SfParallaxView) control and more.
platform: MAUI
control: SfParallaxView
documentation: ug
---

# Scrolling support for custom controls in .NET MAUI Parallax View

The Parallax view supports custom scrollable controls using the [`IParallaxView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html) interface. This interface implements the [`ScrollableContentSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_ScrollableContentSize) property and the [`Scrolling`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_Scrolling) event.
The Parallax View supports custom scrollable controls using the [`IParallaxView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html) interface. This interface implements the [`ScrollableContentSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_ScrollableContentSize) property and the [`Scrolling`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_Scrolling) event.

{% highlight c# %}

Expand All @@ -19,17 +19,17 @@ namespace ParallaxViewCustomControl
{
public class CustomListView : ListView, IParallaxView
{
public Size ScrollableContentSize { get ; set ; }
public Size ScrollableContentSize { get; set; }

public event EventHandler<ParallaxScrollingEventArgs> Scrolling;
}
}

{% endhighlight %}
{% endhighlight %}

## Scrollable ContentSize

The [`ScrollableContentSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_ScrollableContentSize) is the total content size of the scrollable custom control.
The [`ScrollableContentSize`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_ScrollableContentSize) represents the total content size of the scrollable custom control.

{% highlight c# %}

Expand All @@ -43,7 +43,7 @@ namespace ParallaxViewCustomControl

public CustomListView()
{
this.ScrollableContentSize = ContentSize; // Total scrollable size of the custom control
this.ScrollableContentSize = ContentSize; // Total scrollable size of the custom control
}
}
}
Expand All @@ -52,13 +52,13 @@ namespace ParallaxViewCustomControl

## Scrolling event

The [`Scrolling`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_Scrolling) event occurs whenever the [`ParallaxScrollingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html) value is set through the scrollable custom control scrolled event.
The [`Scrolling`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html#Syncfusion_Maui_Core_IParallaxView_Scrolling) event occurs whenever the [`ParallaxScrollingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html) value is set through the scrollable custom control's scrolled event.

The [`ParallaxScrollingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html) has the following three arguments:

* [`ScrollX`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html#Syncfusion_Maui_Core_ParallaxScrollingEventArgs_ScrollX): Denotes X position of the finished scroll.
* [`ScrollX`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html#Syncfusion_Maui_Core_ParallaxScrollingEventArgs_ScrollX): Denotes the X position of the finished scroll.

* [`ScrollY`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html#Syncfusion_Maui_Core_ParallaxScrollingEventArgs_ScrollY): Denotes Y position of the finished scroll.
* [`ScrollY`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html#Syncfusion_Maui_Core_ParallaxScrollingEventArgs_ScrollY): Denotes the Y position of the finished scroll.

* [`CanAnimate`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.ParallaxScrollingEventArgs.html#Syncfusion_Maui_Core_ParallaxScrollingEventArgs_CanAnimate): Defines whether to animate the scroll or not.

Expand All @@ -67,12 +67,12 @@ The [`ParallaxScrollingEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusio
{% highlight xaml %}

<Grid>
<parallax:SfParallaxView Source="{x:Reference Name = listView}" x:Name="parallaxview">
<parallax:SfParallaxView Source="{x:Reference Name=listView}" x:Name="parallaxview">
<parallax:SfParallaxView.Content>
<Image x:Name="image" Source="{Binding Image}" BackgroundColor="Transparent" HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" />
</parallax:SfParallaxView.Content>
</parallax:SfParallaxView>
<local:CustomListView x:Name="listView" >
<local:CustomListView x:Name="listView">
. . .
</local:CustomListView>
</Grid>
Expand Down Expand Up @@ -124,6 +124,6 @@ namespace ParallaxViewCustomControl

{% endtabs %}

By default, the Parallax View control supports [`.NET MAUI ScrollView`](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview) and [Syncfusion ListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html). For custom controls, you need to implement the [`IParallaxView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html) interface from Syncfusion.Maui.Core.
By default, the Parallax View control supports [.NET MAUI ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview) and [Syncfusion ListView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ListView.SfListView.html). For custom controls, you need to implement the [`IParallaxView`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.IParallaxView.html) interface from Syncfusion.Maui.Core.

You can find the Parallax View control with custom ListView control from this [link](https://github.com/SyncfusionExamples/MAUI-Parallax-View-Sample-Demos).
Loading