Stili globali in Xamarin.Forms
Gli stili possono essere resi disponibili a livello globale aggiungendoli al dizionario risorse dell'applicazione. Ciò consente di evitare la duplicazione di stili tra pagine o controlli.
Creare uno stile globale in XAML
Per impostazione predefinita, tutte le Xamarin.Forms applicazioni create da un modello usano la classe App per implementare la Application
sottoclasse. Per dichiarare un oggetto Style
a livello di ResourceDictionary
applicazione, nell'applicazione usando XAML, la classe App predefinita deve essere sostituita con una classe app XAML e il code-behind associato. Per altre informazioni, vedere Uso della classe App.
L'esempio di codice seguente mostra un Style
dichiarato a livello di applicazione:
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Definisce ResourceDictionary
un singolo stile esplicito , buttonStyle
, che verrà usato per impostare l'aspetto delle Button
istanze. Tuttavia, gli stili globali possono essere espliciti o impliciti.
L'esempio di codice seguente mostra una pagina XAML che applica l'oggetto buttonStyle
alle istanze della Button
pagina:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Il risultato è l'aspetto illustrato negli screenshot seguenti:
Per informazioni sulla creazione di stili in una pagina, ResourceDictionary
vedere Stili espliciti e stili impliciti.
Eseguire l'override degli stili
Gli stili inferiori nella gerarchia di visualizzazione hanno la precedenza su quelli definiti in alto. Ad esempio, l'impostazione di un Style
oggetto che imposta Button.TextColor
su a livello di applicazione verrà sottoposto a Red
override da uno stile a livello di pagina che imposta Button.TextColor
su Green
. Analogamente, uno stile a livello di pagina verrà sottoposto a override da uno stile a livello di controllo. Inoltre, se Button.TextColor
è impostato direttamente su una proprietà di controllo, questo avrà la precedenza su qualsiasi stile. Questa precedenza è illustrata nell'esempio di codice seguente:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
L'oggetto originale buttonStyle
, definito a livello di applicazione, viene sottoposto a override dall'istanza buttonStyle
definita a livello di pagina. Inoltre, lo stile del livello di pagina viene sottoposto a override dal livello buttonStyle
di controllo . Di conseguenza, le Button
istanze vengono visualizzate con testo blu, come illustrato negli screenshot seguenti:
Creare uno stile globale in C#
Style
È possibile aggiungere istanze alla raccolta dell'applicazione Resources
in C# creando un nuovo ResourceDictionary
oggetto e quindi aggiungendo le Style
istanze a ResourceDictionary
, come illustrato nell'esempio di codice seguente:
public class App : Application
{
public App ()
{
var buttonStyle = new Style (typeof(Button)) {
Setters = {
...
new Setter { Property = Button.TextColorProperty, Value = Color.Teal }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("buttonStyle", buttonStyle);
...
}
...
}
Il costruttore definisce un singolo stile esplicito per l'applicazione alle Button
istanze in tutta l'applicazione. Le istanze esplicite Style
vengono aggiunte all'oggetto ResourceDictionary
usando il Add
metodo , specificando una key
stringa per fare riferimento all'istanza Style
di . L'istanza Style
può quindi essere applicata a tutti i controlli del tipo corretto nell'applicazione. Tuttavia, gli stili globali possono essere espliciti o impliciti.
L'esempio di codice seguente mostra una pagina C# che applica l'oggetto buttonStyle
alle istanze della Button
pagina:
public class ApplicationStylesPageCS : ContentPage
{
public ApplicationStylesPageCS ()
{
...
Content = new StackLayout {
Children = {
new Button { Text = "These buttons", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "are demonstrating", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "application styles", Style = (Style)Application.Current.Resources ["buttonStyle"]
}
}
};
}
}
L'oggetto buttonStyle
viene applicato alle Button
istanze impostando le relative Style
proprietà e controlla l'aspetto delle Button
istanze.