How to implement a full-screen button that honors light and dark modes

Question

How to implement a full-screen button that honors light and dark modes

BitSmithy 2,206

Hello,

I want to implement a Full-Screen button. I found in net any solutions, but they doesnt honors Dark Mode.

The button must be placed on app upper belt near minimize/maximize/close window buttons.

Could anyone tell how to implement full-screen button that honors Light and Dark modes in recomended way?

Accepted answer

0 additional answers

Your answer

Answer 1

Junjie Zhu - MSFT 21,646

Hello @BitSmithy ,

Welcome to Microsoft Q&A!

Here is an example of using a custom title bar.

It is recommended to use the system's button to exit the full screen mode, the button in this sample will be hidden when full screen.

 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="32"/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Grid x:Name="AppTitleBar" Background="Transparent">
         <Grid.ColumnDefinitions>
             <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
             <ColumnDefinition/>
             <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
         </Grid.ColumnDefinitions>
     </Grid>
     <StackPanel Orientation="Horizontal"
                 VerticalAlignment="Center" 
                 HorizontalAlignment="Right" 
                 Height="32"
                 Grid.Column="0">
         <Button x:Name="fullScreenbtn" Content="FullScreen" Click="Button_Click" Width="90"/>
         <Rectangle Width="140" Height="32"/>
     </StackPanel>
 </Grid>

public MainPage()
{
    this.InitializeComponent();
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    this.SizeChanged += MainPage_SizeChanged;
    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);
}
private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var view = ApplicationView.GetForCurrentView();
    if (view.IsFullScreenMode)
    {
        fullScreenbtn.Visibility = Visibility.Collapsed;
    }
    else
    {
        fullScreenbtn.Visibility = Visibility.Visible;
    }
}
private void Button_Click(object sender, RoutedEventArgs e)
{
         
    var view = ApplicationView.GetForCurrentView();
    if (view.IsFullScreenMode)
    {
        view.ExitFullScreenMode();
        ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.Auto;
        fullScreenbtn.Visibility = Visibility.Visible;
              
    }
    else
    {
        if (view.TryEnterFullScreenMode())
        {
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.FullScreen;
            fullScreenbtn.Visibility= Visibility.Collapsed;               
        }
    }
}

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

BitSmithy 2,206 Reputation points

2024-10-25T07:31:25.9233333+00:00
This solution looks fine, but i found one problem. When move pointer over right side of the button it doesnt react. When I move the pointer over left side of the button it reacts and can be clicked.

It is possible to fix this, ugly behavior?

Note:

For tests I modifed slighty your code adding symbol icon to the button.

<SymbolIcon Symbol="FullScreen" RenderTransformOrigin="16.1,0.442"/>

Junjie Zhu - MSFT 21,646

Hello @BitSmithy ,

I can reproduce the same behavior. The reason is that the system drawing area width is 188, which is larger than the actual display width. The area on the left cannot respond to events. I haven't found a good solution yet.

RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset); // the width is 188

CoreApplicationViewTitleBar coreTitleBar;
public MainPage()
{
    this.InitializeComponent();
    coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;
    this.SizeChanged += MainPage_SizeChanged;
   
    Window.Current.SetTitleBar(AppTitleBar);
}
private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
 //188 here
}

BitSmithy 2,206 Reputation points

2024-10-28T15:59:20.8833333+00:00
Code with RightPaddingColumn.Width doesnt work for me (even if I put column wdith = 188 in XAML the button is covered by caption buttons area - I dont understand the reason). I found that if I change your rectangle defined in XAML to

<Rectangle x:Name="CaptionButtonsArea" Height="32"/>

and next I add code behind a line

CaptionButtonsArea.Width = coreTitleBar.SystemOverlayRightInset;

All starts to work, but there are limitations:

This is not compatibile with right-to-left layouts (there is needed some extra code to make it compatibile)

Full screen button doesnt looks integrated with caption buttons - it is placed to much space from caption buttons.

Is there any way to fix point 2 of above limitations?
Junjie Zhu - MSFT 21,646 Reputation points

2024-10-29T02:19:13.0266667+00:00

Hello @BitSmithy ,

This is not compatibile with right-to-left layouts (there is needed some extra code to make it compatibile)

"right-to-left layouts," Do you mean the maximize and minimize buttons are in the upper left corner?

Full screen button doesnt looks integrated with caption buttons - it is placed to much space from caption buttons.

I found a previous discussion about this question, and the full screen buttons in the solution are also a bit far from the native maximize and minimize buttons.

Thank you.
BitSmithy 2,206 Reputation points

2024-10-29T10:57:31.1966667+00:00

Could you confirm that it is impossible to make full screen button integrated visually with caption buttons in UWP?

There are apps in Windows Store which have buttons integrated visually with caption buttons. For example Netflix app has button "..." integrated visually with caption buttons.

If it is possible in other technologies (for example in WINUI3) please tell me these technologies.
Junjie Zhu - MSFT 21,646 Reputation points

2024-10-31T08:54:48.99+00:00

Hello @BitSmithy ,

Apps like Netflix usually have their own UI, rather than modifying the native Windows UI. Currently, the native UI of UWP and WinUI3 cannot achieve the effect you want, and you may need to redesign the UI from the bottom up. I have no experience in this, sorry.

If you want more in-depth technical support, you may need to open a paid ticket.

Thank you.
BitSmithy 2,206 Reputation points

2024-11-04T08:37:42.2433333+00:00

Thanks for your effort. Now I know the limitations.

Share via

How to implement a full-screen button that honors light and dark modes

0 additional answers

Your answer