RuntimeImage to ImageSource converters

src/MAUI/Maui.Samples/Converters/RuntimeImageToImageSourceConverter.cs

@@ -0,0 +1,21 @@
+using System.Globalization;
+using Esri.ArcGISRuntime.UI;
+
+namespace ArcGIS.Converters;
+
+internal class RuntimeImageToImageSourceConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is RuntimeImage runtimeImage)
+        {
+            return Esri.ArcGISRuntime.Maui.RuntimeImageExtensions.ToImageSource(runtimeImage);
+        }
+        return null;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/MAUI/Maui.Samples/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml

@@ -2,10 +2,15 @@
 <ContentPage x:Class="ArcGIS.Samples.ReadShapefileMetadata.ReadShapefileMetadata"
              xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converters="clr-namespace:ArcGIS.Converters"
              xmlns:controls="clr-namespace:Microsoft.Maui.Controls;assembly=Microsoft.Maui.Controls"
              xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
              xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Maui;assembly=Esri.ArcGISRuntime.Maui">
 
+    <ContentPage.Resources>
+        <converters:RuntimeImageToImageSourceConverter x:Key="RuntimeImageToImageSource" />
+    </ContentPage.Resources>
+
     <Grid Style="{DynamicResource EsriSampleContainer}">
         <esriUI:MapView x:Name="MyMapView" Style="{DynamicResource EsriSampleGeoView}" />
         <Border x:Name="ControlPanel" Style="{DynamicResource EsriSampleControlPanel}">
@@ -25,7 +30,8 @@
                            LineBreakMode="WordWrap"
                            MaximumWidthRequest="400"
                            Text="{Binding Summary}" />
-                    <Image x:Name="ShapefileThumbnailImage" HorizontalOptions="Start" />
+                    <Image HorizontalOptions="Start"
+                           Source="{Binding Thumbnail, Converter={StaticResource RuntimeImageToImageSource}}" />
                     <Label FontAttributes="Bold"
                            FontSize="Medium"
                            HorizontalOptions="Start"

src/MAUI/Maui.Samples/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml.cs

@@ -47,24 +47,6 @@ private async Task Initialize()
                 ShapefileInfo fileInfo = myShapefile.Info;
                 InfoList.BindingContext = fileInfo;
 
-                // Read the thumbnail image data into a byte array.
-                Stream imageStream = await fileInfo.Thumbnail.GetEncodedBufferAsync();
-                byte[] imageData = new byte[imageStream.Length];
-                imageStream.ReadExactly(imageData);
-
-                // Create a new image source from the thumbnail data.
-                ImageSource streamImageSource = ImageSource.FromStream(() => new MemoryStream(imageData));
-
-                // Create a new image to display the thumbnail.
-                var image = new Image()
-                {
-                    Source = streamImageSource,
-                    Margin = new Thickness(10)
-                };
-
-                // Show the thumbnail image in a UI control.
-                ShapefileThumbnailImage.Source = image.Source;
-
                 // Create a feature layer to display the shapefile.
                 var newFeatureLayer = new FeatureLayer(myShapefile);
                 await newFeatureLayer.LoadAsync();

src/MAUI/Maui.Samples/Samples/Map/CreateDynamicBasemapGallery/CreateDynamicBasemapGallery.xaml

@@ -2,10 +2,16 @@
 <ContentPage x:Class="ArcGIS.Samples.CreateDynamicBasemapGallery.CreateDynamicBasemapGallery"
              xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converters="clr-namespace:ArcGIS.Converters"
              xmlns:calcite="http://schemas.esri.com/calcite/2024"
              xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
              xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Maui;assembly=Esri.ArcGISRuntime.Maui"
              xmlns:mapping="clr-namespace:Esri.ArcGISRuntime.Mapping;assembly=Esri.ArcGISRuntime">
+
+    <ContentPage.Resources>
+        <converters:RuntimeImageToImageSourceConverter x:Key="RuntimeImageToImageSource" />
+    </ContentPage.Resources>
+
     <Grid>
         <esriUI:MapView x:Name="MyMapView" />
         <Button x:Name="ShowGalleryButton"
@@ -51,7 +57,7 @@
                             <Image HeightRequest="{OnIdiom Default=200,
                                                            Phone=150}"
                                    HorizontalOptions="Start"
-                                   Source="{Binding Thumbnail.Source}" />
+                                   Source="{Binding Thumbnail, Converter={StaticResource RuntimeImageToImageSource}}" />
                         </StackLayout>
                     </DataTemplate>
                 </CollectionView.ItemTemplate>

src/MAUI/Maui.Samples/Samples/Map/DownloadPreplannedMap/DownloadPreplannedMap.xaml

@@ -1,10 +1,15 @@
 <ContentPage x:Class="ArcGIS.Samples.DownloadPreplannedMap.DownloadPreplannedMap"
              xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:converters="clr-namespace:ArcGIS.Converters"
              xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Maui;assembly=Esri.ArcGISRuntime.Maui"
              xmlns:esriOffline="clr-namespace:Esri.ArcGISRuntime.Tasks.Offline;assembly=Esri.ArcGISRuntime"
              xmlns:resources="clr-namespace:ArcGIS.Resources">
 
+    <ContentPage.Resources>
+        <converters:RuntimeImageToImageSourceConverter x:Key="RuntimeImageToImageSource" />
+    </ContentPage.Resources>
+
     <Grid Style="{DynamicResource EsriSampleContainer}">
         <esriUI:MapView x:Name="MyMapView" Style="{DynamicResource EsriSampleGeoView}" />
         <Border Style="{DynamicResource EsriSampleControlPanel}">
@@ -26,7 +31,7 @@
                                     </Grid.ColumnDefinitions>
                                     <Image Grid.RowSpan="2"
                                            HeightRequest="40"
-                                           Source="{Binding PortalItem.Thumbnail.Source.AbsoluteUri}"
+                                           Source="{Binding PortalItem.Thumbnail, Converter={StaticResource RuntimeImageToImageSource}}"
                                            WidthRequest="60" />
                                     <Label Grid.Column="1"
                                            Margin="5,0"

src/MAUI/Maui.Samples/Samples/MapView/TakeScreenshot/TakeScreenshot.xaml.cs

@@ -42,16 +42,13 @@ private async void OnTakeScreenshotClicked(object sender, EventArgs e)
                 await WaitForRenderCompleteAsync(MyMapView);
 
                 // Export the image from the map view.
-                RuntimeImage exportedImage = await MyMapView.ExportImageAsync();
+                RuntimeImage image = await MyMapView.ExportImageAsync();
 
-                // Create image bitmap by getting stream from the exported image.
-                var buffer = await exportedImage.GetEncodedBufferAsync();
-                byte[] data = new byte[buffer.Length];
-                buffer.ReadExactly(data);
-                var bitmap = ImageSource.FromStream(() => new MemoryStream(data));
+                // Convert the image to a displayable format.
+                ImageSource displayImage = await Esri.ArcGISRuntime.Maui.RuntimeImageExtensions.ToImageSourceAsync(image);
 
                 // Add elements into the layout.
-                ScreenshotImage.Source = bitmap;
+                ScreenshotImage.Source = displayImage;
 
                 ScreenshotView.IsVisible = true;
             }

src/MAUI/Maui.Samples/Samples/Symbology/SymbolsFromMobileStyle/SymbolsFromMobileStyle.xaml.cs

@@ -95,10 +95,7 @@ private async Task ReadMobileStyle(string stylePath)
                     RuntimeImage swatch = await multiLayerSym.CreateSwatchAsync(30, 30, 96, Color.Transparent);
 
                     // Create an image source from the swatch.
-                    Stream imageBuffer = await swatch.GetEncodedBufferAsync();
-                    byte[] imageData = new byte[imageBuffer.Length];
-                    imageBuffer.ReadExactly(imageData);
-                    ImageSource symbolImage = ImageSource.FromStream(() => new MemoryStream(imageData));
+                    ImageSource symbolImage = await RuntimeImageExtensions.ToImageSourceAsync(swatch);
 
                     // Create a symbol layer info object to represent the symbol in the list.
                     // The symbol key will be used to retrieve the symbol from the style.

src/WPF/WPF.Viewer/Converters/RuntimeImageToImageSourceAsyncConverter.cs

@@ -0,0 +1,55 @@
+using Esri.ArcGISRuntime.UI;
+using System;
+using System.ComponentModel;
+using System.Globalization;
+using System.Threading.Tasks;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace ArcGIS.Converters
+{
+    public class RuntimeImageToImageSourceAsyncConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is RuntimeImage runtimeImage)
+            {
+                return new RuntimeImageToImageSourceTask(runtimeImage);
+            }
+            return null;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+
+    public class RuntimeImageToImageSourceTask : INotifyPropertyChanged
+    {
+        private ImageSource _imageSource;
+
+        public RuntimeImageToImageSourceTask(RuntimeImage runtimeImage)
+        {
+            _imageSource = null;
+            _ = SetImageSourceAsync(runtimeImage);
+        }
+
+        private async Task SetImageSourceAsync(RuntimeImage runtimeImage)
+        {
+            ImageSource = await runtimeImage.ToImageSourceAsync();
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+
+        public ImageSource ImageSource
+        {
+            get => _imageSource;
+            private set
+            {
+                _imageSource = value;
+                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImageSource)));
+            }
+        }
+    }
+}

src/WPF/WPF.Viewer/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml

@@ -1,7 +1,13 @@
 <UserControl x:Class="ArcGIS.WPF.Samples.ReadShapefileMetadata.ReadShapefileMetadata"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013">
+             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
+             xmlns:converters="clr-namespace:ArcGIS.Converters">
+
+    <UserControl.Resources>
+        <converters:RuntimeImageToImageSourceAsyncConverter x:Key="RuntimeImageAsyncConverter"/>
+    </UserControl.Resources>
+
     <Grid>
         <esri:MapView x:Name="MyMapView" />
         <Border Width="300" Style="{StaticResource BorderStyle}">
@@ -28,11 +34,12 @@
                            Margin="5"
                            Text="{Binding Summary}"
                            TextWrapping="Wrap" />
-                <Image x:Name="ShapefileThumbnailImage"
-                       Grid.Row="2"
+                <Image Grid.Row="2"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
-                       Margin="5" />
+                       Margin="5"
+                       DataContext="{Binding Thumbnail, Converter={StaticResource RuntimeImageAsyncConverter}}"
+                       Source="{Binding ImageSource}"/>
                 <TextBlock Grid.Row="3"
                            Grid.Column="0"
                            Margin="5"

src/WPF/WPF.Viewer/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml.cs

@@ -51,9 +51,6 @@ private async Task Initialize()
                 ShapefileInfo fileInfo = myShapefile.Info;
                 InfoPanel.DataContext = fileInfo;
 
-                // Display the shapefile thumbnail in an image control
-                ShapefileThumbnailImage.Source = await RuntimeImageExtensions.ToImageSourceAsync(fileInfo.Thumbnail);
-
                 // Create a feature layer to display the shapefile
                 FeatureLayer newFeatureLayer = new FeatureLayer(myShapefile);
                 await newFeatureLayer.LoadAsync();

src/WPF/WPF.Viewer/Samples/Map/CreateDynamicBasemapGallery/CreateDynamicBasemapGallery.xaml

@@ -1,7 +1,13 @@
 <UserControl x:Class="ArcGIS.WPF.Samples.CreateDynamicBasemapGallery.CreateDynamicBasemapGallery"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013">
+             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
+             xmlns:converters="clr-namespace:ArcGIS.Converters">
+
+    <UserControl.Resources>
+        <converters:RuntimeImageToImageSourceAsyncConverter x:Key="RuntimeImageAsyncConverter"/>
+    </UserControl.Resources>
+
     <Grid>
         <esri:MapView x:Name="MyMapView" />
         <Border Style="{StaticResource BorderStyle}">
@@ -16,7 +22,8 @@
                                     <Label Content="{Binding StyleName}" FontWeight="Bold" />
                                     <Image Height="125"
                                            HorizontalAlignment="Left"
-                                           Source="{Binding Thumbnail.Source}" />
+                                           DataContext="{Binding Thumbnail, Converter={StaticResource RuntimeImageAsyncConverter}}"
+                                           Source="{Binding ImageSource}" />
                                 </StackPanel>
                             </DataTemplate>
                         </ListView.ItemTemplate>

src/WPF/WPF.Viewer/Samples/Map/DownloadPreplannedMap/DownloadPreplannedMap.xaml

@@ -1,7 +1,13 @@
 <UserControl x:Class="ArcGIS.WPF.Samples.DownloadPreplannedMap.DownloadPreplannedMap"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013">
+             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
+             xmlns:converters="clr-namespace:ArcGIS.Converters">
+
+    <UserControl.Resources>
+        <converters:RuntimeImageToImageSourceAsyncConverter x:Key="RuntimeImageAsyncConverter"/>
+    </UserControl.Resources>
+
     <Grid>
         <esri:MapView x:Name="MyMapView" />
         <Border Style="{StaticResource BorderStyle}">
@@ -28,7 +34,8 @@
                                 <Image Grid.RowSpan="2"
                                        Height="70"
                                        Margin="-10,2,2,2"
