Xamarin中如何仅在VideoPath有值时显示MediaElement？

核心解决方案：通过绑定控制MediaElement的可见性与高度 #

方案1：在Model中添加计算属性（简洁高效） #

修改MessageModel，新增计算属性来动态判断视频状态并返回对应高度：

public class MessageModel : INotifyPropertyChanged
{
    public string Sender { get; set; }
    public string MessageText { get; set; }
    public string ImagePath { get; set; }

    private string _videoPath;
    public string VideoPath 
    { 
        get => _videoPath; 
        set 
        {
            _videoPath = value;
            OnPropertyChanged(nameof(VideoPath));
            // 触发计算属性的更新通知
            OnPropertyChanged(nameof(HasVideo));
            OnPropertyChanged(nameof(VideoHeightRequest));
        }
    }

    // 判断是否存在有效视频路径
    public bool HasVideo => !string.IsNullOrEmpty(VideoPath);
    // 根据视频状态返回对应高度
    public int VideoHeightRequest => HasVideo ? 100 : 0;

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后直接在XAML中绑定这些属性：

<xct:MediaElement Source="{Binding VideoPath}" AutoPlay="False" ShowsPlaybackControls="True" 
                  HeightRequest="{Binding VideoHeightRequest}" 
                  IsVisible="{Binding HasVideo}"/>

方案2：用DataTrigger在XAML中直接处理 #

无需修改Model，通过触发器判断VideoPath状态：
首先添加一个字符串非空判断转换器：

public class IsNotNullOrEmptyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return !string.IsNullOrEmpty(value as string);
    }

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

在页面资源中声明转换器：

<ContentPage.Resources>
    <local:IsNotNullOrEmptyConverter x:Key="IsNotNullOrEmptyConverter"/>
</ContentPage.Resources>

修改MediaElement的XAML代码：

<xct:MediaElement Source="{Binding VideoPath}" AutoPlay="False" ShowsPlaybackControls="True">
    <xct:MediaElement.Triggers>
        <!-- 视频路径为空时隐藏并设置高度为0 -->
        <DataTrigger TargetType="xct:MediaElement" Binding="{Binding VideoPath}" Value="{x:Null}">
            <Setter Property="HeightRequest" Value="0"/>
            <Setter Property="IsVisible" Value="False"/>
        </DataTrigger>
        <DataTrigger TargetType="xct:MediaElement" Binding="{Binding VideoPath}" Value="">
            <Setter Property="HeightRequest" Value="0"/>
            <Setter Property="IsVisible" Value="False"/>
        </DataTrigger>
        <!-- 视频路径有效时显示并设置高度 -->
        <DataTrigger TargetType="xct:MediaElement" Binding="{Binding VideoPath, Converter={StaticResource IsNotNullOrEmptyConverter}}" Value="True">
            <Setter Property="HeightRequest" Value="100"/>
            <Setter Property="IsVisible" Value="True"/>
        </DataTrigger>
    </xct:MediaElement.Triggers>
</xct:MediaElement>

替代显示方案 #

如果不想使用Xamarin Community Toolkit的MediaElement，可选择原生控件封装：

• Android：封装原生VideoView为自定义控件，通过BindableProperty绑定路径，仅当路径存在时加载显示
• iOS：封装AVPlayerViewController为自定义控件，同样通过绑定控制显示状态

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