Ressources et Styles dans une application Windows Phone

En gros, les ressources sont des conteneurs d’objets, qui vous permettent de définir un élément à un endroit et l’utiliser plus loin. Vous pouvez définir

des classes, des styles, des propriétés…une fois et les réutiliser à de multiples occasions.

Les styles quant à eux sont des collections de propriétés généralement stockées dans des dictionnaires de Ressources.

Par exemple, regardons le Button défini ci-dessous :

<Button Content="Valider" Background="Blue" BorderBrush="Maroon" BorderThickness="5"/>
Ses propriétés Background, BorderBrush et BorderThickness peuvent être définies et réutilisées de la façon suivante:

<Grid>
<Grid.Resources>
<Style x:Key="MonStyleDeBouton" TargetType="Button">
<Setter Property="Background" Value="Blue" />
<Setter Property="BorderBrush" Value="Maroon" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</Grid.Resources>
<Button Content="Valider" Style="{StaticResource MonStyleDeBouton}"/>
</Grid>
Pour définir et réutiliser un style, il faudrait :

-Donner un nom unique au style à l’aide de sa propriété x:Key. Dans ce cas, le nom est « MonStyleDeBouton« .

-Renseigner la propriété TargetType du style. Dans ce cas, le style s’applique à l’élément Button.

-Renseigner la propriété Style du Button suivant la syntaxe de l’extension de balisage : le mot StaticResource suivi du nom de la ressource, le tout entre des accolades.

Par exemple, le code ci-dessous définit la ressource et l’utilise trois fois pour l’élément Button:
<phone:PhoneApplicationPage
x:Class="RessourcesEtStyles.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.Resources>
<Style x:Key="MonStyleDeBouton" TargetType="Button">
<Setter Property="Background" Value="Blue" />
<Setter Property="BorderBrush" Value="Maroon" />
<Setter Property="BorderThickness" Value="5" />
</Style>
</Grid.Resources>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource  PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Valider" Style="{StaticResource MonStyleDeBouton}" Margin="0,0,0,459"/>
<Button Content="Supprimer" Style="{StaticResource MonStyleDeBouton}" Margin="0,222,0,235"/>
<Button Content="Actualiser" Style="{StaticResource MonStyleDeBouton}" Margin="0,455,0,0"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Emulateur_scr

PORTÉE D’UNE RESSOURCE

Les ressources peuvent être définies à plusieurs niveaux.

<phone:PhoneApplicationPage
x:Class="RessourcesEtStyles.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--Application Resources-->
<Application.Resources>
<!--Ajoutez des ressources ici-->
</Application.Resources>
<Grid>
<Grid.Resources>
<!--Ajoutez des ressources ici-->
</Grid.Resources>
<StackPanel>
<StackPanel.Resources>
<!--Ajoutez des ressources ici-->
</StackPanel.Resources>
<Button>
<Button.Resources>
<!--Ajoutez des ressources ici-->
</Button.Resources>
</Button>
</StackPanel>
</Grid>
</phone:PhoneApplicationPage>

Lorsque les ressources sont définies au niveau de la page, elles sont accessibles pour tous les éléments de la page. Mais lorsqu’elles sont définies au niveau d’un conteneur, elles ne sont accessibles que depuis celui-ci, notamment pour ses descendants. Pour être accessibles à tous les niveaux d’une application, les ressources sont définies soit dans le fichier App.xaml, soit dans un fichier séparé comme le prônent les bonnes pratiques.

HÉRITAGE DE STYLE

Il vous arrivera quelques fois de définir des styles qui ne diffèrent l’un de l’autre que par quelques propriétés. Alors, il n’est pas nécessaire de redéfinir chacun à partir de zéro. Vous pouvez définir un style basé sur un autre, de la façon suivante :

<Style x :Key="MonNouveauStyle" TargetType="Button"
BasedOn="{StaticResource MonStyleDeBouton}">
<Setter Property="BorderThickness" Value="20"/>
</Style>

STYLES IMPLICITES

Donner un nom à un style à l’aide de la propriété x:Key et le réutiliser plus loin par {StaticResource NomDuStyle} est un cas typique de style explicite. Un style peut être défini implicitement et s’appliquer automatiquement à tous les éléments cibles. Pour cela, il suffit de supprimer sa propriété x:Key.

Ajouter un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *