https://github.com/syncfusionexamples/display-cameraimage-listview-xamarin

This repository contains sample about how to display images taken from the camera on the Xamarin.Forms ListView (SfListView)?
https://github.com/syncfusionexamples/display-cameraimage-listview-xamarin

camera image imagesource itemtemplate listview listview-image-access loading-captured-image media-plugin picture sflistview xamarin xamarin-forms

Last synced: 7 days ago
JSON representation

This repository contains sample about how to display images taken from the camera on the Xamarin.Forms ListView (SfListView)?

• Host: GitHub
• URL: https://github.com/syncfusionexamples/display-cameraimage-listview-xamarin
• Owner: SyncfusionExamples
• Created: 2020-02-27T11:48:41.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-10T09:33:51.000Z (8 months ago)
• Last Synced: 2024-05-10T10:39:37.782Z (8 months ago)
• Topics: camera, image, imagesource, itemtemplate, listview, listview-image-access, loading-captured-image, media-plugin, picture, sflistview, xamarin, xamarin-forms
• Language: C#
• Homepage:
• Size: 547 KB
• Stars: 0
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# How to display images taken from the camera on the Xamarin.Forms ListView (SfListView)? 

You can display images taken by camera in [SfListView](https://help.syncfusion.com/xamarin/listview/overview) by loading Image in the [SfListView.ItemTemplate](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_ItemTemplate). 

To know more about using Media plugin for Xamarin, you can refer from the following link: https://github.com/jamesmontemagno/MediaPlugin 

Take a photo using CrossMedia plugin and convert to ImageSource. 

``` C#

namespace SfListViewSample

{

    public class ViewModel

    {

        private int count = 0;

        public Command TakePhotoCommand { get; set; }

        public ViewModel()

        {

            ContactsInfo = new ObservableCollection();

            TakePhotoCommand = new Command(OnTakePhotoClicked);

        }

        private async void OnTakePhotoClicked(object obj)

        {

            count += 1;

            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions

            {

                Directory = "Media\\Pictures",

                Name = "Image" + count,

                SaveToAlbum = false,

                CompressionQuality = 75,

                CustomPhotoSize = 50,

                MaxWidthHeight = 2000,

            });

            var details = new ListViewContactsInfo()

            {

                ContactNumber = random.Next(100, 400).ToString() + "-" + random.Next(500, 800).ToString() + "-" + random.Next(1000, 2000).ToString(),

                ContactName = CustomerNames[count],

            };

            if (file == null)

                return;

            details.ContactImage = ImageSource.FromStream(() =>

            {

                var stream = file.GetStream();

                return stream;

            });

            ContactsInfo.Add(details);

        }

    }

}

```

Display the taken image using FFImageLoading in the ItemTemplate.

``` xml

    

    

        

            

                

                     

                        

                        

                            ...

                        

                    

                

            

        

    

```