FullscreenBehaviour for Mahapps

Question

How to add a dynamic switching ability from fullscreen to windowed mode and vice versa to Mahapps MetroWindow?

Starting with Normal Window

and after switching to fullscreen the top right window Buttons (Minimize/Maximize/Close) are still visible (but they shouldn't be visible as well as the title bar). The reserved space for the title bar seems to be still there.

The other way round initially from fullscreen state (no buttons, except the Hello button in the middle and no title bar => as expected)

... but when switching back to normal window state the title is back again but the top left buttons are missing.

Am I doing something wrong here in the code? I used an derrived Behaviour. The interesting part that is executed when switching is this:

    private static void OnIsFullscreenChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var window = (MetroWindow)sender;

        var oldValue = (bool)e.OldValue;
        var newValue = (bool)e.NewValue;

        if (newValue == oldValue || window == null)
        {
            return;
        }

        if (newValue)
        {
            window.Tag = window.WindowState;

            window.Topmost = true;

            window.UseNoneWindowStyle = true;
            window.IgnoreTaskbarOnMaximize = true;
            window.ShowTitleBar = false;

            window.WindowStyle = WindowStyle.None;
            window.WindowState = WindowState.Maximized;
        }
        else
        {
            window.Topmost = false;

            window.UseNoneWindowStyle = false;
            window.IgnoreTaskbarOnMaximize = false;
            window.ShowTitleBar = true;

            window.WindowStyle = WindowStyle.SingleBorderWindow;
            window.WindowState = (WindowState)window.Tag;
        }
    }

Attaching a simular Behaviour to a default Window WPF control everything works as expected.

I attach the Behaviour this way:

<controls:MetroWindow ... local:FullscreenBehavior.IsFullscreen="{Binding Fullscreen}">
<!-- code above sets initial state depending on ViewModel value -->
<!-- code below fires mode switching when a defined key is pressed => executes  OnIsFullscreenChanged method -->
    <i:Interaction.Behaviors>
        <behaviours:BorderlessWindowBehavior />
        <behaviours:WindowsSettingBehaviour />
        <behaviours:GlowWindowBehavior />
        <modern:FullscreenBehavior FullscreenKey="{Binding FullscreenKey}" />       
    </i:Interaction.Behaviors>
    ...

EDIT: Set state of Window Buttons explicitly When I extend the method to set the states to the correct value explicitly there seems to be another strange effect:

    private static void OnIsFullscreenChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var window = (MetroWindow)sender;

        var oldValue = (bool)e.OldValue;
        var newValue = (bool)e.NewValue;

        if (newValue == oldValue || window == null)
        {
            return;
        }

        if (newValue)
        {
            window.Tag = window.WindowState;

            window.Topmost = true;

            window.UseNoneWindowStyle = true;
            window.IgnoreTaskbarOnMaximize = true;
            window.ShowTitleBar = false;
            window.ShowCloseButton = false;
            window.ShowMaxRestoreButton = false;
            window.ShowMinButton = false;

            window.WindowStyle = WindowStyle.None;
            window.WindowState = WindowState.Maximized;
        }
        else
        {
            window.Topmost = false;

            window.UseNoneWindowStyle = false;
            window.IgnoreTaskbarOnMaximize = false;
            window.ShowTitleBar = true;
            window.ShowCloseButton = true;
            window.ShowMaxRestoreButton = true;
            window.ShowMinButton = true;

            window.ShowCloseButton = true;
            window.ShowMaxRestoreButton = true;
            window.WindowStyle = WindowStyle.SingleBorderWindow;
            window.WindowState = (WindowState)window.Tag;
        }
    }

The window gets "sometimes" cut at the border and sometimes it looks right (like in the first picture at the top). Also I don't know (yet) wheter the space of the title bar is no longer reserved when initially starting with fullscreen (there seems to be a difference, don't know why).

Answer 1

There is a little bug in the current 1.0 release. If you toggle the UseNoneWindowStyle , it doesn't bring back the buttons and toolbar. I'll fix this as soon as possible.

So, here is a little workaround for you.

public static readonly DependencyProperty ToggleFullScreenProperty =
    DependencyProperty.Register("ToggleFullScreen",
                                typeof(bool),
                                typeof(MainWindow),
                                new PropertyMetadata(default(bool), ToggleFullScreenPropertyChangedCallback));

private static void ToggleFullScreenPropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    var metroWindow = (MetroWindow)dependencyObject;
    if (e.OldValue != e.NewValue)
    {
        var fullScreen = (bool)e.NewValue;
        if (fullScreen)
        {
            metroWindow.UseNoneWindowStyle = true;
            metroWindow.IgnoreTaskbarOnMaximize = true;
            metroWindow.ShowMinButton = false;
            metroWindow.ShowMaxRestoreButton = false;
            metroWindow.ShowCloseButton = false;
            metroWindow.WindowState = WindowState.Maximized;
        }
        else
        {
            metroWindow.UseNoneWindowStyle = false;
            metroWindow.ShowTitleBar = true; // <-- this must be set to true
            metroWindow.IgnoreTaskbarOnMaximize = false;
            metroWindow.ShowMinButton = true;
            metroWindow.ShowMaxRestoreButton = true;
            metroWindow.ShowCloseButton = true;
            metroWindow.WindowState = WindowState.Normal;
        }
    }
}

public bool ToggleFullScreen
{
    get { return (bool)GetValue(ToggleFullScreenProperty); }
    set { SetValue(ToggleFullScreenProperty, value); }
}

Hope this helps.