Styles dynamiques dans Xamarin.Forms
Les styles ne répondent pas aux modifications de propriété et restent inchangés pendant la durée d’une application. Par exemple, après avoir affecté un style à un élément visuel, si l’une des instances Setter est modifiée, supprimée ou ajoutée à une nouvelle instance Setter, les modifications ne seront pas appliquées à l’élément visuel. Toutefois, les applications peuvent répondre aux modifications de style dynamiquement au moment de l’exécution à l’aide de ressources dynamiques.
L’extension DynamicResource
de balisage est similaire à l’extension de StaticResource
balisage dans laquelle les deux utilisent une clé de dictionnaire pour extraire une valeur d’un ResourceDictionary
. Toutefois, pendant que le StaticResource
dictionnaire effectue une recherche unique, il DynamicResource
conserve un lien vers la clé de dictionnaire. Par conséquent, si l’entrée de dictionnaire associée à la clé est remplacée, la modification est appliquée à l’élément visuel. Cela permet d’apporter des modifications de style d’exécution dans une application.
L’exemple de code suivant illustre des styles dynamiques dans une page XAML :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesPage" Title="Dynamic" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
...
</Style>
<Style x:Key="blueSearchBarStyle"
TargetType="SearchBar"
BasedOn="{StaticResource baseStyle}">
...
</Style>
<Style x:Key="greenSearchBarStyle"
TargetType="SearchBar">
...
</Style>
...
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Placeholder="These SearchBar controls"
Style="{DynamicResource searchBarStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
Les SearchBar
instances utilisent l’extension de DynamicResource
balisage pour référencer un Style
nom searchBarStyle
, qui n’est pas défini dans le code XAML. Toutefois, étant donné que les Style
propriétés des SearchBar
instances sont définies à l’aide d’une DynamicResource
clé de dictionnaire manquante, une exception n’est pas levée.
Au lieu de cela, dans le fichier code-behind, le constructeur crée une ResourceDictionary
entrée avec la clé searchBarStyle
, comme illustré dans l’exemple de code suivant :
public partial class DynamicStylesPage : ContentPage
{
bool originalStyle = true;
public DynamicStylesPage ()
{
InitializeComponent ();
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
}
void OnButtonClicked (object sender, EventArgs e)
{
if (originalStyle) {
Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
originalStyle = false;
} else {
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
originalStyle = true;
}
}
}
Lorsque le OnButtonClicked
gestionnaire d’événements est exécuté, searchBarStyle
bascule entre blueSearchBarStyle
et greenSearchBarStyle
. Cela donne l’affichage illustré dans les captures d’écran suivantes :
L’exemple de code suivant illustre la page équivalente en C# :
public class DynamicStylesPageCS : ContentPage
{
bool originalStyle = true;
public DynamicStylesPageCS ()
{
...
var baseStyle = new Style (typeof(View)) {
...
};
var blueSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var greenSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
...
var searchBar1 = new SearchBar { Placeholder = "These SearchBar controls" };
searchBar1.SetDynamicResource (VisualElement.StyleProperty, "searchBarStyle");
...
Resources = new ResourceDictionary ();
Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
Content = new StackLayout {
Children = { searchBar1, searchBar2, searchBar3, searchBar4, button }
};
}
...
}
En C#, les SearchBar
instances utilisent la SetDynamicResource
méthode pour référencer searchBarStyle
. Le OnButtonClicked
code du gestionnaire d’événements est identique à l’exemple XAML, et lorsqu’il est exécuté, searchBarStyle
bascule entre blueSearchBarStyle
et greenSearchBarStyle
.
Héritage de style dynamique
La dérivation d’un style à partir d’un style dynamique ne peut pas être obtenue à l’aide de la Style.BasedOn
propriété. Au lieu de cela, la classe inclut la BaseResourceKey
propriété, qui peut être définie sur une clé de dictionnaire dont la Style
valeur peut changer dynamiquement.
L’exemple de code suivant illustre l’héritage de style dynamique dans une page XAML :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesInheritancePage" Title="Dynamic Inheritance" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
...
</Style>
<Style x:Key="blueSearchBarStyle" TargetType="SearchBar" BasedOn="{StaticResource baseStyle}">
...
</Style>
<Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
...
</Style>
<Style x:Key="tealSearchBarStyle" TargetType="SearchBar" BaseResourceKey="searchBarStyle">
...
</Style>
...
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<SearchBar Text="These SearchBar controls" Style="{StaticResource tealSearchBarStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
Les SearchBar
instances utilisent l’extension de StaticResource
balisage pour référencer un Style
nom tealSearchBarStyle
. Cela Style
définit certaines propriétés supplémentaires et utilise la BaseResourceKey
propriété pour référencer searchBarStyle
. L’extension DynamicResource
de balisage n’est pas nécessaire, car tealSearchBarStyle
elle ne change pas, à l’exception de celle-ci Style
. Par conséquent, tealSearchBarStyle
conserve un lien vers searchBarStyle
et est modifié lorsque le style de base change.
Dans le fichier code-behind, le constructeur crée une ResourceDictionary
entrée avec la clé searchBarStyle
, conformément à l’exemple précédent qui a montré des styles dynamiques. Lorsque le OnButtonClicked
gestionnaire d’événements est exécuté, searchBarStyle
bascule entre blueSearchBarStyle
et greenSearchBarStyle
. Cela donne l’affichage illustré dans les captures d’écran suivantes :
L’exemple de code suivant illustre la page équivalente en C# :
public class DynamicStylesInheritancePageCS : ContentPage
{
bool originalStyle = true;
public DynamicStylesInheritancePageCS ()
{
...
var baseStyle = new Style (typeof(View)) {
...
};
var blueSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var greenSearchBarStyle = new Style (typeof(SearchBar)) {
...
};
var tealSearchBarStyle = new Style (typeof(SearchBar)) {
BaseResourceKey = "searchBarStyle",
...
};
...
Resources = new ResourceDictionary ();
Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
Content = new StackLayout {
Children = {
new SearchBar { Text = "These SearchBar controls", Style = tealSearchBarStyle },
...
}
};
}
...
}
L’objet tealSearchBarStyle
est affecté directement à la Style
propriété des SearchBar
instances. Cela Style
définit certaines propriétés supplémentaires et utilise la BaseResourceKey
propriété pour référencer searchBarStyle
. La SetDynamicResource
méthode n’est pas requise ici, car tealSearchBarStyle
elle ne changera pas, à l’exception de celle-ci Style
. Par conséquent, tealSearchBarStyle
conserve un lien vers searchBarStyle
et est modifié lorsque le style de base change.