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. Image for the cookie policy date
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

In General, you can assign carousel item images from the Resource folder of the application when using image content. On the other hand, carousel control provides support to load the images from an SD card or a URL that can be assigned as content.

 

You can load images from an SD card or a URL in Xamarin.Forms carousel control. The following steps will help you to load images:

 

Step 1: Add the needed assemblies to have carousel control.

Step 2: Create an ObservableCollection to hold image data.

Step 3: While adding an image to an ObservableCollection, if it is in URL format, include the URL link; otherwise, if the image is in SD format, include the location of the image.

 

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

 

 Getting Carousel’s Image from URL:

XAML

<carousel:SfCarousel x:Name="carousel"  
                             ItemTemplate="{StaticResource itemTemplate}" 
                             ItemsSource="{Binding ImageCollection}" 
                             HeightRequest="400" 
                             WidthRequest="800" 
                             ItemHeight="{OnPlatform Android='250',iOS='300'}"
                             ItemWidth="{OnPlatform Android='170',iOS='150'}"/>

 

C#

public class KBViewModel
    {
        public KBlViewModel()
        {
           ImageCollection.Add(new CarouselModel("https://cdn.syncfusion.com/content/images/
                                                 Images/ Camtasia_Succinctly.png?v=22022017060923"));
 
            ImageCollection.Add(new CarouselModel("https://cdn.syncfusion.com/content/images/
                                                 Images/SQL_Queries_Succinctly.png?v=04022017014551"));
 
            ImageCollection.Add(new CarouselModel("https://cdn.syncfusion.com/content/images/
                                                      Images/Keystonejs_Succinctly.png?v=22022017060923"));
 
            ImageCollection.Add(new CarouselModel("https://cdn.syncfusion.com/content/images/
             Images/sql_server_for_c_sharp_developers_succinctly_cover_img.png?v=22022017060923"));
 
            ImageCollection.Add(new CarouselModel("https://cdn.syncfusion.com/content/
                 images/downloads/ebooks/SciPy_Programming_Succinctly_img.png?v=22022017060923"));
        }
 
        private List<CarouselModel> _imageCollection = new List<CarouselModel>();
 
        public List<CarouselModel> ImageCollection
        {
            get { return _imageCollection; }
            set { _imageCollection = value; }
        }
 
    }
public class CarouselModel
    {
        public CarouselModel(string imageString)
        {
            Image = imageString;
        }
 
        private string _image;
 
        public string Image
        {
            get { return _image; }
            set { _image = value; }
        }
    }

 

 

 Getting Carousel’s Image from SD card location:

XAML

 

<carousel:SfCarousel x:Name="carousel"  
                             ItemTemplate="{StaticResource itemTemplate}" 
                             ItemsSource="{Binding ImageCollection}" 
                             HeightRequest="400" 
                             WidthRequest="800" 
                             ItemHeight="{OnPlatform Android='250',iOS='300'}"
                             ItemWidth="{OnPlatform Android='170',iOS='150'}"/>

 

C#

public class KBViewModel
    {
        public KBViewModel()
        {
            ImageCollection.Add(new   CarouselModel("/storage/emulated/0/Pictures/download1.JPG"));
 
            ImageCollection.Add(new CarouselModel("/storage/emulated/0/Pictures/download2.JPG"));
 
            ImageCollection.Add(new CarouselModel("/storage/emulated/0/Pictures/download3.JPG"));
 
            ImageCollection.Add(new CarouselModel("/storage/emulated/0/Pictures/download4.JPG"));
 
            ImageCollection.Add(new CarouselModel("/storage/emulated/0/Pictures/download5.JPG"));
 
 
        }
 
        private List<CarouselModel> _imageCollection = new List<CarouselModel>();
 
        public List<CarouselModel> ImageCollection
        {
            get { return _imageCollection; }
            set { _imageCollection = value; }
        }
    }
public class CarouselModel
    {
        public CarouselModel(string imageString)
        {
            Image = imageString;
        }
 
        private string _image;
 
        public string Image
        {
            get { return _image; }
            set { _image = value; }
        }
    }

 

You can refer to the sample in the link.

 

Screenshot

Carousel

 

Figure 1.1 Carousel Control in iOS, Android and UWP

 

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