Windows Universal App Fullscreen Button

Question

Some Apps in the Windows Store have a Fullscreen button additional to the minimize, maximize and close button in the Titlebar. This button looks similar to the exit Fullscreen button that every App has in the Titlebar if the Fullscreen is active. Is that a system control and if how can I use it in my C# Universal App?

Answer 1

You'll have to use the Window.SetTitleBar method to achieve your desired behavior. Therefore, you'll need to accomplish a few steps:

First, enable the view to extend into the title bar. Please note, that you can only set the left part of the title bar. The Minimize, Maximize and Close buttons will still be there:

CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

After you have set that, you call the Window.SetTitleBar method with an UIElement:

Window.Current.SetTitleBar(myTitleBar);

Where as myTitleBar could look like this:

<Border x:Name="myTitleBar">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!-- Title -->
        <TextBlock Grid.Column="0"
                   Text="..."/>

        <!-- Custom buttons attached to the right side -->
        <StackPanel Grid.Column="1"
                    Orientation="Horizontal">
            <Button x:Name="FullScreenButton"/>
            <!-- Use U+E740 FullScreen Icon for the button above -->
        </StackPanel>
    </Grid>
</Border

An extended guide by Marco Minerva (including a nice XAML behavior that will tweak this use-case even better) can be found here.

Answer 2

I have made a FullScreenModeTitleBarBehavior (along with a FullScreenModeTitle control) which might just do what you want.

The behavior needs to be attached to a your main Page and it allows you to specify the foreground and background colors of the TitleBar. If you need more colors you can simply add more properties to the behavior.

The way it works is that the behavior will move the Content out of the Page into the FulScreenModeTitle control which basically composes a custom TitleBar with the moved Content.

// Store the original main page content.
var mainPageContent = _mainPage.Content;
// Clear the content for now.
_mainPage.Content = null;

// Move the content of the main page to our title bar control.
_customTitleBar.SetPageContent(mainPageContent);
// Refill the content with our new title bar control.
_mainPage.Content = _customTitleBar;

You can find the full source code over here in GitHub. Also note that this solution was inspired by this particular sample from Microsoft's GitHub repository.

---

Some Issues I've found so far

You might have already noticed there's a gap between our custom full screen mode button and the minimize button. Unfortunately you cannot reduce it any further 'cause this much space is reserved by the system (check on SystemOverlayRightInset for more details). If you move the custom button any closer, the hit-testing will fail, which makes it unclickable.

Also I've found that if you use the custom button to exit from the full screen, those three system buttons will be dysfunctional until you double click the TitleBar to maximize the screen. This could be a bug. Fortunately, when the screen is in full screen mode, the maximize button will be replaced with a exit full screen button, so we can just hide our custom button and let the system handle the exit.