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

Application-01Introducció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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s