How to load SfChart in to SfCarousel in static or dynamic?
You can load SfChart as an item template inside the SfCarousel control by following the given steps:
Step 1: Add the necessary assemblies in the PCL, Android, iOS, and UWP projects. Refer to this UG documentation to know more about the assemblies required for adding SfCarousel and SfChart to your project.
Step 2: Add ItemTemplate as SfChart control before creating the SfCarousel control using the following code sample.
XAML
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<chart:SfChart>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"></chart:ChartAxisTitle>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis>
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
</chart:ColumnSeries>
</chart:SfChart.Series>
</chart:SfChart>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
ViewModel
public class CarouselViewModel
{
public CarouselViewModel()
{
ImageCollection.Add(new CarouselModel());
ImageCollection.Add(new CarouselModel());
ImageCollection.Add(new CarouselModel());
ImageCollection.Add(new CarouselModel());
ImageCollection.Add(new CarouselModel());
}
private List<CarouselModel> imageCollection = new List<CarouselModel>();
public List<CarouselModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
public class CarouselModel
{
public List<Person> Data { get; set; }
public CarouselModel()
{
Data = new List<Person>()
{
new Person { Name = "David", Height = 180 },
new Person { Name = "Michael", Height = 170 },
new Person { Name = "Steve", Height = 160 },
new Person { Name = "Joel", Height = 182 }
};
}
}
public class Person
{
public string Name { get; set; }
public double Height { get; set; }
}
Add the SfCarousel control on the Content page using the following code.
XAML
<ContentPage.Content>
<carousel:SfCarousel x:Name="sfCarousel"
DataSource="{Binding ImageCollection}"
ItemTemplate="{StaticResource itemTemplate}"
ViewMode="Default"
ItemWidth="300"
ItemHeight="400" />
</ContentPage.Content>
C#
namespace ChatInCarousel
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
sfCarousel.BindingContext = new CarouselViewModel();
}
}
}
The following screenshot illustrates the result of the above code sample code.
|
Sample link : Sample
