Home > C#, Universal Windows Platform > FullScreenModeTrigger for Universal Windows Platform

FullScreenModeTrigger for Universal Windows Platform

14/07/2015

Last week we talked about full-screen mode in Windows 10 Universal apps. In this scenario, we could have the need to adjust the UI when we enter full-screen mode. The best way to do so is to create an Adaptive Trigger:

public class FullScreenModeTrigger : StateTriggerBase
{
    public bool IsFullScreen
    {
        get { return (bool)GetValue(IsFullScreenProperty); }
        set { SetValue(IsFullScreenProperty, value); }
    }

    public static readonly DependencyProperty IsFullScreenProperty =
        DependencyProperty.Register("IsFullScreen", typeof(bool), 
        typeof(FullScreenModeTrigger),
        new PropertyMetadata(false, OnIsFullScreenPropertyChanged));

    private static void OnIsFullScreenPropertyChanged(DependencyObject d, 
        DependencyPropertyChangedEventArgs e)
    {
        var obj = (FullScreenModeTrigger)d;
        if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
        {
            var isFullScreen = ApplicationView.GetForCurrentView().IsFullScreenMode;
            obj.UpdateTrigger(isFullScreen);
        }
    }

    public FullScreenModeTrigger()
    {
        if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
            ApplicationView.GetForCurrentView().VisibleBoundsChanged += 
                FullScreenModeTrigger_VisibleBoundsChanged;
    }

    private void FullScreenModeTrigger_VisibleBoundsChanged(ApplicationView sender, 
        object args)
    {
        UpdateTrigger(sender.IsFullScreenMode);
    }

    private void UpdateTrigger(bool isFullScreen)
    {
        SetActive(isFullScreen == IsFullScreen);
    }
}

It defines a dependency property (line 9-12) that specifies if we want to activate the trigger when in full-screen or windowed mode. Then, in the constructor we register on the ApplicationView.VisibleBoundsChanged event (line 28-29). In its event handler (lines 32-36), we check ApplicationView.IsFullScreenMode and activate the trigger based on the value of the IsFullScreen property.

Now we can use this trigger in XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
      <TextBlock x:Name="fullScreenModeStatus"  
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center" />
      <Button x:Name="fullScreenMode" Content="Toggle Full Screen Mode" 
              Click="fullScreenMode_Click" />
  </StackPanel>

  <VisualStateManager.VisualStateGroups>
      <VisualStateGroup >
          <VisualState x:Name="fullScreen">
              <VisualState.StateTriggers>
                  <triggers:FullScreenModeTrigger IsFullScreen="true" />
              </VisualState.StateTriggers>
              <VisualState.Setters>
                  <Setter Target="fullScreenModeStatus.Text" 
                          Value="App is in full screen mode" />
                  <Setter Target="fullScreenMode.Content" Value="Exit full screen" />
              </VisualState.Setters>
          </VisualState>
          <VisualState x:Name="windowed">
              <VisualState.StateTriggers>
                  <triggers:FullScreenModeTrigger IsFullScreen="false" />
              </VisualState.StateTriggers>
              <VisualState.Setters>
                  <Setter Target="fullScreenModeStatus.Text" 
                          Value="App is in windowed mode" />
                  <Setter Target="fullScreenMode.Content" Value="Enter full screen" />
              </VisualState.Setters>
          </VisualState>
      </VisualStateGroup>
  </VisualStateManager.VisualStateGroups>
</Grid>

We have defined two visual states (lines 12-21 and 22-32), that are activated according to the value of the IsFullScreen property (lines 14 and 24).

Finally, in the code behind of the page let’s insert the code to enter and exit the full-screen mode:

private void fullScreenMode_Click(object sender, RoutedEventArgs e)
{
    var view = ApplicationView.GetForCurrentView();
    var isFullScreenMode = view.IsFullScreenMode;

    if (isFullScreenMode)
        view.ExitFullScreenMode();
    else
        view.TryEnterFullScreenMode();
}

We simply use a button to toggle the full-screen mode, as described in the previous post.

Comments are closed.
%d bloggers like this: