{"id":614,"date":"2023-01-02T18:44:32","date_gmt":"2023-01-02T18:44:32","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=614"},"modified":"2023-01-18T16:26:10","modified_gmt":"2023-01-18T16:26:10","slug":"mediaelement-in-xamarin-forms","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/02\/mediaelement-in-xamarin-forms\/","title":{"rendered":"How to use MediaElement in Xamarin Forms"},"content":{"rendered":"\n<p><strong><strong>MediaElement in Xamarin Forms<\/strong> <strong>Community Toolkit<\/strong> <\/strong>is a view where we can play audio and video files. The media files (Audio \/ Video) can be in either remote or local and we can play those media files using uri. So In this article, I\u2019m going to show you how to use <strong><strong>MediaElement<\/strong><\/strong> <strong><strong>in Xamarin Forms.<\/strong><\/strong><\/p>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start<\/strong><\/p>\n\n\n\n<p>In this article you will see :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><strong>MediaElement<\/strong><\/strong> with local and remote source<\/li>\n\n\n\n<li>How to take <strong>screenshots<\/strong> and <strong>store<\/strong> in file<\/li>\n\n\n\n<li>Displaying all <strong>screenshots<\/strong> taken by app<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:25px\"><strong>MediaElement with local and remote source :<\/strong><\/p>\n\n\n\n<p>In this sample demo we will use&nbsp;<strong><a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.CommunityToolkit\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Xamarin.CommunityToolkit<\/a><\/strong> nuget package.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Xamarin.CommunityToolkit<\/strong><\/p>\n\n\n\n<p>Xamarin.CommunityToolkit&nbsp;is a collection of Converters, Behaviours, Animations, Custom Views, Effects, Helpers etc. It simplifies the developers task when building Android, iOS and UWP applications using Xamarin Forms.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 \u2013 Install <strong>Xamarin.CommunityToolkit<\/strong>&nbsp;nuget package<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-1024x563.png\" alt=\"Xamarin CommunityToolkit\" class=\"wp-image-616\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-1024x563.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-300x165.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-768x422.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-1536x844.png 1536w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit-850x467.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/Xamarin-CommunityToolkit.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Setting up the UI<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.1 &#8211; Create a MainPage.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;ContentPage\n    x:Class=\"XFMediaElementSampleDemo.Views.MainPage\"\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:ios=\"clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core\"\n    ios:Page.UseSafeArea=\"true\"\n    NavigationPage.HasNavigationBar=\"False\">\n\n    &lt;StackLayout VerticalOptions=\"CenterAndExpand\">\n\n        &lt;Button\n            BackgroundColor=\"#559173\"\n            Command=\"{Binding OnVideoListCommand}\"\n            Text=\"Video List\"\n            TextColor=\"White\" \/>\n\n        &lt;Button\n            BackgroundColor=\"#559173\"\n            Command=\"{Binding OnScreenshotsCommand}\"\n            Text=\"Screenshots List\"\n            TextColor=\"White\" \/>\n\n    &lt;\/StackLayout>\n\n&lt;\/ContentPage><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>MainPage.xaml<\/strong>, I have taken 2 buttons as follows :\n<ul class=\"wp-block-list\">\n<li><strong>Video List <\/strong>: Clicking on this will navigate to the Video List Page.<\/li>\n\n\n\n<li><strong>Screenshots List <\/strong>: Clicking on this will navigate to the Screenshots List Page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.2 &#8211; Create a VideoListView.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n&lt;ContentPage\n    x:Class=\"XFMediaElementSampleDemo.Views.VideoListView\"\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:converter=\"clr-namespace:XFMediaElementSampleDemo.Converters\"\n    xmlns:customMedia=\"clr-namespace:XFMediaElementSampleDemo.Views\"\n    x:Name=\"videoView\"\n    NavigationPage.HasNavigationBar=\"False\">\n\n    &lt;ContentPage.Resources>\n        &lt;ResourceDictionary>\n            &lt;converter:BoolToColorConverter x:Key=\"BoolToColor\" \/>\n        &lt;\/ResourceDictionary>\n    &lt;\/ContentPage.Resources>\n\n    &lt;ContentPage.Content>\n        &lt;StackLayout Spacing=\"0\">\n\n            &lt;BoxView\n                BackgroundColor=\"#559173\"\n                HeightRequest=\"50\"\n                IsVisible=\"{OnPlatform Android=False,\n                                       iOS=True}\" \/>\n\n            &lt;Grid\n                Padding=\"10\"\n                BackgroundColor=\"#559173\"\n                ColumnDefinitions=\"*,*,*\"\n                HeightRequest=\"60\"\n                HorizontalOptions=\"FillAndExpand\">\n\n                &lt;Image\n                    Grid.Column=\"0\"\n                    HeightRequest=\"25\"\n                    HorizontalOptions=\"Start\"\n                    Source=\"left_arrow.png\"\n                    WidthRequest=\"25\">\n                    &lt;Image.GestureRecognizers>\n                        &lt;TapGestureRecognizer Command=\"{Binding OnBackCommand}\" \/>\n                    &lt;\/Image.GestureRecognizers>\n                &lt;\/Image>\n\n                &lt;Label\n                    Grid.Column=\"1\"\n                    FontSize=\"Medium\"\n                    HorizontalOptions=\"CenterAndExpand\"\n                    HorizontalTextAlignment=\"Center\"\n                    Text=\"Video List\"\n                    TextColor=\"White\"\n                    VerticalOptions=\"Center\"\n                    VerticalTextAlignment=\"Center\" \/>\n\n                &lt;Image\n                    Grid.Column=\"2\"\n                    HeightRequest=\"35\"\n                    HorizontalOptions=\"End\"\n                    Source=\"camera.png\"\n                    WidthRequest=\"35\">\n                    &lt;Image.GestureRecognizers>\n                        &lt;TapGestureRecognizer Command=\"{Binding OnCaptureScreenCommand}\" \/>\n                    &lt;\/Image.GestureRecognizers>\n                &lt;\/Image>\n\n            &lt;\/Grid>\n\n            &lt;Grid RowDefinitions=\"*,Auto\">\n\n                &lt;!--  Top Selected Video List  -->\n                &lt;CollectionView\n                    x:Name=\"ls\"\n                    Grid.Row=\"0\"\n                    ItemSizingStrategy=\"MeasureFirstItem\"\n                    ItemsSource=\"{Binding SelectedVideoList}\"\n                    SelectionMode=\"None\"\n                    VerticalOptions=\"FillAndExpand\">\n\n                    &lt;CollectionView.ItemsLayout>\n                        &lt;GridItemsLayout\n                            HorizontalItemSpacing=\"5\"\n                            Orientation=\"Vertical\"\n                            Span=\"2\"\n                            VerticalItemSpacing=\"5\" \/>\n                    &lt;\/CollectionView.ItemsLayout>\n\n                    &lt;!--  Empty View  -->\n                    &lt;CollectionView.EmptyView>\n                        &lt;StackLayout VerticalOptions=\"CenterAndExpand\">\n                            &lt;Label\n                                HorizontalOptions=\"CenterAndExpand\"\n                                HorizontalTextAlignment=\"Center\"\n                                Text=\"No Video Found\"\n                                TextColor=\"Black\"\n                                VerticalOptions=\"CenterAndExpand\"\n                                VerticalTextAlignment=\"Center\" \/>\n                        &lt;\/StackLayout>\n                    &lt;\/CollectionView.EmptyView>\n\n                    &lt;!--  Item Template  -->\n                    &lt;CollectionView.ItemTemplate>\n                        &lt;DataTemplate>\n                            &lt;StackLayout\n                                Margin=\"5\"\n                                HeightRequest=\"230\"\n                                IsClippedToBounds=\"False\"\n                                VerticalOptions=\"Start\">\n\n                                &lt;Label Text=\"{Binding Title}\" TextColor=\"Black\" \/>\n\n                                &lt;customMedia:CustomMediaElement IsStopMedia=\"{Binding IsStopMedia}\" MediaUrl=\"{Binding VideoURL}\" \/>\n\n                            &lt;\/StackLayout>\n                        &lt;\/DataTemplate>\n                    &lt;\/CollectionView.ItemTemplate>\n                &lt;\/CollectionView>\n\n                &lt;!--  Bottom Horizontal Video List  -->\n                &lt;StackLayout Grid.Row=\"1\" HeightRequest=\"170\">\n\n                    &lt;Label Margin=\"0,10,0,0\" Text=\"Select video for multiview layer\" \/>\n\n                    &lt;StackLayout BackgroundColor=\"Black\">\n\n                        &lt;CollectionView\n                            Margin=\"5\"\n                            ItemSizingStrategy=\"MeasureFirstItem\"\n                            ItemsSource=\"{Binding VideoList}\"\n                            SelectionMode=\"None\"\n                            VerticalOptions=\"CenterAndExpand\">\n\n                            &lt;CollectionView.ItemsLayout>\n                                &lt;LinearItemsLayout Orientation=\"Horizontal\" \/>\n                            &lt;\/CollectionView.ItemsLayout>\n\n                            &lt;!--  Item Template  -->\n                            &lt;CollectionView.ItemTemplate>\n                                &lt;DataTemplate>\n                                    &lt;StackLayout>\n                                        &lt;Frame\n                                            Margin=\"5\"\n                                            Padding=\"2\"\n                                            BorderColor=\"{Binding IsSelected, Converter={StaticResource BoolToColor}}\"\n                                            CornerRadius=\"0\"\n                                            HeightRequest=\"110\"\n                                            IsClippedToBounds=\"True\"\n                                            WidthRequest=\"110\">\n\n                                            &lt;Grid>\n                                                &lt;Image Source=\"play.png\" \/>\n\n                                                &lt;Frame\n                                                    Margin=\"5\"\n                                                    Padding=\"3\"\n                                                    BackgroundColor=\"{Binding IsSelected, Converter={StaticResource BoolToColor}}\"\n                                                    CornerRadius=\"6\"\n                                                    HeightRequest=\"5\"\n                                                    HorizontalOptions=\"EndAndExpand\"\n                                                    VerticalOptions=\"EndAndExpand\"\n                                                    WidthRequest=\"5\" \/>\n                                            &lt;\/Grid>\n                                            &lt;Frame.GestureRecognizers>\n                                                &lt;TapGestureRecognizer Command=\"{Binding BindingContext.OnVideoSelectedCommand, Source={x:Reference videoView}}\" CommandParameter=\"{Binding .}\" \/>\n                                            &lt;\/Frame.GestureRecognizers>\n                                        &lt;\/Frame>\n\n                                        &lt;Label\n                                            FontSize=\"Medium\"\n                                            HorizontalTextAlignment=\"Center\"\n                                            Text=\"{Binding Title}\"\n                                            TextColor=\"White\" \/>\n\n                                    &lt;\/StackLayout>\n                                &lt;\/DataTemplate>\n                            &lt;\/CollectionView.ItemTemplate>\n\n                        &lt;\/CollectionView>\n\n                    &lt;\/StackLayout>\n\n                &lt;\/StackLayout>\n\n            &lt;\/Grid>\n\n        &lt;\/StackLayout>\n    &lt;\/ContentPage.Content>\n&lt;\/ContentPage><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>VideoListView.xaml<\/strong>, I have taken 2 CollectionViews as follow :\n<ul class=\"wp-block-list\">\n<li>First CollectionView will show the selected videos from the second bottom CollectionView. <\/li>\n\n\n\n<li>Second CollectionView will horizontally show in the bottom so once the user selects videos those videos will add in the first CollectionView and play.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>BoolToColorConverter<\/strong> : I have used for changing the color based on bool value.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.3 &#8211; Create a BoolToColorConverter.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Globalization;\nusing Xamarin.Forms;\n\nnamespace XFMediaElementSampleDemo.Converters\n{\n    public class BoolToColorConverter :IValueConverter\n    {\n        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            bool isTrue = (bool)value;\n\n            if (isTrue)\n                return Color.Green;\n            else\n                return Color.Red;\n        }\n\n        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)\n        {\n            return value;\n        }\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.4 &#8211; Create a CustomMediaElement.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n&lt;ContentView\n    x:Class=\"XFMediaElementSampleDemo.Views.CustomMediaElement\"\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:xct=\"http:\/\/xamarin.com\/schemas\/2020\/toolkit\"\n    HeightRequest=\"200\"\n    VerticalOptions=\"CenterAndExpand\">\n\n    &lt;ContentView.Content>\n\n        &lt;xct:MediaElement\n            x:Name=\"mediaElement\"\n            Aspect=\"AspectFit\"\n            AutoPlay=\"True\"\n            BackgroundColor=\"Black\"\n            HeightRequest=\"200\"\n            IsLooping=\"False\"\n            KeepScreenOn=\"True\"\n            ShowsPlaybackControls=\"True\"\n            Source=\"{Binding VideoURL}\"\n            VerticalOptions=\"CenterAndExpand\" \/>\n\n    &lt;\/ContentView.Content>\n\n&lt;\/ContentView><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.5 &#8211; CustomMediaElement.xaml.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.Generic;\nusing Xamarin.CommunityToolkit.Core;\nusing Xamarin.CommunityToolkit.UI.Views;\nusing Xamarin.Forms;\n\nnamespace XFMediaElementSampleDemo.Views\n{\n    public partial class CustomMediaElement : ContentView\n    {\n        private static MediaElement media;\n        public static readonly BindableProperty IsStopMediaProperty =\n                              BindableProperty.Create(\n                                  \"IsStopMedia\",\n                                  typeof(bool),\n                                  typeof(CustomMediaElement),\n                                  false,\n                                  BindingMode.TwoWay,\n                                  propertyChanged: OnEventNameChanged);\n\n        public bool IsStopMedia\n        {\n            get { return (bool)GetValue(IsStopMediaProperty); }\n            set { SetValue(IsStopMediaProperty, value); }\n        }\n\n        static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)\n        {\n            if (!(bool)newValue)\n                media.Play();\n            else\n                media.Stop();\n        }\n\n        public static readonly BindableProperty MediaUrlProperty =\n                              BindableProperty.Create(\n                                  \"MediaUrl\",\n                                  typeof(string),\n                                  typeof(CustomMediaElement),\n                                  string.Empty,\n                                  BindingMode.TwoWay,\n                                  propertyChanged: OnMediaUrlEventNameChanged);\n\n        public bool MediaUrl\n        {\n            get { return (bool)GetValue(MediaUrlProperty); }\n            set { SetValue(MediaUrlProperty, value); }\n        }\n\n        static void OnMediaUrlEventNameChanged(BindableObject bindable, object oldValue, object newValue)\n        {\n            string url = ((string)newValue);\n\n            if (!string.IsNullOrEmpty(url))\n            {\n                media.Source = MediaSource.FromUri(url);\n            }\n        }\n\n        public CustomMediaElement()\n        {\n            InitializeComponent();\n            CustomMediaElement.media = mediaElement;\n        }\n    }\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>CustomMediaElement.xaml<\/strong>, I have used some properties in <strong>MediaElement<\/strong> as follows :\n<ul class=\"wp-block-list\">\n<li><strong><em>Aspect<\/em><\/strong> : It determines how the video will be scaled to fit in a screen area.<\/li>\n\n\n\n<li><strong><em>AutoPlay<\/em><\/strong> : It enables whether the video will play automatically or not.<\/li>\n\n\n\n<li><strong><em>IsLooping<\/em><\/strong> : It enables whether the video will play again from start after reaching to end or not.<\/li>\n\n\n\n<li><strong><em>KeepScreenOn<\/em><\/strong> : &nbsp;It enables whether the device screen will stay on during video play or not.<\/li>\n\n\n\n<li><strong><em>ShowsPlaybackControls<\/em><\/strong> : It enables whether platform playback control will show or not.<\/li>\n\n\n\n<li><strong><em>Source<\/em><\/strong> : It indicates the media source.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211; Setting up the ViewModels<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3.1 &#8211; Create a BaseViewModel.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.ComponentModel;\nusing System.Runtime.CompilerServices;\n\nnamespace XFMediaElementSampleDemo.ViewModels\n{\n    public class BaseViewModel : INotifyPropertyChanged\n    {\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        public BaseViewModel()\n        {\n\n        }\n\n        public void OnPropertyChanged([CallerMemberName] string propertyName = null)\n        {\n            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3.2 &#8211; Create a VideoListViewModel.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.ObjectModel;\nusing System.IO;\nusing System.Linq;\nusing System.Threading.Tasks;\nusing System.Windows.Input;\nusing Xamarin.Forms;\nusing XFMediaElementSampleDemo.Models;\nusing XFMediaElementSampleDemo.Utiility;\n\nnamespace XFMediaElementSampleDemo.ViewModels\n{\n    public class VideoListViewModel : BaseViewModel\n    {\n\n        #region Constructor\n\n        public VideoListViewModel()\n        {\n            GetVideoList();\n\n            OnVideoSelectedCommand = new Command&lt;VideoItem>(t => OnVideoSelected(t));\n            OnCaptureScreenCommand = new Command(async () => await OnCaptureImageClick());\n            OnBackCommand = new Command(async () => await OnBackClick());\n        }\n\n        #endregion\n\n        #region Handle Click Event\n\n        private void OnVideoSelected(VideoItem videoItem)\n        {\n            Task.Run(() =>\n            {\n                var selectedVideoList = VideoList.Where&lt;VideoItem>(t => t.IsSelected == true).ToList();\n\n                if ((videoItem != null &amp;&amp; selectedVideoList.Count &lt;= 3) || (videoItem.IsSelected == true &amp;&amp; selectedVideoList.Count == 4))\n                {\n                    videoItem.IsSelected = !videoItem.IsSelected;\n\n                    if (SelectedVideoList != null)\n                    {\n                        var video = SelectedVideoList.Where&lt;VideoItem>(t => t.Title.Equals(videoItem.Title)).FirstOrDefault();\n\n                        Device.BeginInvokeOnMainThread(() =>\n                        {\n                            if (videoItem.IsSelected &amp;&amp; video == null)\n                            {\n                                videoItem.IsStopMedia = false;\n                                SelectedVideoList.Add(videoItem);\n                            }\n                            else if (videoItem.IsSelected == false &amp;&amp; video != null)\n                            {\n                                videoItem.IsStopMedia = true;\n                                SelectedVideoList.Remove(video);\n                            }\n                        });\n                    }\n                }\n                else\n                {\n                    Device.BeginInvokeOnMainThread(() =>\n                    {\n                        App.Current.MainPage.DisplayAlert(\"\", \"You can't select more than 4 videos\", \"ok\");\n                    });\n                }\n            });\n        }\n\n        private async Task OnCaptureImageClick()\n        {\n            var screenshot = await Xamarin.Essentials.Screenshot.CaptureAsync();\n            var stream = await screenshot.OpenReadAsync();\n\n            var memoryStream = new MemoryStream();\n            stream.CopyTo(memoryStream);\n\n            bool isSaved = await FileHelper.SaveImage(memoryStream.ToArray(), \"screen_\" + DateTime.Now.Ticks + \".png\");\n\n            if (isSaved)\n                await App.Current.MainPage.DisplayAlert(\"\", \"Image captured and saved.\", \"ok\");\n        }\n\n        private async Task OnBackClick()\n        {\n            await App.Current.MainPage.Navigation.PopAsync();\n        }\n\n        #endregion\n\n        #region Properties\n\n        private ObservableCollection&lt;VideoItem> _selectedVideoList = new ObservableCollection&lt;VideoItem>();\n        public ObservableCollection&lt;VideoItem> SelectedVideoList\n        {\n            get => _selectedVideoList;\n            set\n            {\n                _selectedVideoList = value;\n                OnPropertyChanged();\n            }\n        }\n\n        private ObservableCollection&lt;VideoItem> _videoList = new ObservableCollection&lt;VideoItem>();\n        public ObservableCollection&lt;VideoItem> VideoList\n        {\n            get => _videoList;\n            set\n            {\n                _videoList = value;\n                OnPropertyChanged();\n            }\n        }\n\n        public ICommand OnVideoSelectedCommand { get; set; }\n        public ICommand OnCaptureScreenCommand { get; set; }\n        public ICommand OnBackCommand { get; set; }\n\n        #endregion\n\n        #region Making Dummy Video List\n\n        private void GetVideoList()\n        {\n            VideoList = new ObservableCollection&lt;VideoItem>();\n\n            VideoList.Add(new VideoItem(\"Cam_01\", \"ms-appx:\/\/\/video.mp4\"));\n            VideoList.Add(new VideoItem(\"Cam_02\", \"ms-appx:\/\/\/video1.mp4\"));\n            VideoList.Add(new VideoItem(\"Cam_03\", \"ms-appx:\/\/\/video2.mp4\"));\n            VideoList.Add(new VideoItem(\"Cam_04\", \"ms-appx:\/\/\/video3.mp4\"));\n            VideoList.Add(new VideoItem(\"Cam_05\", \"ms-appx:\/\/\/video4.mp4\"));\n        }\n\n        #endregion\n\n    }\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above <strong>VideoListViewModel.cs<\/strong> class, I am performing operations like Video Selection, Take Screenshots.<\/li>\n\n\n\n<li><strong>OnVideoSelected() <\/strong>method is used for selecting video from the second bottom Collectionview and adding to the first CollectionView.<\/li>\n\n\n\n<li><strong>GetVideoList() <\/strong>method is preparing a list of local videos. We can also use <strong>remote media<\/strong> uri instead of local both will work.\n<ul class=\"wp-block-list\">\n<li>Add all five videos : \n<ul class=\"wp-block-list\">\n<li><strong>In Android<\/strong>, create a <strong>raw<\/strong> folder outside of the <strong>Resources<\/strong> folder and add all media files to there and make sure to set <strong>BUILD_ACTION<\/strong> to <strong>AndroidResource<\/strong>.<\/li>\n\n\n\n<li><strong>In iOS<\/strong>, add all media files to <strong>Resources<\/strong> folder and make sure to set <strong>BUILD_ACTION<\/strong> to <strong>BundleResource<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><strong>OnCaptureImageClick()<\/strong> <\/strong>method is used to capture the screenshot and save it to the local <strong>XamarinScreenshots<\/strong> folder.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4 &#8211; Setting up the Model<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>4.1 &#8211; Create a VideoItem.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing XFMediaElementSampleDemo.ViewModels;\n\nnamespace XFMediaElementSampleDemo.Models\n{\n    public class VideoItem : BaseViewModel\n    {\n        public string Title { get; set; }\n        public string VideoURL { get; set; }\n\n        \/\/public string VideoURL { get; set; } = \"ms-appx:\/\/\/video.mp4\";\n        \/\/public string VideoURL { get; set; } = \"https:\/\/sec.ch9.ms\/ch9\/5d93\/a1eab4bf-3288-4faf-81c4-294402a85d93\/XamarinShow_mid.mp4\";\n        \/\/public string VideoURL { get; set; } =    \"https:\/\/multiplatform-\" +\"f.akamaihd.net\/i\/multi\/will\/bunny\/big_buck_bunny_,640x360_400,640x36\" +\"0_700,640x360_1000,950x540_1500,.f4v.csmil\/master.m3u8\";\n\n        private bool _isSelected;\n        public bool IsSelected\n        {\n            get => _isSelected;\n            set\n            {\n                _isSelected = value;\n                OnPropertyChanged();\n            }\n        }\n\n        private bool _isStopMedia;\n        public bool IsStopMedia\n        {\n            get => _isStopMedia;\n            set\n            {\n                _isStopMedia = value;\n                OnPropertyChanged();\n            }\n        }\n\n        public VideoItem(string title, string videoURL)\n        {\n            Title = title;\n            VideoURL = videoURL;\n        }\n    }\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p style=\"font-size:25px\"><strong>How to take screenshots and store in file<\/strong> <strong>:<\/strong><\/p>\n\n\n\n<p>I have used <strong><a href=\"https:\/\/www.nuget.org\/packages\/PCLStorage\" target=\"_blank\" rel=\"noopener\" title=\"\">PCLStorage<\/a><\/strong> nuget package for taking screenshots and storing into local folder.<\/p>\n\n\n\n<p>PCLStorage provides a set of local file IO api&#8217;s for Xamarin Android, Xamarin iOS, Windows Phone etc.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Install&nbsp;PCLStorage&nbsp;nuget package<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-1024x563.png\" alt=\"PCLStorage\" class=\"wp-image-627\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-1024x563.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-300x165.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-768x422.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-1536x844.png 1536w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage-850x467.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/PCLStorage.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Create a FileHelper.cs class for managing file IO operations<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using PCLStorage;\nusing System;\nusing System.Collections.ObjectModel;\nusing System.IO;\nusing System.Threading.Tasks;\nusing Xamarin.Forms;\nusing XFMediaElementSampleDemo.Models;\nusing FileAccess = PCLStorage.FileAccess;\n\nnamespace XFMediaElementSampleDemo.Utiility\n{\n    public static class FileHelper\n    {\n        public const string FOLDER_NAME = \"XamarinScreenshots\";\n\n        public async static Task&lt;bool> IsFileExistAsync(this string fileName, IFolder rootFolder = null)\n        {\n            \/\/ get hold of the file system  \n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            ExistenceCheckResult folderexist = await folder.CheckExistsAsync(fileName);\n            \/\/ already run at least once, don't overwrite what's there  \n            if (folderexist == ExistenceCheckResult.FileExists)\n            {\n                return true;\n\n            }\n            return false;\n        }\n\n        public async static Task&lt;bool> IsFolderExistAsync(this string folderName, IFolder rootFolder = null)\n        {\n            \/\/ get hold of the file system  \n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            ExistenceCheckResult folderexist = await folder.CheckExistsAsync(folderName);\n            \/\/ already run at least once, don't overwrite what's there  \n            if (folderexist == ExistenceCheckResult.FolderExists)\n            {\n                return true;\n\n            }\n            return false;\n        }\n\n        public async static Task&lt;IFolder> CreateFolder(this string folderName, IFolder rootFolder = null)\n        {\n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            folder = await folder.CreateFolderAsync(folderName, CreationCollisionOption.ReplaceExisting);\n            return folder;\n        }\n\n        public async static Task&lt;IFile> CreateFile(this string filename, IFolder rootFolder = null)\n        {\n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            IFile file = await folder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);\n            return file;\n        }\n        public async static Task&lt;bool> WriteTextAllAsync(this string filename, string content = \"\", IFolder rootFolder = null)\n        {\n            IFile file = await filename.CreateFile(rootFolder);\n            await file.WriteAllTextAsync(content);\n            return true;\n        }\n\n        public async static Task&lt;string> ReadAllTextAsync(this string fileName, IFolder rootFolder = null)\n        {\n            string content = \"\";\n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            bool exist = await fileName.IsFileExistAsync(folder);\n            if (exist == true)\n            {\n                IFile file = await folder.GetFileAsync(fileName);\n                content = await file.ReadAllTextAsync();\n            }\n            return content;\n        }\n\n        public async static Task&lt;bool> DeleteFile(this string fileName, IFolder rootFolder = null)\n        {\n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n            bool exist = await fileName.IsFileExistAsync(folder);\n            if (exist == true)\n            {\n                IFile file = await folder.GetFileAsync(fileName);\n                await file.DeleteAsync();\n                return true;\n            }\n            return false;\n        }\n        public async static Task&lt;bool> SaveImage(this byte[] image, String fileName, IFolder rootFolder = null)\n        {\n            try\n            {\n                if (!await IsFolderExistAsync(FOLDER_NAME))\n                {\n                    await CreateFolder(FOLDER_NAME);\n                }\n\n                \/\/ get hold of the file system  \n                IFolder folder = await FileSystem.Current.LocalStorage.GetFolderAsync(FOLDER_NAME);\n\n                \/\/ create a file, overwriting any existing file  \n                IFile file = await folder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);\n\n                \/\/ populate the file with image data  \n                using (System.IO.Stream stream = await file.OpenAsync(FileAccess.ReadAndWrite))\n                {\n                    stream.Write(image, 0, image.Length);\n                }\n                return true;\n            }\n            catch (Exception ex)\n            {\n                return false;\n            }\n        }\n\n        public async static Task&lt;byte[]> LoadImage(this byte[] image, string fileName, IFolder rootFolder = null)\n        {\n            \/\/ get hold of the file system  \n            IFolder folder = rootFolder ?? FileSystem.Current.LocalStorage;\n\n            \/\/open file if exists  \n            IFile file = await folder.GetFileAsync(fileName);\n\n            \/\/load stream to buffer  \n            using (System.IO.Stream stream = await file.OpenAsync(FileAccess.ReadAndWrite))\n            {\n                long length = stream.Length;\n                byte[] streamBuffer = new byte[length];\n                stream.Read(streamBuffer, 0, (int)length);\n                return streamBuffer;\n            }\n        }\n\n        public async static Task&lt;ObservableCollection&lt;ScreenShotItem>> LoadAllImage(IFolder rootFolder = null)\n        {\n            if (!await IsFolderExistAsync(FOLDER_NAME))\n            {\n                await CreateFolder(FOLDER_NAME);\n            }\n\n            \/\/ get hold of the file system  \n            IFolder folder = await FileSystem.Current.LocalStorage.GetFolderAsync(FOLDER_NAME);\n\n            \/\/open file if exists  \n            var files = await folder.GetFilesAsync();\n\n            ObservableCollection&lt;ScreenShotItem> screenShots = new ObservableCollection&lt;ScreenShotItem>();\n\n            foreach (IFile file in files)\n            {\n                \/\/load stream to buffer\n                using (System.IO.Stream stream = await file.OpenAsync(FileAccess.ReadAndWrite))\n                {\n                    long length = stream.Length;\n                    byte[] streamBuffer = new byte[length];\n                    stream.Read(streamBuffer, 0, (int)length);\n\n                    screenShots.Add(new ScreenShotItem() { Title = file.Name, Screenshots = ImageSource.FromStream(() => new MemoryStream(streamBuffer)) });\n\n                    \/\/screenShots.Add(new ScreenShotItem() { Title = file.Name, Screenshots = ImageSource.FromFile(file.Path) });\n                }\n            }\n            return screenShots;\n        }\n\n        public static byte[] ReadStream(Stream input)\n        {\n            byte[] buffer = new byte[16 * 1024];\n            using (MemoryStream ms = new MemoryStream())\n            {\n                int read;\n                while ((read = input.Read(buffer, 0, buffer.Length)) > 0)\n                {\n                    ms.Write(buffer, 0, read);\n                }\n                return ms.ToArray();\n            }\n        }\n    }\n}<\/pre>\n\n\n\n<p style=\"font-size:25px\"><strong>Displaying all&nbsp;screenshots&nbsp;taken by app<\/strong> <strong>:<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Setting up the UI<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.1 &#8211; Create a ScreenShotsView.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n&lt;ContentPage\n    x:Class=\"XFMediaElementSampleDemo.Views.ScreenShotsView\"\n    xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    NavigationPage.HasNavigationBar=\"False\">\n\n    &lt;ContentPage.Content>\n        &lt;StackLayout Spacing=\"0\">\n\n            &lt;BoxView\n                BackgroundColor=\"#559173\"\n                HeightRequest=\"50\"\n                IsVisible=\"{OnPlatform Android=False,\n                                       iOS=True}\" \/>\n            &lt;Grid\n                Padding=\"10\"\n                BackgroundColor=\"#559173\"\n                ColumnDefinitions=\"*,*,*\"\n                HeightRequest=\"60\"\n                HorizontalOptions=\"FillAndExpand\">\n\n                &lt;Image\n                    Grid.Column=\"0\"\n                    HeightRequest=\"25\"\n                    HorizontalOptions=\"Start\"\n                    Source=\"left_arrow.png\"\n                    WidthRequest=\"25\">\n                    &lt;Image.GestureRecognizers>\n                        &lt;TapGestureRecognizer Command=\"{Binding OnBackCommand}\" \/>\n                    &lt;\/Image.GestureRecognizers>\n                &lt;\/Image>\n\n                &lt;Label\n                    Grid.Column=\"1\"\n                    FontSize=\"Medium\"\n                    HorizontalOptions=\"CenterAndExpand\"\n                    HorizontalTextAlignment=\"Center\"\n                    Text=\"Screenshot List\"\n                    TextColor=\"White\"\n                    VerticalOptions=\"Center\"\n                    VerticalTextAlignment=\"Center\" \/>\n            &lt;\/Grid>\n\n            &lt;Grid RowDefinitions=\"*,Auto\">\n\n                &lt;!--  Top Selected Video List  -->\n                &lt;CollectionView\n                    Grid.Row=\"0\"\n                    ItemSizingStrategy=\"MeasureFirstItem\"\n                    ItemsSource=\"{Binding ScreenShots}\"\n                    SelectionMode=\"None\"\n                    VerticalOptions=\"FillAndExpand\">\n\n                    &lt;CollectionView.ItemsLayout>\n                        &lt;GridItemsLayout Orientation=\"Vertical\" Span=\"2\" \/>\n                    &lt;\/CollectionView.ItemsLayout>\n\n                    &lt;!--  Empty View  -->\n                    &lt;CollectionView.EmptyView>\n                        &lt;StackLayout VerticalOptions=\"CenterAndExpand\">\n\n                            &lt;Label\n                                HorizontalOptions=\"CenterAndExpand\"\n                                HorizontalTextAlignment=\"Center\"\n                                Text=\"No Screenshot found\"\n                                TextColor=\"Black\"\n                                VerticalOptions=\"CenterAndExpand\"\n                                VerticalTextAlignment=\"Center\" \/>\n\n                        &lt;\/StackLayout>\n                    &lt;\/CollectionView.EmptyView>\n\n                    &lt;!--  Item Template  -->\n                    &lt;CollectionView.ItemTemplate>\n                        &lt;DataTemplate>\n                            &lt;StackLayout>\n                                &lt;Frame\n                                    Margin=\"5\"\n                                    Padding=\"2\"\n                                    BorderColor=\"Black\"\n                                    CornerRadius=\"0\"\n                                    HasShadow=\"False\"\n                                    HeightRequest=\"230\"\n                                    VerticalOptions=\"Start\">\n\n                                    &lt;StackLayout>\n\n                                        &lt;Label\n                                            HorizontalTextAlignment=\"Center\"\n                                            Text=\"{Binding Title}\"\n                                            TextColor=\"Black\" \/>\n\n                                        &lt;Image\n                                            Aspect=\"AspectFill\"\n                                            BackgroundColor=\"Black\"\n                                            HeightRequest=\"200\"\n                                            Source=\"{Binding Screenshots}\"\n                                            VerticalOptions=\"FillAndExpand\" \/>\n\n                                    &lt;\/StackLayout>\n                                &lt;\/Frame>\n                            &lt;\/StackLayout>\n                        &lt;\/DataTemplate>\n                    &lt;\/CollectionView.ItemTemplate>\n                &lt;\/CollectionView>\n            &lt;\/Grid>\n        &lt;\/StackLayout>\n    &lt;\/ContentPage.Content>\n&lt;\/ContentPage><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Setting up the ViewModel<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2.1 &#8211; Create a ScreenShotsViewModel.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing System.Collections.ObjectModel;\nusing System.Threading.Tasks;\nusing System.Windows.Input;\nusing Xamarin.Forms;\nusing XFMediaElementSampleDemo.Models;\nusing XFMediaElementSampleDemo.Utiility;\n\nnamespace XFMediaElementSampleDemo.ViewModels\n{\n    public class ScreenShotsViewModel : BaseViewModel\n    {\n\n        #region Constructor\n\n        public ScreenShotsViewModel()\n        {\n            OnBackCommand = new Command(async () => await OnBackClick());\n\n            _ = GetScreenShots();\n        }\n\n        #endregion\n\n        #region Handle Click Events\n\n        private async Task OnBackClick()\n        {\n            await App.Current.MainPage.Navigation.PopAsync();\n        }\n\n        #endregion\n\n        #region Properties\n\n        public ICommand OnBackCommand { get; set; }\n\n        private ObservableCollection&lt;ScreenShotItem> _screenShots = new ObservableCollection&lt;ScreenShotItem>();\n\n        public ObservableCollection&lt;ScreenShotItem> ScreenShots\n        {\n            get => _screenShots;\n\n            set\n            {\n                _screenShots = value;\n\n                OnPropertyChanged();\n            }\n        }\n        #endregion\n\n        #region Get Screen Shots\n\n        private async Task GetScreenShots()\n        {\n            ScreenShots = await FileHelper.LoadAllImage();\n        }\n\n        #endregion\n    }\n}<\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3 &#8211; Setting up the Model<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>3.1 &#8211; Create a ScreenShotItem.cs<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using System;\nusing Xamarin.Forms;\n\nnamespace XFMediaElementSampleDemo.Models\n{\n    public class ScreenShotItem\n    {\n        public string Title { get; set; }\n        public ImageSource Screenshots { get; set; }\n    }\n}<\/pre>\n\n\n\n<p>Now, We have completed the coding, Let\u2019s try to run the application.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Result <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1648\" style=\"aspect-ratio: 784 \/ 1648;\" width=\"784\" controls src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/MediaElementInXamarin.mov\"><\/video><\/figure>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code <strong><a href=\"https:\/\/github.com\/Alam-Ashraf\/XFMediaElementSampleDemo\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/strong><\/p>\n\n\n\n<p>Happy Coding!<strong> \ud83d\ude00<\/strong><\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>You may also like<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/12\/02\/flexlayout-in-net-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui-1024x731.png\" alt=\"FlexLayout in MAUI\" class=\"wp-image-402\" width=\"512\" height=\"366\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui-1024x731.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui-300x214.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui-768x548.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui-850x607.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/12\/HowToUseFlexLayoutInMaui.png 1238w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use FlexLayout in MAUI<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2022\/11\/30\/carouselview-with-indicatorview-maui\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-1024x996.png\" alt=\"CarouselView with IndicatorView\" class=\"wp-image-374\" width=\"512\" height=\"498\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-1024x996.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-300x292.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-768x747.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView-850x827.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2022\/11\/dotnetMAUICarouselViewWithIndicatorView.png 1234w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">.Net MAUI \u2013 The Latest CarouselView\u00a0with\u00a0IndicatorView<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>MediaElement in Xamarin Forms Community Toolkit is a view where we can play audio and video files. The media files (Audio \/ Video) can be in either remote or local and we can play those media files using uri. So In this article, I\u2019m going to show you how to use MediaElement in Xamarin Forms&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[42,1],"tags":[44,43,46,34],"class_list":["post-614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin-community-toolkit","category-xamarin","tag-how-to-take-screenshots","tag-mediaelement-in-xamarin-forms","tag-play-audio-video-in-xamarin","tag-xamarin-communitytoolkit"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":22,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/614\/revisions\/744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/631"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}