[#WINDOWS8] Cambiar el estilo de un elemento de la interfaz desde código

Hace tiempo me hizo falta en una de mis apps, y justo esta mañana me lo han preguntado, por lo que aquí dejo este pequeño tip: ¿cómo se puede cambiar el estilo de algún elemento de la interfaz gráfica de una aplicación de Windows 8 usando code behind? La idea es, por ejemplo, que un botón que cambie de estilo al ser pulsado.

En mi caso, el elemento es un botón de activar/desactivar, que dependiendo del estado del elemento seleccionado debe mostrar un estilo u otro. Pulsar el botón cambia el estado del elemento seleccionado, por lo que el estilo del botón también debe cambiar en cada pulsación. Descripción gráfica:

En esta primera captura el elemento seleccionado (el jugador de los Lakers, Metta World Peace aka Ron Artest) no está activado para el partido, por lo que el botón de la AppBar da la posibilidad de activarlo mediante un estilo determinado (el icono con el check y el texto “Activate”), mientras que…

…en la segunda captura, tras pulsar el botón “Activate” de la AppBar o el switch del elemento, el jugador pasa a estar activo, por lo que el botón debe cambiar su estilo (el icono con la cruz y el texto “Desactivate”).

En mi caso, el cambio de estilo lo realizo en el evento de click del botón con el código que presentaré a continuación, pero también se podría hacer un Binding (enlace de datos) de la propiedad Style del botón a la propiedad Activado del elemento seleccionado, utilizando un conversor para ello (recordemos…¡buenas prácticas!), pero para este ejemplo cortito me vale con esto.

En resumen, debemos definir un diccionario de recursos en el que encontrar el estilo que deseemos aplicar sobre el elemento de la interfaz gráfica, estableciendo el origen de éste, y aplicarlo. El código quedaría así:

 C# |  copy code |? 
  1. private void bAppActivate_Click(object sender, RoutedEventArgs e)
  2. {
  3. var rd = new ResourceDictionary();
  4. rd.Source = new Uri("ms-appx:///Common/StandardStyles.xaml", UriKind.RelativeOrAbsolute);
  5. // código del método
  6. this.bAppActivate.Style = rd["NoAppBarButtonStyle"] as Style;
  7. // resto del código
  8. }

En este caso, definimos el diccionario de recursos con origen en el archivo StandardStyles.xaml de la carpeta Common de nuestro proyecto, donde habitualmente se encuentran los estilos a utilizar. Para aplicar el estilo, simplemente establecemos el valor de la propiedad Style del botón a través del recurso con clave “NoAppBarButtonStyle” en nuestro diccionario de recursos.

PD de autobombo: las capturas de este post son de una de mis apps de Windows 8, BasketbApp, que podéis encontrar en la Store desde Septiembre ;)

Gk out

About Gorka Madariaga

Media Apps Dev en Plain Concepts, ex-Microsoft en el equipo de DPE/DX y parte del equipo de @TrackSeriesTv. Basketball coach-player-lover. Hay quien dice que soy de acero.