Nel precedente tutorial abbiamo visto come sia possibile inserire delle risorse all’interno dei nostri assembly e come sia possibile referenziare le risorse stesse all’interno di una nostra applicazione WPF.
In questo tutorial vedremo un’altra modalità per definire le risorse all’interno delle nostre applicazioni che si basa sulla definizione dichiarativa tramite XAML.
Come già detto nei precedenti tutorial lo XAML è un linguaggio, derivato dall’XML, che di fatto ci permette di istanziare oggetti di qualsiasi classe. Quando scriviamo lo XAML:
- <Button Margin="5" Content="Premi" FontSize="26">
- </Button>
Con questo codice stiamo chiedendo all’interprete XAML di istanziare un oggetto di classe Button con la proprietà Margin pari a “5”, la proprietà Content pari a “Premi” e la FontSize uguale a ”26”.
In sostanza, possiamo istanziare qualsiasi classe preveda un costruttore senza parametri e che preveda delle proprietà pubbliche.
Questo meccanismo si può applicare anche ad altri oggetti, in particolare, se scriviamo:
- <Button Margin="5" Content="Premi" FontSize="26">
- <Button.Foreground>
- <RadialGradientBrush>
- <GradientStopCollection>
- <GradientStop Color="red" Offset="0"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- </Button.Foreground>
- <Button.Background>
- <RadialGradientBrush>
- <GradientStopCollection>
- <GradientStop Color="blue" Offset="0"></GradientStop>
- <GradientStop Color="cyan" Offset="0.5"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- </Button.Background>
- </Button>
Intendiamo dire che il foreground (cioè il “colore” delle scritte) ed il background (cioè lo sfondo del bottone) sono, in realtà, delle istanze della classe RadialGradientBrush.
Immaginiamo, ora, di voler fare in modo che tutti i nostri bottoni abbiano lo stesso foreground e lo stesso background. Evidentemente possiamo ripetere lo XAML relativo ai nodi <Button.Foreground> e <Button.Background> per tutti i nodi Button del nostro XAML. Così facendo, però, scriviamo tantissimo codice inutile e, soprattutto, il nostro codice è poco pronto ad eventuali cambiamenti che debbono essere riportati a mano su tutti i bottoni.
Sarebbe interessante avere un modo per definire il background ed il foreground da qualche parte e indicare, all’interno dei button, semplicemente il nome dell’oggetto da utilizzare.
La classe base FrameworkElement mette a disposizione dello sviluppatore una proprietà di tipo Dictionary denominata Resources in cui è possibile inserire delle risorse, cioè oggetti che possono essere referenziati in base ad una chiave.
Nell’esempio precedente possiamo definire, all’interno delle risorse della finestra della nostra applicazione WPF, due oggetti che chiameremo ForegroundGradient e BackgroundGradient:
- <Window.Resources>
- <RadialGradientBrush x:Key="ForegroundGradient" >
- <GradientStopCollection>
- <GradientStop Color="red" Offset="0"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- <RadialGradientBrush x:Key="BackgroundGradient">
- <GradientStopCollection>
- <GradientStop Color="blue" Offset="0"></GradientStop>
- <GradientStop Color="cyan" Offset="0.5"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- </Window.Resources>
Definite queste risorse possiamo agganciare le stesse nel nostro XAML utilizzando una notazione di binding:
- <Button Margin="5" Content="Premi" FontSize="26"
- Foreground="{StaticResource ResourceKey=ForegroundGradient}"
- Background="{StaticResource ResourceKey=BackgroundGradient}">
- </Button>
In questo modo indichiamo all’interprete XAML di utilizzare per il background ed il foreground due risorse “statiche” recuperate tramite le due chiavi “ForegroundGradient” e “BackgroundGradient”.
Come detto in precedenza, la collezione Resources è una proprietà delle classi derivate da UIElement, cioè da tutti i controli grafici che possiamo utilizzare nelle nostre interfacce WPF.
Per questo motivo, potremmo definire la seguente interfaccia grafica:
- <Window x:Class="DubleResourcesWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="DubleResourcesWindow" Height="300" Width="300">
- <Window.Resources>
- <RadialGradientBrush x:Key="ForegroundGradient">
- <GradientStopCollection>
- <GradientStop Color="red" Offset="0"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- <RadialGradientBrush x:Key="BackgroundGradient">
- <GradientStopCollection>
- <GradientStop Color="blue" Offset="0"></GradientStop>
- <GradientStop Color="cyan" Offset="0.5"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- </Window.Resources>
- <Grid>
- <Grid.RowDefinitions>
- <RowDefinition Height="50"></RowDefinition>
- <RowDefinition Height="50"></RowDefinition>
- <RowDefinition Height="*"></RowDefinition>
- </Grid.RowDefinitions>
- <Button Margin="5" Content="Premi" FontSize="26"
- Foreground="{StaticResource ResourceKey=ForegroundGradient}"
- Background="{StaticResource ResourceKey=BackgroundGradient}">
- </Button>
- <Button Margin="5" Content="Premi" FontSize="26" Grid.Row="1"
- Foreground="{StaticResource ResourceKey=ForegroundGradient}">
- <Button.Resources>
- <RadialGradientBrush x:Key="BackgroundGradient">
- <GradientStopCollection>
- <GradientStop Color="black" Offset="0"></GradientStop>
- <GradientStop Color="gray" Offset="0.5"></GradientStop>
- <GradientStop Color="white" Offset="1"></GradientStop>
- </GradientStopCollection>
- </RadialGradientBrush>
- </Button.Resources>
- <Button.Background>
- <StaticResourceExtension ResourceKey="BackgroundGradient"></StaticResourceExtension>
- </Button.Background>
- </Button>
- </Grid>
- </Window>
In questo caso, il secondo bottone utilizza la risorsa “Background” come sfondo ma non accede alla risorsa con la stessa chiave memorizzata nel dictionary delle risorse della Window bensì alla risorsa contenuta nelle risorse del bottone stesso.
Il risultato è il seguente:
Ogni controllo, quindi, dispone, potenzialmente, di un proprio dizionario di risorse e lo sviluppatore può decidere dove inserire per renderle o meno visibili ai controlli.
Il framework, infatti, comincia a ricercare la risorsa indicata dal dizionario del controllo stesso per risalire l’albero gerarchico dei controlli fino ad arrivare alla Window e, in seguito, al dizionario delle risorse dell’application. Verrà utilizzata la prima risorsa trovata con la chiave indicata.
Possiamo, infatti, inserire le risorse anche nel file Application.xaml in modo da renderle visibili a tutta l’applicazione.
Il dizionario delle risorse è accessibile anche da codice:
- Dim background = CType(Me.Resources("BackgroundGradient"), GradientBrush)
- background.GradientStops(0).Color = Colors.Green
- background.GradientStops(1).Color = Colors.LightGreen
In quest’ultimo esempio recuperiamo il gradientbrush contenuto nel repository delle risorse e modifichiamo i primi due GradientStop cambiando i colori degli stessi. Se, invece, vogliamo recuperare la risorsa effettivamente utilizzata dal controllo possiamo utilizzare il metodo FindResource disponibile nella classe FrameworkElement.
Ultima cosa da analizzare è la modalità con cui le risorse vengono “agganciate” alla corrispondente proprietà:
- Background="{StaticResource ResourceKey=BackgroundGradient}"
In questa sintassi di binding compare la parola StaticResource che dice al compilatore di leggere la risorsa dallo XAML solo la prima volta che serve. In alternativa possiamo utilizzare la parola chiave DynamicResource che, invece, informa l’interprete XAML di recuperare la risorsa ogni volta che serve.
L’utilità della parola chiave DynamicResource si apprezza quando abbiamo a che fare con risorse che possono cambiare mentre la nostra applicazione è in esecuzione e abbiamo la necessità di aggiornare la nostra interfaccia in base al loro cambiamento. Un esempio sono i colori del sistema operativo.
Commenti