Etiqueta: settings

Panel de preferencias para nuestra aplicación Metro

El panel o Charm de preferencias, que se muestra al pulsar la combinación de teclas Windows + I o al seleccionar Settings en el menú de inicio, contiene la información de la aplicación, información genérica del sistema como wifi, brillo o estado de batería. Además de esta información, nuestra aplicación Metro puede colocar enlaces a secciones como las preferencias, acerca de, etc.

En este artículo se verá cómo agregar enlaces a este panel, y posteriormente cómo crear un panel de preferencias que se muestre u oculte usando estos enlaces. El código de este artículo está basado en la última versión de MetroTask, disponible en Codeplex, y en el estado en el que quedó en el anterior artículo.

Agregar los accesos

Para poder agregar los accesos al menú de preferencias primeramente se ha de obtener una referencia al panel de preferencias de la vista actual, siendo este dependiente de la página que se este mostrando.

Posteriormente se agregarán, a la colección ApplicationCommands, el comando deseado, para que se muestre en el panel. Además de agregar un campo que muestra el texto del comando o en este caso, un valor de la colección KnowSettingsCommand, Además, se agregará la llamada a una función que se ejecutará al pulsar sobre la opción:


public CollectionPage()
{
   ...
   SettingsPane pane = SettingsPane.GetForCurrentView();
   pane.ApplicationCommands.Add(new SettingsCommand(KnownSettingsCommand.About, About);
   ...
}

private void About(IUICommand command)
{
    //Aquí se situará la lógica de las preferencias
}

El resultado se aprecia a continuacíón. Este botón ejecuta el comando seleccionado, que sin duda podría cargar otra página con la configuración y las preferencias, pero los ejemplos mostrados nos dan la idea de que el panel de preferencias de nuestra aplicación debe tener un formato similar al Charm que se muestra, y eso es lo que vamos a hacer a continuación.

Crear el panel

Para crear un panel de preferencias el proceso consiste en crear una página XAML (que en este caso se llamará AppSettingsPane), cargarla dentro de la vista mostrada, y ocultarla, de tal manera que la acción que se ejecute sea solamente mostrarla.

Para poder cargar la página lo primero es agregar una sentencia using al documento xaml, para poder usar las referencias al proyecto, y posteriormente cargar la misma:

xmlns:local="using:Tareas"
...
<local:AppSettingsPane x:Name="Settings" HorizontalAlignment="Right" Margin="0,0,-346,0"/>
...

Con este proceso se incrusta el contenido del fichero AppSettingsPane en la página, desplazado 346px a la derecha (y oculto), según dicta la guía de diseño. Finalmente se modifica el código generado anteriormente para que desplace la capa:

private void About(IUICommand command)
{
    Settings.Margin = ThicknessHelper.FromUniformLength(0);
}

El problema de este código es que no hay manera de ocultar la ventana, para lo cual se agrega un método adicional llamado PointerPressed en el Grid principal, que estará pendiente de los cambios de posición del cursor, lo que permitirá que cuando el cursor haga click fuera del panel este se oculte.


<Grid x:Name="LayoutRoot" PointerPressed="LayoutRoot_PointerPressed" Style="{StaticResource LayoutRootGridStyle}">

 

        private void LayoutRoot_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
        {
            if (Settings.Margin.Right == 0)
            {
                Settings.Margin = ThicknessHelper.FromLengths(0, 0, -346, 0);
            }
        }

Conclusiones

Las preferencias permiten al usuario personalizar su aplicación, habilitar o deshabilitar funciones, y está en nuestras manos proporcionar un panel que permita dicha personalización. En este artículo se ha visto cómo insertar un elemento en el panel de preferencias, y cómo cargar un menú de opciones desde éste.

Más información