-                                       Source="{Binding PortalItem.ThumbnailUri}"
+                                       DataContext="{Binding PortalItem.Thumbnail, Converter={StaticResource RuntimeImageAsyncConverter}}"
+                                       Source="{Binding ImageSource}"
                                        Stretch="UniformToFill" />
                                 <TextBlock Grid.Column="1"
                                            Margin="10,0"

src/WinUI/ArcGIS.WinUI.Viewer/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml

@@ -1,9 +1,11 @@
 <UserControl x:Class="ArcGIS.WinUI.Samples.ReadShapefileMetadata.ReadShapefileMetadata"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
+             xmlns:data="using:Esri.ArcGISRuntime.Data"
+             xmlns:esriUI="using:Esri.ArcGISRuntime.UI"
+             xmlns:esriControls="using:Esri.ArcGISRuntime.UI.Controls">
     <Grid>
-        <esriUI:MapView x:Name="MyMapView" />
+        <esriControls:MapView x:Name="MyMapView" />
         <Border Style="{StaticResource BorderStyle}">
             <Grid x:Name="InfoPanel">
                 <Grid.RowDefinitions>
@@ -27,11 +29,11 @@
                            Grid.ColumnSpan="2"
                            Text="{Binding Summary}"
                            TextWrapping="Wrap" />
-                <Image x:Name="ShapefileThumbnailImage"
-                       Grid.Row="2"
+                <Image Grid.Row="2"
                        Grid.Column="0"
                        Grid.ColumnSpan="2"
-                       Margin="10" />
+                       Margin="10"
+                       Source="{x:Bind esriUI:RuntimeImageExtensions.ToImageSource(((data:ShapefileInfo)InfoPanel.DataContext).Thumbnail), Mode=OneWay}"/>
                 <TextBlock Grid.Row="3"
                            Grid.Column="0"
                            VerticalAlignment="Center"

src/WinUI/ArcGIS.WinUI.Viewer/Samples/Data/ReadShapefileMetadata/ReadShapefileMetadata.xaml.cs

@@ -10,7 +10,6 @@
 using ArcGIS.Samples.Managers;
 using Esri.ArcGISRuntime.Data;
 using Esri.ArcGISRuntime.Mapping;
-using Esri.ArcGISRuntime.UI;
 using System;
 using System.Threading.Tasks;
 
@@ -50,9 +49,6 @@ private async Task Initialize()
                 ShapefileInfo fileInfo = myShapefile.Info;
                 InfoPanel.DataContext = fileInfo;
 
-                // Display the shapefile thumbnail in an image control
-                ShapefileThumbnailImage.Source = await RuntimeImageExtensions.ToImageSourceAsync(fileInfo.Thumbnail);
-
                 // Create a feature layer to display the shapefile
                 FeatureLayer newFeatureLayer = new FeatureLayer(myShapefile);
                 await newFeatureLayer.LoadAsync();

src/WinUI/ArcGIS.WinUI.Viewer/Samples/Map/CreateDynamicBasemapGallery/CreateDynamicBasemapGallery.xaml

@@ -2,22 +2,24 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:esri="using:Esri.ArcGISRuntime"
-             xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
+             xmlns:esriUI="using:Esri.ArcGISRuntime.UI"
+             xmlns:esriControls="using:Esri.ArcGISRuntime.UI.Controls"
+             xmlns:mapping="using:Esri.ArcGISRuntime.Mapping">
     <Grid>
-        <esriUI:MapView x:Name="MyMapView" />
+        <esriControls:MapView x:Name="MyMapView" />
         <Border Style="{StaticResource BorderStyle}">
             <StackPanel>
                 <StackPanel Margin="5" Spacing="5">
                     <ListView x:Name="BasemapStyleGallery"
                               MaxHeight="500"
                               SelectionMode="Single">
                         <ListView.ItemTemplate>
-                            <DataTemplate>
+                            <DataTemplate x:DataType="mapping:BasemapStyleInfo">
                                 <StackPanel Margin="5">
                                     <TextBlock FontWeight="Bold" Text="{Binding StyleName}" />
                                     <Image Height="150"
                                            HorizontalAlignment="Left"
-                                           Source="{Binding Thumbnail.Source}" />
+                                           Source="{x:Bind esriUI:RuntimeImageExtensions.ToImageSource(Thumbnail)}" />
                                 </StackPanel>
                             </DataTemplate>
                         </ListView.ItemTemplate>