Category / Section
How to render multiple items to Carousel items
2 mins read
We can render the multiple items to the single carousel item by adding the controls in any of the parent layout and assign as the content of carousel Item. It can be achieved by using the following
Step1: Create a carousel control with all included assemblies.
Step2: Create a view model class with source of given controls.
Step3: Using “ItemTemplate”, add controls (Image,Button and Label) into the parent layout and assign that as itemtemplate view.
The following will illustrate the way to add multiple controls in carousel item.
Code snippet:
public partial class KBSolutionPage : ContentPage
{
public KBSolutionPage()
{
InitializeComponent();
//Initialize the carousel control
SfCarousel sfCarousel = new SfCarousel();
if (Device.OS == TargetPlatform.Android)
{
sfCarousel.ItemWidth = 170;
sfCarousel.ItemHeight = 250;
}
if (Device.OS == TargetPlatform.iOS)
{
sfCarousel.ItemWidth = 150;
sfCarousel.ItemHeight = 300;
}
var carouselModel = new List<CarouselModel> {
new CarouselModel("image1.png","Button1","Label1" ),
new CarouselModel ("image1.png","Button1","Label1”),
new CarouselModel ("image1.png","Button1","Label1”),
new CarouselModel ("image1.png","Button1","Label1”),
new CarouselModel ("image1.png","Button1","Label1”)
};
var carouselModelDataTemplate = new DataTemplate(() =>
{
var stack = new StackLayout();
var nameImage = new Image();
nameImage.SetBinding(Image.SourceProperty, "Image");
var nameButton = new Button();
nameButton.SetBinding(Button.TextProperty, "ButtonString");
var nameLabel = new Label() { TextColor = Color.Gray };
nameLabel.SetBinding(Label.TextProperty, "LabelString");
stack.Children.Add(nameButton);
stack.Children.Add(nameImage);
stack.Children.Add(nameLabel);
return stack;
});
sfCarousel.ItemTemplate = carouselModelDataTemplate;
sfCarousel.DataSource = carouselModel;
this.Content = sfCarousel;
}
}
class CarouselModel
{
public CarouselModel(string imagestr, string buttonstring, string labelstring)
{
Image = imagestr;
ButtonString = buttonstring;
LabelString = labelstring;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
private string _buttonString;
public string ButtonString
{
get { return _buttonString; }
set { _buttonString = value; }
}
private string _labelstring;
public string LabelString
{
get { return _labelstring; }
set { _labelstring = value; }
}
}
Output:
|
