Xamarin.Forms Themes were announced at Evolve 2016 and are available as a preview for customers to try and provide feedback.
A theme is added to a Xamarin.Forms application by including the Xamarin.Forms.Theme.Base Nuget package, plus an additional package that defines a specific theme (eg. Xamarin.Forms.Theme.Light) or else a local theme can be defined for the application.
IMPORTANT: You should also follow the steps to load theme assemblies (below)
by adding some boilerplate code to the iOS
AppDelegate and Android
MainActivity. This will
be improved in a future preview release.
The Light and Dark themes both define a specific visual appearance for the standard controls. Once you add a theme to the application's resource dictionary, the appearance of the standard controls will change.
The following XAML markup shows some common controls:
<StackLayout Padding="40"> <Label Text="Regular label" /> <Entry Placeholder="type here" /> <Button Text="OK" /> <BoxView Color="Yellow" /> <Switch /> </StackLayout>
These screenshots show these controls with:
- No theme applied
- Light theme (only subtle differences to having no theme)
- Dark theme
StyleClass property allows a view's appearance to be changed
according to a definition provided by a theme.
<StackLayout Padding="40"> <BoxView StyleClass="HorizontalRule" /> <BoxView StyleClass="Circle" /> <BoxView StyleClass="Rounded" /> </StackLayout>
This renders with light and dark as follows:
In addition to automatically styling the common controls
the Light and Dark themes currently support the following classes
that can be applied by setting the
StyleClass on these controls:
Could not load file or assembly 'Xamarin.Forms.Theme.Light' or one of its dependencies
In the preview release, themes may not be able to load at runtime. Add the code shown below into the relevant projects to fix this error.
In the AppDelegate.cs add the following lines after
var x = typeof(Xamarin.Forms.Themes.DarkThemeResources); x = typeof(Xamarin.Forms.Themes.LightThemeResources); x = typeof(Xamarin.Forms.Themes.iOS.UnderlineEffect);
In the MainActivity.cs add the following lines after
var x = typeof(Xamarin.Forms.Themes.DarkThemeResources); x = typeof(Xamarin.Forms.Themes.LightThemeResources); x = typeof(Xamarin.Forms.Themes.Android.UnderlineEffect);