Otro concepto que se utiliza cuando desarrollamos aplicaciones universales para Windows es la definición de recursos que tienen por objetivo separar cadenas de caracteres(nos facilita si queremos hacer nuestra aplicación para varios idiomas), pinceles, estilos etc.
Recursos de página
La primer forma que veremos es la definición de recursos a nivel de página, desarrollaremos un ejemplo con dos listas de tres botones cada uno y separaremos algunas de sus propiedades en una sección de recursos.
Como primer paso creamos un nuevo proyecto llamado "Proyecto29" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto
<Page
x:Class="Proyecto29.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto29"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<SolidColorBrush x:Key="colortitulo" Color="Blue" />
<x:String x:Key="cadena1">Boton 1</x:String>
<x:String x:Key="cadena2">Boton 2</x:String>
<x:String x:Key="cadena3">Boton 3</x:String>
<Style x:Key="estilo1" TargetType="Button">
<Setter Property="FontSize" Value="25" />
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Background" Value="red" />
</Style>
</Page.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
</StackPanel>
</Page>
Previo a declarar el StackPanel donde utilizaremos los recursos, debemos definirlos entre las etiquetas:
<Page.Resources>
.....
</Page.Resources>
Si queremos definir un recurso para almacenar un String tenemos la sintaxis:
<x:String x:Key="cadena1">Boton 1</x:String>
Para recuperar el contenido de "cadena1" utilizamos la siguiente sintaxis (entre llaves disponemos la palabra clave StaticResource y seguidamente el nombre del recurso):
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena1}" Margin="5"/>
Si queremos almacenar un color:
<SolidColorBrush x:Key="colortitulo" Color="Blue" />
Y luego lo consumimos:
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena1}" Margin="5"/>
Para definir un estilo donde generalmente iniciamos varias de sus propiedades utilizamos la sintaxis (en la propiedad TargetType indicamos el nombre de la clase):
<Style x:Key="estilo1" TargetType="Button">
<Setter Property="FontSize" Value="25" />
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Background" Value="red" />
</Style>
Y finalmente cuando queremos aplicar este estilo a un objeto en particular debemos iniciar la propiedad Style:
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena1}" Margin="5"/>
Si ejecutamos el programa podemos ver como afecta el uso de recursos en la aplicación:
Recursos globales de la aplicación
En el concepto anterior los cinco recursos definidos solo se pueden utilizar dentro del archivo MainPage.xaml
Si queremos definir recursos que puedan ser utilizados en todas las páginas de nuestra aplicación debemos definirlos en el archivo App.xaml
Modificar el proyecto para mover los recursos definidos en el archivo MainPage.xaml al archivo App.xaml:
App.xaml:
<Application
x:Class="Proyecto29.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto29"
RequestedTheme="Light">
<Application.Resources>
<SolidColorBrush x:Key="colortitulo" Color="Blue" />
<x:String x:Key="cadena1">Boton 1</x:String>
<x:String x:Key="cadena2">Boton 2</x:String>
<x:String x:Key="cadena3">Boton 3</x:String>
<Style x:Key="estilo1" TargetType="Button">
<Setter Property="FontSize" Value="25" />
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Background" Value="red" />
</Style>
</Application.Resources>
</Application>
Y luego el archivo MainPage.xaml queda:
<Page
x:Class="Proyecto29.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto29"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
</StackPanel>
</Page>
Como vemos en el archivo MainPage.xaml no tenemos que hacer referencia en ninguna parte al archivo App.xaml.
Cualquier otra página que creemos en nuestro proyecto tendremos acceso a los recursos definidos en el archivo App.xaml.
Recursos definidos en otros archivos
La tercer forma de definir recursos es crear un archivo separado y luego importarlo en aquellas páginas que se requieran.
Desde el menú de opciones del Visual Studio: Proyecto -> Agregar nuevo elemento...
En este diálogo seleccionamos "Diccionario de recursos" y definimos el nombre del archivo:
Ahora para probar como funciona, movamos el contenido de recursos del archivo App.xaml al archivo Diccionario1.xaml.
Diccionario1.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto29">
<SolidColorBrush x:Key="colortitulo" Color="Blue" />
<x:String x:Key="cadena1">Boton 1</x:String>
<x:String x:Key="cadena2">Boton 2</x:String>
<x:String x:Key="cadena3">Boton 3</x:String>
<Style x:Key="estilo1" TargetType="Button">
<Setter Property="FontSize" Value="25" />
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Background" Value="red" />
</Style>
</ResourceDictionary>
Para poder consumir estos recursos en la página MainPage.xaml debemos implementar la siguiente sintaxis:
<Page
x:Class="Proyecto29.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto29"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Diccionario1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Foreground="{StaticResource colortitulo}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena1}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena2}" Margin="5"/>
<Button Style="{StaticResource estilo1}"
Content="{StaticResource cadena3}" Margin="5"/>
</StackPanel>
</StackPanel>
</Page>
Como podemos ver para consumirlos a los recursos disponibles en otro archivo debemos indicar en el bloque Page.Resources la fuente del archivo a importar:
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Diccionario1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto29.zip