Maui Community Toolkit弹窗中MediaElement全屏播放异常求助

当使用CommunityToolkit弹窗承载MediaElement播放视频时，切换至全屏模式后，视频会显示在弹窗后方，无法正常展示全屏内容。

弹窗代码（C#） #

public partial class VideoPlayer : Popup
{
    public VideoPlayer(VideoPlayerViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;
        SetSize();
    }

    private void Popup_Closed(object sender, CommunityToolkit.Maui.Core.PopupClosedEventArgs e)
    {
        mediaElement.Handler?.DisconnectHandler();
    }

    private void SetSize()
    {
        DisplayInfo _displayInfo = DeviceDisplay.Current.MainDisplayInfo;
        var w = Convert.ToDouble((_displayInfo.Width / _displayInfo.Density) - 60);
        var h = Convert.ToDouble((_displayInfo.Height / _displayInfo.Density) * .50);
        videoPlayerPopup.Size = new Size(w, h);
    }

    // 全屏状态切换处理逻辑
    private void MediaElement_IsFullScreenChanged(object sender, EventArgs e)
    {
        if (mediaElement.IsFullScreen)
        {
            videoPlayerPopup.IsVisible = false;
        }
        else
        {
            videoPlayerPopup.IsVisible = true;
            mediaElement.Play();
        }
    }
}

弹窗XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MauiApp1.VideoPlayer"
             x:Name="videoPlayerPopup"
             Closed="Popup_Closed">
    <VerticalStackLayout>
        <Label 
            Text="{Binding VideoUrl}"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <toolkit:MediaElement x:Name="mediaElement"
            HandlerProperties.DisconnectPolicy="Manual"
            Margin="0, 0, 0, 0"
            ShouldAutoPlay="False"
            ShouldShowPlaybackControls="True"
            Source="https://sukiru-assets.s3.eu-central-1.amazonaws.com/videos/Teamwork_BALLON-BANDITTEN_Junior_OK_comp.mp4"
            HeightRequest="300"
            WidthRequest="400"
            IsFullScreenChanged="MediaElement_IsFullScreenChanged" />
    </VerticalStackLayout>
</toolkit:Popup>

问题表现 #

切换视频至全屏后，视频内容被弹窗遮挡，仅弹窗区域内的视频部分可见，其余视频内容显示在弹窗后方，无法正常全屏观看。

使用环境 #

-.NET 9.0.200
-CommunityToolkit.Maui 11.1.0
-CommunityToolkit.Maui.Core 11.1.0
-CommunityToolkit.Maui.MediaElement 6.0.1
-CommunityToolkit.Mvvm 8.4.0
-Microsoft.Maui.Controls 9.0.40

修复方案 #

这个问题是可以修复的，核心原因是MediaElement的全屏渲染层级与Popup的层级冲突，推荐以下几种解决方案：

方案1：监听全屏状态切换，动态隐藏/显示弹窗

通过监听MediaElement的IsFullScreenChanged事件，在进入全屏时隐藏弹窗，退出全屏时恢复弹窗显示。这种方法简单直接，无需修改整体布局结构。

• 进入全屏：设置videoPlayerPopup.IsVisible = false，让视频不受弹窗遮挡
• 退出全屏：恢复弹窗可见性，并重新播放视频（可根据需求调整）

方案2：改用Page承载MediaElement

如果弹窗的交互需求允许，可以将视频播放器从Popup迁移到独立的Page中。Page的全屏渲染层级不会受到弹窗的影响，从根源上避免层级冲突。

方案3：平台特定层级调整（进阶）

针对Android/iOS平台，可通过Handler获取原生控件调整视频播放器的窗口层级：

• Android：获取MediaElement对应的VideoView或ExoPlayer实例，将其附加到顶层窗口
• iOS：调整AVPlayerViewController的Window层级，使其高于弹窗的窗口
  这种方法需要编写平台特定代码，适合需要保留弹窗交互场景的复杂需求。

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