When opening full screen of a CommunityToolkit MediaElement video playing in a CommunityToolkit popup the video is playing behind the popup.

Opening video player popup:

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);
    }
}

The video player:

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns=";
             xmlns:x=";
             xmlns: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=".mp4"
            HeightRequest="300"
            WidthRequest="400" />
    </VerticalStackLayout>
</toolkit:Popup>

Result:

• .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

Can this be fixed?

Thank you!

When opening full screen of a CommunityToolkit MediaElement video playing in a CommunityToolkit popup the video is playing behind the popup.

Opening video player popup:

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);
    }
}

The video player:

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup xmlns="http://schemas.microsoft/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft/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/videos/Teamwork_BALLON-BANDITTEN_Junior_OK_comp.mp4"
            HeightRequest="300"
            WidthRequest="400" />
    </VerticalStackLayout>
</toolkit:Popup>

Result:

• .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

Can this be fixed?

Thank you!

• maui
• maui-community-toolkit

3 Answers 3

For now I have solved it with Mopups: https://github/LuckyDucko/Mopups

Use ZIndex as shown below. Doesn't have to be 5 or 10, just know that the higher the number, the higher it is to the top (from the viewing perspective of the user). The more complex the layout, the more handy this becomes.

<toolkit:Popup xmlns="http://schemas.microsoft/dotnet/2021/maui" ... ZIndex="5"> <Label Text="{Binding VideoUrl}" ... /> <toolkit:MediaElement x:Name="mediaElement" ... ZIndex="10"/> </toolkit:Popup>

You can use the Opened and Closed events in popup to set the full screen opening.

<toolkit:Popup xmlns="http://schemas.microsoft/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft/dotnet/2022/maui/toolkit"
               x:Class="YourNamespace.VideoPlayer"
               x:Name="videoPlayerPopup"
               Opened="Popup_Opened"
               Closed="Popup_Closed"
               ZIndex="5">
    <VerticalStackLayout>
        <Label Text="{Binding VideoUrl}" VerticalOptions="Center" HorizontalOptions="Center" />
        <toolkit:MediaElement x:Name="mediaElement"
                              HandlerProperties.DisconnectPolicy="Manual"
                              Margin="0, 0, 0, 0"
                              ShouldAutoPlay="True"
                              ShouldShowPlaybackControls="True"
                              Source="https://example/video.mp4"
                              HeightRequest="300"
                              WidthRequest="400"
                              ZIndex="10" />
    </VerticalStackLayout>
</toolkit:Popup>

Then you need to set the code behind like this to handle the Opened and Closed Events.

using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Xaml;
using CommunityToolkit.Maui.Views;

namespace YourNamespace
{
    public partial class VideoPlayer : ContentPage
    {
        public VideoPlayer()
        {
            InitializeComponent();
        }

        private void Popup_Opened(object sender, EventArgs e)
        {
            // Enter fullscreen mode
            EnterFullScreenMode();
        }

        private void Popup_Closed(object sender, EventArgs e)
        {
            // Exit fullscreen mode
            ExitFullScreenMode();
        }

        private void EnterFullScreenMode()
        {
            videoPlayerPopup.BackgroundColor = Colors.Transparent;
            mediaElement.HeightRequest = Application.Current.MainPage.Height;
            mediaElement.WidthRequest = Application.Current.MainPage.Width;
        }

        private void ExitFullScreenMode()
        {
            videoPlayerPopup.BackgroundColor = Colors.White;
            mediaElement.HeightRequest = 300;
            mediaElement.WidthRequest = 400;
        }
    }
}