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/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>

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

@@ -1,6 +1,8 @@
 <UserControl x:Class="ArcGIS.WinUI.Samples.DownloadPreplannedMap.DownloadPreplannedMap"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:runtimeUI="using:Esri.ArcGISRuntime.UI"
+             xmlns:offline="using:Esri.ArcGISRuntime.Tasks.Offline"
              xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
     <Grid>
         <esriUI:MapView x:Name="MyMapView" />
@@ -19,17 +21,19 @@
                            Text="Select an area, then download it." />
                 <ListView x:Name="AreasList" SelectionChanged="AreasList_SelectionChanged">
                     <ListView.ItemTemplate>
-                        <DataTemplate>
+                        <DataTemplate x:DataType="offline:PreplannedMapArea">
                             <Grid>
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="auto" />
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
+
                                 <Image Grid.RowSpan="2"
                                        Height="70"
                                        Margin="-10,2,2,2"
-                                       Source="{Binding PortalItem.ThumbnailUri}"
+                                       Source="{x:Bind runtimeUI:RuntimeImageExtensions.ToImageSource(PortalItem.Thumbnail), Mode=OneWay}"
                                        Stretch="UniformToFill" />
+
                                 <TextBlock Grid.Column="1"
                                            Margin="10,0"
                                            VerticalAlignment="Center"

src/WinUI/ArcGIS.WinUI.Viewer/Samples/MapView/TakeScreenshot/TakeScreenshot.xaml.cs

@@ -49,10 +49,10 @@ private async void OnTakeScreenshotButtonClicked(object sender, RoutedEventArgs
                 RuntimeImage image = await MyMapView.ExportImageAsync();
 
                 // Convert the image to a displayable format.
-                ImageSource exportedImage = await image.ToImageSourceAsync();
+                ImageSource displayImage = await image.ToImageSourceAsync();
 
                 // Set the screenshot view to the new exported image.
-                ScreenshotView.Source = exportedImage;
+                ScreenshotView.Source = displayImage;
 
                 // Make the screenshot view visible in the UI.
                 ScreenshotView.Visibility = Visibility.Visible;