How can I set a control/element to full screen in WinUI3

Question

I'm using MediaPlayerElement to play video, but there is no full screen button in the MediaTransportControls(but it does exist in UWP). So I think, maybe I can set the MediaPlayerElement or it's parent element to full screen. I tried the ZIndex and Heigth/Width properties for the element, but none of them has any effect. There is too little information about the WinUI3. Is anybody can tell me a solution. Thanks very much.

Answer 1

As for adding a full screen button, It would be possible to copy from template of UWP MediaPlayerElement and register the event to the full screen button in the template, or add a button to the CommandBar in MediaTransportControls.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="CSWinUI3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CSWinUI3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:sys="using:System" Title="CSWinUI3">

    <Grid x:Name="mainGrid">
        <Grid x:Name="subGrid" Background="Green">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition />
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition />
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>

            <MediaPlayerElement Source="ms-appx:///q.mp4" AreTransportControlsEnabled="True"
                            Grid.Column="1"
                            Grid.Row="1" >
                <MediaPlayerElement.TransportControls>
                    <MediaTransportControls  Loaded="MediaTransportControls_Loaded"/>
                </MediaPlayerElement.TransportControls>
            </MediaPlayerElement>
        </Grid>
    </Grid>
</Window>

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;

using System;
using System.Linq;
using System.Collections.Generic;

namespace CSWinUI3
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            this.AppWindow.Resize(new Windows.Graphics.SizeInt32(400, 300));
            this.AppWindow.SetPresenter(Microsoft.UI.Windowing.AppWindowPresenterKind.Default);
        }

        private void MediaTransportControls_Loaded(object sender, RoutedEventArgs e)
        {
            const string NAME_CommandBar = "MediaControlsCommandBar";
            const string NAME_FullWindowButton = "FullWindowButton";

            var mtc = (MediaTransportControls)sender;

            var commandBar = GetChildren(mtc)
                .OfType<Microsoft.UI.Xaml.Controls.CommandBar>()
                .FirstOrDefault(cbar => cbar.Name == NAME_CommandBar);

            var player = GetParent(mtc).OfType<MediaPlayerElement>().FirstOrDefault();

            if (commandBar == null || player == null)
            {
                return;
            }

            if (VisualTreeHelper.GetParent(player) is not Grid parentGrid)
            {
                return;
            }

            List<AppBarButton> buttons
                = commandBar
                .PrimaryCommands
                .Union(commandBar.SecondaryCommands)
                .OfType<AppBarButton>().ToList();

            if (buttons.Any(btn => (btn.Name == NAME_FullWindowButton) || (btn.Icon is SymbolIcon icon && icon.Symbol == Symbol.FullScreen)))
            {
                return;
            }

            AppBarButton fullScreenButton = new AppBarButton();
            fullScreenButton.Name = NAME_FullWindowButton;
            fullScreenButton.Icon = new SymbolIcon(Symbol.FullScreen);
            fullScreenButton.Visibility = Visibility.Visible;
            fullScreenButton.Click += (s, e) =>
            {
                if (this.AppWindow.Presenter.Kind == Microsoft.UI.Windowing.AppWindowPresenterKind.FullScreen)
                {
                    this.AppWindow.SetPresenter(Microsoft.UI.Windowing.AppWindowPresenterKind.Default);
                    this.mainGrid.Children.Remove(player);
                    parentGrid.Children.Add(player);

                }
                else
                {
                    this.AppWindow.SetPresenter(Microsoft.UI.Windowing.AppWindowPresenterKind.FullScreen);
                    parentGrid.Children.Remove(player);
                    this.mainGrid.Children.Add(player);
                }
            };

            commandBar.PrimaryCommands.Add(fullScreenButton);
        }

        private System.Collections.Generic.IEnumerable<DependencyObject> GetParent(DependencyObject d)
        {
            while (null != (d = VisualTreeHelper.GetParent(d)))
            {
                yield return d;
            }
        }
        private System.Collections.Generic.IEnumerable<DependencyObject> GetChildren(DependencyObject d)
        {
            int count = VisualTreeHelper.GetChildrenCount(d);
            for (int i = 0; i < count; i++)
            {
                var child = VisualTreeHelper.GetChild(d, i);
                yield return d;
                foreach (var subchild in GetChildren(child))
                {
                    yield return subchild;
                }
            }
        }
    }
}

Answer 2

You can use Microsoft.UI.Windowing.AppWindowPresenterKind.FullScreen

I called it in the WinUI3_MediaEngine sample (SetFullScreen function in CMediaEngine.cs)