We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load images from SD card or Url in Carousel control

Platform: Xamarin.Forms |
Control: SfCarousel |
Published Date: February 24, 2017 |
Last Revised Date: June 25, 2019

In General, we can assign carousel’s Item images from Resource folder of the application while using Image content. In other hand, carousel control provides a support to load the images from SD card or from URL that can be assigned as a content.

 

The following code example illustrates how to load the images from SD card and from URL

 

 Getting Carousel’s Image from URL:

C#

public partial class KBSolutionPage : ContentPage
{
public KBSolutionPage()
{
    InitializeComponent();
 
    // Create an Instance of carousel control
 
    SfCarousel sfCarousel = new SfCarousel();
 
    // To get the view of carousle set the particular height and width of item
 
    if (Device.OS == TargetPlatform.Android)
    {
        sfCarousel.ItemWidth = 170;
        sfCarousel.ItemHeight = 250;
    }
    if (Device.OS == TargetPlatform.iOS)
    {
        sfCarousel.ItemWidth = 150;
        sfCarousel.ItemHeight = 300;
    }
 
    //Create a collection with Url of images which is going to be an items of carousel
 
    var carouselModel = new List<CarouselModel> {
    new CarouselModel ("https://cdn.syncfusion.com/content/images/Images/Camtasia_Succinctly.png?v=22022017060923"),
    new CarouselModel ("https://cdn.syncfusion.com/content/images/Images/SQL_Queries_Succinctly.png?v=04022017014551"),
    new CarouselModel ("https://cdn.syncfusion.com/content/images/Images/Keystonejs_Succinctly.png?v=22022017060923"),
    new CarouselModel ("https://cdn.syncfusion.com/content/images/Images/sql_server_for_c_sharp_developers_succinctly_cover_img.png?v=22022017060923"),
    new CarouselModel ("https://cdn.syncfusion.com/content/images/downloads/ebooks/SciPy_Programming_Succinctly_img.png?v=22022017060923")
 
};
 
    // By using Template concept, we have assign that Url image source to Image control.
 
    var carouselModel DataTemplate = new DataTemplate(() =>
    {
        var grid = new Grid();
        var nameLabel = new Image();
        nameLabel.SetBinding(Image.SourceProperty, "Image");
        grid.Children.Add(nameLabel);
        return grid;
    });
 
    // Assign the collection of Url images to the DataSource of Carousel
 
    sfCarousel.ItemTemplate = carouselModel DataTemplate;
    sfCarousel.DataSource = carouselModel;
 
    this.Content = sfCarousel;
}
}
public class CarouselModel
{
public CarouselModel(string imagestr)
{
    Image = imagestr;
}
private string _image;
 
public string Image
{
    get { return _image; }
    set { _image = value; }
}
}
 

 

 Getting Carousel’s Image from SD card location:

C#

public partial class KBSolutionPage : ContentPage
{
public KBSolutionPage()
{
    InitializeComponent();
 
    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;
    }
    // get the collection of location of images are in local system  
 
    var carouselModel = new List<CarouselModel> {
 
    new CarouselModel(“/storage/emulated/0/Pictures/download1.JPG" ),
 
    new CarouselModel(“/storage/emulated/0/Pictures/download2.JPG" ),
 
    new CarouselModel(“/storage/emulated/0/Pictures/download3.JPG" ),
 
    new CarouselModel(“/storage/emulated/0/Pictures/download4.JPG"), 
 
    new CarouselModel(“/storage/emulated/0/Pictures/download5.JPG")
 
 
    };
    var carouselModelDataTemplate = new DataTemplate(() =>
    {
        var grid = new Grid();
        var nameLabel = new Image();
        nameLabel.SetBinding(Image.SourceProperty, "Image");
        grid.Children.Add(nameLabel);
        return grid;
    });
 
    sfCarousel.ItemTemplate = carouselModelDataTemplate;
    sfCarousel.DataSource = carouselModel;
 
    this.Content = sfCarousel;
}
}
public class CarouselModel
{
public CarouselModel(string imagestr)
{
    Image = imagestr;
}
private string _image;
 
public string Image
{
    get { return _image; }
    set { _image = value; }
}
}

 

Screenshot

Carousel

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon