[Tips and Tricks] Windows 10. Controlar si la App se ejecuta en pantalla completa

Introducción

Con la llegada de Windows 8 llegaron también las Apps Windows Store. Grandes ideas y conceptos nos llegaron con ellas:

  • Aplicaciones a pantalla completa dando peso al contenido sobre las “formas”.
  • Modelo de ejecución compartido.
  • Posibilidad de ejecutar más de una App de manera simultánea.
  • Comportamientos y acciones comunes realizadas de igual forma.
  • Tienda donde poder distibuirlas de forma sencilla y accesible para todos.
  • Etc.

Con Windows 10 se producen algunos cambios importantes en las Apps
Windows Store. De entre todas una de las que llama la atención de forma
inmediata es la ejecución de las Apps en modo ventana.
En nuestras Apps podemos programáticamente ejecutar en modo ventana o
pantalla completa. En este artículo vamos a ver como realizar esta
acción.

¿Ventana o pantalla completa?

Crearemos un nuevo proyecto UAP:

Nueva App UAP

Nueva App UAP

Añadimos las carpetas Views, ViewModels y Services además de las clases base necesarias para implementar el patrón MVVM de la misma forma que vimos en este artículo.

Definimos un botón en nuestra interfaz que nos permita programáticamente entrar y salir del modo pantalla completa:

<TextBlock
     TextWrapping="Wrap">
     Pulsa el botón inferior para entrar y salir del modo pantalla completa.
</TextBlock>
<Button
     Content="Modo Pantalla Completa"
     Command="{Binding FullScreenModeCommand}" />

En el comando definido en la ViewModel:

var view = ApplicationView.GetForCurrentView();
if (view.IsFullScreenMode)
{
     view.ExitFullScreenMode();
}
else
{
     var result = view.TryEnterFullScreenMode();
     Debug.WriteLine(result);
}

Contámos con nuevas propiedades y métodos en la clase ApplicationView
que nos permiten detectar facilmente si la App se ejecuta en modo
pantalla completa o no, además de poder cambiar de modo. Contámos con
una propiedad llamada IsFullScreenMode de tipo bool que
nos indica si la App se esta ejecutando o no en modo pantalla completa.
En función de esta propiedad utilizaremos el método ExitFullScreenMode para salir del modo pantalla completa o TryEnterFullScreenMode para entrar en el.

NOTA: Resaltar que el método para entrar en modo
pantalla completa realiza el intento para entrar en el modo. Cabe la
posibilidad de no poder entrar en modo pantalla completa. El método
devuelve una propiedad de tipo bool que indica si la operación se pudo
realizar con éxito o no. Es muy recomendable revisar el resultado
devuelto además de asegurar en caso necesario el cambio de modo
utilizando Window.Current.SizeChanged.

Elementos de UI del sistema

En modo pantalla completa también podemos mostrar los elementos de UI
del sistema como por ejemplo la TitleBar. Añadimos un nuevo botón en
nuestra interfaz:

 <TextBlock
     TextWrapping="Wrap">
     Cuando estamos modo pantalla completa podemos hacer una petición para mostrar los elementos de superposición del sistema.
</TextBlock>
<Button
     Content="Mostrar controles superpuestos del sistema"
     Command="{Binding ShowOverlayControlsCommand}"/>

En el comando:

var view = ApplicationView.GetForCurrentView();
view.ShowStandardSystemOverlays();

Utilizamos el método ShowStandardSystemOverlays incluido en ApplicationView.

Modo de ventana preferido

También podemos establecer el modo preferido con el que deseamos que la App se lance. Añadimos un CheckBox en nuestra interfaz para elegir si la App se ejecuta o no en pantalla completa:

<TextBlock>
     Una App puede ser lanzada en modo ventana o Pantalla completa.
     Marca o desmarca la caja inferior y cierra y abre la App para probar.
</TextBlock>
<CheckBox
     x:Name="FullScreenModeCheck"
     Content="Lanzar en modo Pantalla Completa"
     IsChecked="{Binding IsFullScreenMode}"
     Command="{Binding SetFullScreenModeCommand}"
     CommandParameter="{Binding ElementName=FullScreenModeCheck, Path=IsChecked}"/>

Bindeamos si esta seleccionado o no con una propiedad en la ViewModel:

private bool _isFullScreenMode;
 
public bool IsFullScreenMode
{
     get { return _isFullScreenMode; }
     set
     {
          _isFullScreenMode = value;
          RaisePropertyChanged();
     }
}

Utilizamos la propiedad PreferredLaunchWindowingMode para selecionar el modo preferido de la ventana:

ApplicationView.PreferredLaunchWindowingMode = isChecked ? ApplicationViewWindowingMode.FullScreen : ApplicationViewWindowingMode.PreferredLaunchViewSize;

Establecemos una propiedad de tipo enumeración llamada ApplicationViewWindowingMode con las siguientes opciones:

  • Auto.
  • PreferredLaunchViewSize: Modo ventana. Utilizará el tamaño establecido en la propiedad PreferredLaunchViewSize. En caso de no estar establecida se utilizará el último tamaño de ventana utilizado.
  • FullScreen: Pantalla completa.
FullScreenMode Sample

FullScreenMode Sample

Podéis descargar el ejemplo completo realizado a continuación:

También tenéis el código fuente disponible e GitHub:

Ver GitHub

Con Windows 10 tenemos nuevas APIs que nos permiten detectar con
facilidad el modo de la ventana, cambiarlo e incluso elegir el modo con
el que deseamos lanzar la App. Espero que lo visto en la entrada os sea
útil. Recordar que podéis dejar en los comentarios cualquier tipo de
sugerencia o pregunta.

Más información

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *