Xamarin开发如何根据Url类型（图片/视频）动态加载对应UI控件

这是XAML平台（WPF/MAUI/UWP等）针对不同数据对应不同展示模板场景的标准实现方案，性能和可维护性都最优：

步骤1：封装媒体数据模型（可选但推荐） #

先把单纯的Url字符串封装成带类型标识的模型，避免后续重复判断Url后缀：

public enum MediaType
{
    Image,
    Video
}

public class MediaItem
{
    public string Url { get; set; }
    public MediaType ContentType { get; set; }
}
// 你的UrlList改成List<MediaItem>类型即可，加载列表时可以提前根据Url后缀判断好ContentType

步骤2：实现模板选择器 #

继承平台对应的DataTemplateSelector类，实现模板选择逻辑：

注：MAUI的方法名为OnSelectTemplate，WPF/UWP为SelectTemplate，逻辑完全一致

public class MediaTemplateSelector : DataTemplateSelector
{
    // 声明两个可在XAML中赋值的模板属性
    public DataTemplate ImageTemplate { get; set; }
    public DataTemplate VideoTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is not MediaItem media) return null;
        
        // 直接根据提前判定的类型返回对应模板
        return media.ContentType switch
        {
            MediaType.Image => ImageTemplate,
            MediaType.Video => VideoTemplate,
            _ => null
        };

        // 如果你不想提前在模型里存类型，也可以在这里实时判断Url后缀
        // var ext = Path.GetExtension(media.Url).ToLowerInvariant();
        // var imageExts = new[] { ".jpg", ".jpeg", ".png", ".gif", ".webp" };
        // var videoExts = new[] { ".mp4", ".mov", ".webm", ".mkv" };
        // if (imageExts.Contains(ext)) return ImageTemplate;
        // if (videoExts.Contains(ext)) return VideoTemplate;
        // return null;
    }
}

步骤3：XAML中配置模板和绑定 #

首先在页面资源中声明选择器和对应模板：

<ContentPage.Resources>
    <!-- 替换成你自己的命名空间 -->
    <local:MediaTemplateSelector x:Key="MediaTemplateSelector">
        <!-- 图片模板 -->
        <local:MediaTemplateSelector.ImageTemplate>
            <DataTemplate>
                <Image Source="{Binding Url}"
                       Aspect="AspectFit"
                       HeightRequest="320" />
            </DataTemplate>
        </local:MediaTemplateSelector.ImageTemplate>
        <!-- 视频模板 -->
        <local:MediaTemplateSelector.VideoTemplate>
            <DataTemplate>
                <MediaElement Source="{Binding Url}"
                              Aspect="AspectFit"
                              HeightRequest="320"
                              ShowsPlaybackControls="True"
                              AutoPlay="False" />
            </DataTemplate>
        </local:MediaTemplateSelector.VideoTemplate>
    </local:MediaTemplateSelector>
</ContentPage.Resources>

最后给CollectionView绑定模板选择器即可：

<CollectionView 
    ItemsSource="{Binding UrlList}"
    ItemTemplate="{StaticResource MediaTemplateSelector}">
    <!-- 其余CollectionView配置按需添加 -->
</CollectionView>

轻量替代方案（不推荐大数据量使用） #

如果你的信息流Item数量很少，不想额外写Selector类，也可以用DataTrigger/转换器控制两个控件的可见性，缺点是每个Item会同时实例化Image和MediaElement两个控件，列表长了会有性能损耗：

<CollectionView ItemsSource="{Binding UrlList}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="{Binding Url}"
                       IsVisible="{Binding ContentType, Converter={StaticResource EnumEqualConverter}, ConverterParameter=Image}" />
                <MediaElement Source="{Binding Url}"
                              IsVisible="{Binding ContentType, Converter={StaticResource EnumEqualConverter}, ConverterParameter=Video}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

内容的提问来源于stack exchange，提问作者Amjad S.