[Tips and Tricks] Windows Phone. Acceder a recursos desde código.

Introducción

En Windows Phone un recurso no es más que un trozo de XAML al que le asignamos una clave única con el objetivo de poder acceder a él posteriormente y reaprovechar el código.

Todo elemento tiene una colección de recursos (desde un simple botón a una página). Además, todos los proyectos que realicemos cuentan también con un archivo (app.xaml) que cuenta también con una colección de recursos accesible desde toda la aplicación.

Para entrar en situación y comprender mejor que nos ofrece los recursos. Imagínate que todos los textos de tu aplicación deben de estar en color verde por ejemplo. Podemos en cada texto utilizar su propiedad Foreground y asignarla al color verde. Sin embargo, tenemos mejores opciones. Por un lado en cada página podríamos definir un recurso (el color) y que todos los textos apunten a dicho color. La ventaja es clara, solo definimos el color una única vez y lo reutilizamos. Ademas, si el día de mañana debemos cambiar el verde por azul, de esta forma sólo debemos cambiar el color una vez por página no una por cada texto.

Pero además, podemos definir el color una única vez a nivel de aplicación (app.xaml) con lo que aún reutilizamos más y lo tenemos más fácil en caso de decidir cambiar.

Comenzamos!

Vamos a realizar como de costumbre un ejemplo.

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

Definimos un color (SolidColorBrush) en los recursos de la aplicación (app.xaml):

<!--Recursos de la aplicación-->
<Application.Resources>

     <SolidColorBrush x:Key="appColor" Color="Red"/>

</Application.Resources>

Y otro, en los recursos de la página principal (MainPage.xaml):

<phone:PhoneApplicationPage.Resources>

     <SolidColorBrush x:Key="pageColor" Color="Green"/>

</phone:PhoneApplicationPage.Resources>

Hemos definido un recurso a nivel de aplicación, concretamente un color (rojo) y otro recurso, de nuevo un color (verde) a nivel de página.

A continuación, en nuestra página principal vamos a definir dos textos asignandoles los colores previamente definidos:

<StackPanel>
     <TextBlock x:Name="tb1" Text="Color tomado de los recursos de la aplicación" Foreground="{StaticResource appColor}" />
     <TextBlock x:Name="tb2" Text="Color tomado de los recursos de la página" Foreground="{StaticResource pageColor}"/>
</StackPanel>

Vamos a analizar la forma de asignar los colores definidos.

En lugar de indicar un valor literal, añadimos una sentencia entre llaves. Esto indica que estamos ante una expresión que se debe evaluar y resolver. StaticResource indica que buscamos por el nombre que venga a continuación, un recurso en nuestra aplicación cuya clave coincida.

¿Fácil, verdad?.

NOTA: Indicar antes de continuar que profundizaremos mucho más en todo lo relacionado con recursos en próximas entradas.

Vamos a acceder a los recursos desde el code-behind. Para ello, vamos a añadir a la interfaz de usuario dos botones que permitan acceder a los recursos y modificar la asignación de nuestros textos:

<StackPanel Grid.Row="1" HorizontalAlignment="Center">
     <Button x:Name="btn1" Content="Cambiar Recurso 1º Texto"/>
     <Button x:Name="btn2" Content="Cambiar Recurso 2º Texto"/>
</StackPanel>

Añadimos el evento Click de cada botón:

<StackPanel Grid.Row="1" HorizontalAlignment="Center">
     <Button x:Name="btn1" Content="Cambiar Recurso 1º Texto" Click="btn1_Click"/>
     <Button x:Name="btn2" Content="Cambiar Recurso 2º Texto" Click="btn2_Click"/>
</StackPanel>

Y en el code-behind (MainPage.xaml.cs):

private void btn1_Click(object sender, RoutedEventArgs e)
{

}

private void btn2_Click(object sender, RoutedEventArgs e)
{

}

De modo que la interfaz completa de nuestro ejemplo quedaría:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Grid.RowDefinitions>
          <RowDefinition Height="0.7*"/>
          <RowDefinition Height="0.3*"/>
     </Grid.RowDefinitions>
     <StackPanel>
          <TextBlock x:Name="tb1" Text="Color tomado de los recursos de la aplicación" Foreground="{StaticResource appColor}" />
          <TextBlock x:Name="tb2" Text="Color tomado de los recursos de la página" Foreground="{StaticResource pageColor}"/>
     </StackPanel>
     <StackPanel Grid.Row="1" HorizontalAlignment="Center">
          <Button x:Name="btn1" Content="Cambiar Recurso 1º Texto" Click="btn1_Click"/>
          <Button x:Name="btn2" Content="Cambiar Recurso 2º Texto" Click="btn2_Click"/>
     </StackPanel>
</Grid>

Nos centramos ahora en los eventos de cada botón. El primero de ellos debe acceder al recurso de la página para modificar el color del primer texto.

Para ello, utilizaremos la colección Resources de la página (this) indicándole entre corchetes la clave del recurso:

private void btn1_Click(object sender, RoutedEventArgs e)
{
     SolidColorBrush pageColor = this.Resources["pageColor"] as SolidColorBrush;

     if (pageColor != null)
          tb1.Foreground = pageColor;
}

En el segundo botón accederemos al recurso de la página para modificar el color del segundo texto.

Accederemos desce código a la colección de recursos a nivel de aplicación utilizando App.Current.Resources:

private void btn2_Click(object sender, RoutedEventArgs e)
{
     SolidColorBrush appColor = App.Current.Resources["appColor"] as SolidColorBrush;

     if (appColor != null)
          tb2.Foreground = appColor;
}

NOTA:  Sólo puedes acceder a un recurso de App.Current.Resources utilizando una clave.

Fácil, ¿verdad?

Puedes descargar el ejemplo realizado:

Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios.

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