)
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: June 24, 2019).
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.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon