With version 1.3 Xamarin.Forms introduced a powerful concept for styling UI elements. Instead of assigning color, font size and similar properties to each single element or deriving UI elements with a certain style, in Xamarin.Forms we can instantiate a style itself and assign it to UI elements. Furthermore, there is the possibility to share styles across a page or even the whole application. And with implicit styles we can address all UI elements and define their default styling.
Throughout the following code examples we will introduce labels with different styling concepts. At the end of this chapter we will merge them into one MainPage and show the resulting screen.
Pre-defined styles: Quickly highlight titles and subtitlesThe first and easiest way to make use of styles is to use a pre-defined style. The following titleLabel uses the TitleStyle and thus will be printed in bold letters.
var titleLabel = new Label {
Text = "Title",
Style = Device.Styles.TitleStyle,
};
All styles currently available in the Device.Styles class are:
- BodyStyle
- CaptionStyle
- ListItemDetailTextStyle
- ListItemTextStyle
- SubtitleStyle
- TitleStyle
var redStyle = new Style(typeof(Label)) {
Setters = {
new Setter {
Property = Label.TextColorProperty,
Value = Color.Red,
},
},
};
Similarly to the titleLabel above, we create a new label and set its Style to our redStyle. So it will be displayed with red text.
var redLabel = new Label {
Text = "Red",
Style = redStyle,
};
Application resources: Share styles across the appIn a complex application you might want to define certain styles in one place and make them available to all classes working with the UI. Take the following greenStyle, for instance:
var greenStyle = new Style(typeof(Label)) {
Setters = {
new Setter {
Property = Label.TextColorProperty,
Value = Color.Green,
},
},
};Let’s assume we can’t assign it to a label directly. We can, however, store it in the Xamarin.Forms application resources. They are always accessible through the static application field Application.Current. Note that we need to instantiate a new ResourceDictionary when writing to it the very first time.
Application.Current.Resources = new ResourceDictionary();
Application.Current.Resources.Add("green", greenStyle);The key "green" can be arbitrarily chosen and is used for accessing the style later. For example, the following greenLabel applies the green style via the application resources and will be printed in green text color.
var greenLabel = new Label {
Text = "Green",
Style = Application.Current.Resources["green"] as Style,
};
Implicit styles: Address all UI elementsFinally, we look into implicit styles – a way to modify the styling of UI elements without explicitly assigning a style to each of them. First, we define a new style with blue text color.
var blueStyle = new Style(typeof(Label)) {
Setters = {
new Setter {
Property = Label.TextColorProperty,
Value = Color.Blue,
},
},
};
Now we add it to the application’s Resources without specifying a key. This will indicate that this style is to be applied to all UI elements of the respective type Label.
Application.Current.Resources.Add(blueStyle);Thus, the following normalLabel will be displayed with blue text color, although there is no style applied nor text color set.
var normalLabel = new Label {
Text = "Normal",
};
Now let’s put all labels together into one MainPage and look at the results.
MainPage = new ContentPage {
Content = new StackLayout {
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Children = {
titleLabel,
redLabel,
greenLabel,
normalLabel,
},
},
};
As you can see, the pre-defined title style, the explicitly assigned custom styles as well the implicit style for the last label are displayed correctly. In a real-life application with many pages and even more UI elements, Xamarin.Forms’ styling concept is a powerful tool to separate the page layout from a corporate styling.