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.