Categoría: mis cosas

 

Pues eso… que ahora necesito crear un panel de configuración y como quiero hacerlo "al estilo metro" pues… he ido a mirar por aquí y resulta que no lo tenía publicado… así que… ahora te voy a explicar lo que yo sé sobre cómo mostrar un panel personalizado en el panel de configuración de las aplicaciones para Windows 8 o Windows Store.

Hace un mes o así ya te expliqué cómo o, mejor dicho, dónde se deben poner las opciones de configuración de nuestras aplicaciones para la tienda de Windows.

Ahora lo que toca es saber hacerlo nosotros, que eso de que otros lo hagan está muy bien… pero… si lo necesitamos en nuestra aplicación, pues…

Cuando hice mi panel de configuración me basé en este ejemplo: Quickstart: Add app settings (Windows Store apps using C#/VB/C++ and XAML) (Windows).

Y a partir de ahí lo fui adaptando… y aquí te dejo una forma simplificada de eso mismo que explican en ese "inicio rápido".

En mi caso, me compliqué un poco más, ya que necesitaba varias opciones de configuración, bueno, en realidad sólo dos: la configuración de opciones en sí misma y mostrar "acerca de". Había una tercera opción que era mostrar la ayuda, pero esa ayuda no se mostraba dentro del panel de configuración, si no que desde ese panel se llamaba a la página de ayuda.
No sé porqué estoy con el pretérito… en fin… seguramente porque es algo que "hice" hace unas semanas…

Básicamente vamos a usar el código mostrado en el Quickstart que te he comentado hace unos párrafos, pero modificándolo un poco.

Lo primero es crear una aplicación para Windows Store, usa la sencilla (Blank App) y en el lenguaje de tu preferencia, yo la crearé usando Visual Basic, pero lo mismo da (al menos en estos primeros pasos). En la figura 1 estoy creando el proyecto.

 

Figura 1. Creamos un nuevo proyecto básico para la tienda de Windows

Si estás usando Visual Basic y tienes activado Option Strict On, tendrás que modificar la declaración de rootFrame en el método OnLaunched de App.xaml.vb ya que la plantilla usada no tiene en cuenta la comprobación estricta y dará erro (ver la figura 2).

 

Figura 2. Si tienes activado Option Strict debes hacer la conversión correcta en la asignación a rootFrame

 

Acepta el cambio que propone y ahora lo modificamos para que sea más preciso y así también será como el indicado en el código de C# en el que se utiliza as para hacer la conversión, que como seguramente ya sabrás en VB se corresponde con TryCast. Por tanto el código debe quedar así:

 

' En VB debe quedar de esta forma:
Dim rootFrame As Frame = TryCast(Window.Current.Content, Frame)


// En C# la asignación es de esta forma:
Frame rootFrame = Window.Current.Content as Frame;

 

Ahora agregamos un nuevo elemento, en este caso un UserControl (figura 3) al que llamaremos Settings.xaml.

 

Figura 3. Añadimos un user control

 

Y pegamos el código del User Control que nos muestra en la página del Quickstart y le hacemos estos cambios:

Truco:

Si copias a partir de xmlns:local="using:SettingsExample" y lo pegas después del xmlns:local de nuestro control de usuario, tendrás que modificar menos.

 

Debes fijarte que xClass tenga el valor de nuestro proyecto en el formato espacio de nombres punto nombre del control, después en xmlns:local debes indicar el espacio de nombres raíz del proyecto, que en mi caso es: Ejemplo_settings_charm tal como puse en la figura 1.

Después, vamos a modificar el color de fondo del título, eso lo podemos hacer buscando la cadena "Orange" y cambiándola por "Navy" (o el color que quieras usar).

El título lo vamos a hacer modificable, por tanto hay que indicarle un nombre al TextBlock que contiene la cadena "Sound Options", que estará casi al final del código:

 

<TextBlock x:Name="txtTitulo"

Abre la parte del código del control de usuario para crear el método MySettingsBackClicked, éste sería el de Visual Basic, el de C# será el mismo que se muestra en el Quickstart pero agregándole la condición que si está en modo Snapped no se muestre (la condición que le he agregado al final).

 

Private Sub MySettingsBackClicked(sender As Object, e As RoutedEventArgs)
    If TypeOf Me.Parent Is Popup Then
        TryCast(Me.Parent, Popup).IsOpen = False
    End If

    ' Si no está en modo snapped...
    If ApplicationView.Value <> ApplicationViewState.Snapped Then
        SettingsPane.Show()
    End If


End Sub

En C# vendría a ser algo así:

//  Si no está  en modo snapped...
if( ApplicationView.Value !=  ApplicationViewState.Snapped )
{
    SettingsPane.Show();
}

 

Todo eso es para que si está en modo Snapped, es decir, se muestra en un área estrecha a la derecha o a la izquierda, que no se muestre el panel de configuración, ya que ese "trozo" de pantalla suele ser de 320 pixel y… bueno, que es muy estrecha.

 

Debido a que el TextBlock txtTitulo es interno a la clase Settings, tendremos que crear una propiedad pública para que podamos acceder a ese contenido desde otra clase de nuestro proyecto.

No te muestro el código para que lo hagas tú.

Pero es simple, utiliza la propiedad Text del control interno (txtTitulo) para asignar el valor y devolver el contenido de esa propiedad a la que llamaremos Titulo.

 

En el código XAML del control debemos hacer unos cambios, ya que utilizan valores de recursos que ya no están definidos, así que… busca los valores indicados a la izquierda y los reemplazas por los indicados a la derecha o después de –> por si no cabe en la misma línea:

BackButtonBackgroundBrush –> BackButtonBackgroundThemeBrush,

BackButtonGlyphBrush –> BackButtonForegroundThemeBrush,

BackButtonPressedGlyphBrush –> BackButtonPressedForegroundThemeBrush,

FocusVisualWhiteStrokeBrush –> FocusVisualWhiteStrokeThemeBrush,

FocusVisualBlackStrokeBrush –> FocusVisualBlackStrokeThemeBrush,

BackButtonHoverBackgroundBrush –> BackButtonPointerOverBackgroundThemeBrush,

BackButtonHoverGlyphBrush –> BackButtonPointerOverForegroundThemeBrush,

Nota:

La clase SettingsPane está definida en el espacio de nombres Windows.UI.ApplicationSettings

 

Ahora vamos a agregar el código en la clase MainPage.

Para los que han elegido Visual Basic:

Añade el constructor (un método con el nombre New) al código de la clase, de forma que podamos agregar código a ese método. Para agregarlo, en la lista desplegable de la derecha busca New, si no te muestra nada, asegúrate de que en la lista de la izquierda esté seleccionada la clase MainPage.

En C# no es necesario ya que siempre se agrega el constructor (un método con el mismo nombre que la clase)

En el constructor hay que añadir una llamada al método inicializarPopup() que será el encargado de hacer algunas "cosillas" de inicialización.

Añadir al principio importaciones a estos espacios de nombres: Windows.UI.ApplicationSettings y Windows.UI.Core.

El primero es para las clases: SettingsPane, la clase de evento SettingsPaneCommandsRequestedEventArgs y la clase de creación de comandos SettingsCommand.

La segunda importación es para poder usar la clase WindowSizeChangedEventArgs del método de evento OnWindowSizeChanged.

De todas formas, esas importaciones las puedes hacer automáticamente si utilizas el corrector de errores de Visual Studio (tanto para Visual Basic como Visual C#).

 

Ahora pega el código xaml de MainPage (de la famosa página de inicio rápido).

Fíjate que te mostrará un error indicando que ApplicationPageBackgroundBrush no está definido, no lo busques porque no lo está, lo que debes hacer es cambiarlo por este otro valor: ApplicationPageBackgroundThemeBrush.

 

Nota:

En esta página puedes encontrar algunos de los valores usados antes en los recursos de estilos que ya no están y te muestra el que le corresponde ahora:

Upgrade Metro App From Beta To RC.

 

Añade también el código que te muestra, ah.. que está en C#, vale… aquí lo tienes si estás usando VB:

(el código te lo dejo en Pastebin que si no, se llena esto demasiado)

 

 

Una cosilla… ahora no tengo "capacidad" para saber porqué, pero en el ejemplo este que estamos haciendo, no se muestra el control que debería mostrarse en el panel de opciones… y la verdad es que no sé porqué… he mirado otros ejemplos, particularmente el de App Settings Sample y ahí si que se ven… aunque en ese caso utilizan una página en lugar de un UserControl… pero ni idea de porqué no se muestra el dichoso control. Bueno, si se muestra, pero no se ve… que es casi lo mismo, pero no es igual…

Lo mismo otro día con más calma lo miro… yo por ahora lo he resuelto cambiando el color de fondo del panel… una chapuza, sí, pero funciona… 😉

<Grid Background="Navy" en lugar de White.

Lo mismo habrá que trastear con los estilos del ToggleSwitch. No sé…

 

Nota del 15/Ene 13.10:

La solución para que se vean los controles es usar RequestedTheme="Light" en App.xaml.

Aquí tienes la explicación de cómo lo he averiguado.

 

Espero que te sea de utilidad.

Nos vemos.

Guillermo

…