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

C CB 85 Reputation points
2024-06-04T02:40:04.7733333+00:00

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.

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
743 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,551 questions
{count} votes

Accepted answer
  1. gekka 7,831 Reputation points MVP
    2024-06-04T09:18:34.4333333+00:00

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

1 additional answer

Sort by: Most helpful
  1. Castorix31 82,666 Reputation points
    2024-06-04T06:49:12.5233333+00:00

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

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