- PDF for offline use
- Sample Code:
- Related SDKs:
Let us know how you feel about this
last updated: 2017-03
iOS lets you apply visual property settings at a static class level rather than on individual objects so that the change applies to all instances of that control in the application.
This functionality is exposed in Xamarin.iOS via a static
on all UIKit controls that support it. Visual appearance (properties like as
tint color and background image) can therefore be easily customized to give
your application a consistent look. The Appearance API was introduced in iOS 5
and while some parts of it have been deprecated in iOS 9 it is still a good
way to achieve some styling and theming effects in Xamarin.iOS apps.
iOS allows you customize the appearance of many UIKit controls to make the standard controls conform to the branding you wish to apply to your application.
There are two different ways to apply a custom appearance:
Directly on a control instance – you can set the tint color, background image and title position (as well as some other attributes) on many controls including toolbars, navigation bars, buttons and sliders.
Set defaults on the Appearance static property – customizable attributes for each control are exposed via the
Appearancestatic property. Any customizations you apply to these properties will be used as the default for any control of that type that is created after the property is set.
The Appearance sample application demonstrates all three methods, as shown in these screenshots:
As of iOS 8, the Appearance proxy has been extended to TraitCollections.
AppearanceForTraitCollection can be used to set the default appearance on a
particular trait collection. You can read more about this in the
Introduction to Storyboards guide.
Setting Appearance Properties
In the first screen, the static Appearance class is used to style the buttons and yellow/orange elements like this:
// Set the default appearance values UIButton.Appearance.TintColor = UIColor.LightGray; UIButton.Appearance.SetTitleColor(UIColor.FromRGB(0,127,14), UIControlState.Normal); UISlider.Appearance.ThumbTintColor = UIColor.Red; UISlider.Appearance.MinimumTrackTintColor = UIColor.Orange; UISlider.Appearance.MaximumTrackTintColor = UIColor.Yellow; UIProgressView.Appearance.ProgressTintColor = UIColor.Yellow; UIProgressView.Appearance.TrackTintColor = UIColor.Orange;
The green element styles are set like this, in the
ViewDidLoad method which overrides the default values and the Appearance static class:
slider2.ThumbTintColor = UIColor.FromRGB (0,127,70); // dark green slider2.MinimumTrackTintColor = UIColor.FromRGB (66,255,63); slider2.MaximumTrackTintColor = UIColor.FromRGB (197,255,132);
progress2.ProgressTintColor = UIColor.FromRGB (66,255,63); progress2.TrackTintColor = UIColor.FromRGB (197,255,132);
Using UIAppearance in Xamarin.Forms
The Appearance API can be useful when
styling the iOS app
in Xamarin.Forms solutions. A few lines in the
AppDelegate class can help
to implement a specific color scheme without having to create a
This article introduced the new Appearance API available since iOS 5, and
provided a simple example of styling UIKit controls via their
Deprecated in iOS 9
The following functionality -
AppearanceWhenContainedIn- was deprecated in iOS 9 and is not recommended for use.
Set defaults that only apply within specific Types – using
AppearanceWhenContainedIn static method you can access an Appearance class
that lets you customize the control only when it is contained in the given type
– such as setting specific default values for buttons only when they appear in
a navigation bar.
The second and third screens use the same UIView subclass (
AppearanceWhenContainedIn to style the view differently. The
code below is for the ‘Black’ theme:
//button var style = UIButton.AppearanceWhenContainedIn(typeof(PlainView)); style.SetTitleColor(UIColor.Black, UIControlState.Normal); //slider var style1 = UISlider.AppearanceWhenContainedIn(typeof(PlainView)); style1.ThumbTintColor = UIColor.DarkGray; style1.MaximumTrackTintColor = UIColor.Gray; style1.MinimumTrackTintColor = UIColor.LightGray; //progress view var style2 = UIProgressView.AppearanceWhenContainedIn(typeof(PlainView)); style2.ProgressTintColor = UIColor.DarkGray; style2.TrackTintColor = UIColor.LightGray;