如何通过Xamarin.MediaGallery区分图片/视频并实现对应展示？

问题1：视频能否转为字节数组传递 #

Xamarin.MediaGallery的PickFromLibrary方法完全支持选择视频，选中的视频可通过MediaFile对象获取文件流，进而转换为字节数组，逻辑和图片处理一致。

示例代码（选择媒体并转字节数组）：

var result = await MediaGallery.PickAsync(new PickMediaRequest
{
    SelectionLimit = 10,
    MediaTypes = MediaFileType.Image | MediaFileType.Video
});

if (!result.IsSuccessful) return;

var mediaItems = new List<MediaItem>();
foreach (var file in result.Files)
{
    using var stream = await file.OpenReadAsync();
    using var memoryStream = new MemoryStream();
    await stream.CopyToAsync(memoryStream);
    byte[] bytes = memoryStream.ToArray();
    
    mediaItems.Add(new MediaItem
    {
        Data = bytes,
        Type = file.Type
    });
}

// 跳转到EditPostPage并传递媒体列表
await Navigation.PushAsync(new EditPostPage(mediaItems));

自定义模型MediaItem用于存储媒体数据和类型：

public class MediaItem
{
    public byte[] Data { get; set; }
    public MediaType Type { get; set; }
}

问题2：区分媒体类型并分别展示 #

利用MediaFile.Type属性（MediaType枚举包含Image和Video）可直接判断媒体类型，在EditPostPage中通过DataTemplateSelector为不同类型媒体加载对应展示组件。

1. 创建MediaTemplateSelector #

public class MediaTemplateSelector : DataTemplateSelector
{
    public DataTemplate ImageTemplate { get; set; }
    public DataTemplate VideoTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var mediaItem = item as MediaItem;
        return mediaItem?.Type == MediaType.Image ? ImageTemplate : VideoTemplate;
    }
}

2. EditPostPage的XAML配置 #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourProjectNamespace"
             x:Class="YourProjectNamespace.EditPostPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="ImageTemplate">
            <Image Source="{Binding Data, Converter={StaticResource ByteArrayToImageConverter}}"
                   Aspect="AspectFit"/>
        </DataTemplate>
        <DataTemplate x:Key="VideoTemplate">
            <MediaElement Source="{Binding Data, Converter={StaticResource ByteArrayToMediaSourceConverter}}"
                          AutoPlay="False"
                          Aspect="AspectFit"/>
        </DataTemplate>
        <local:MediaTemplateSelector x:Key="MediaTemplateSelector"
                                     ImageTemplate="{StaticResource ImageTemplate}"
                                     VideoTemplate="{StaticResource VideoTemplate}"/>
        <local:ByteArrayToImageConverter x:Key="ByteArrayToImageConverter"/>
        <local:ByteArrayToMediaSourceConverter x:Key="ByteArrayToMediaSourceConverter"/>
    </ContentPage.Resources>

    <CarouselView ItemsSource="{Binding MediaItems}"
                  ItemTemplate="{StaticResource MediaTemplateSelector}"/>
</ContentPage>

3. 实现转换器 #

字节数组转ImageSource

public class ByteArrayToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is byte[] bytes && bytes.Length > 0)
        {
            return ImageSource.FromStream(() => new MemoryStream(bytes));
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

字节数组转MediaSource

public class ByteArrayToMediaSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is byte[] bytes && bytes.Length > 0)
        {
            var stream = new MemoryStream(bytes);
            return MediaSource.FromStream(() => stream);
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

4. EditPostPage后台代码 #

public partial class EditPostPage : ContentPage
{
    public ObservableCollection<MediaItem> MediaItems { get; set; }

    public EditPostPage(List<MediaItem> mediaItems)
    {
        InitializeComponent();
        MediaItems = new ObservableCollection<MediaItem>(mediaItems);
        BindingContext = this;
    }
}

内容的提问来源于stack exchange，提问作者bluedra