Xamarin.Forms Theming with CSS and Telerik UI

Get a glimpse of how you can style Xamarin.Forms apps with a combination of XAML Styles and CSS.

Mobile apps often shoot for a consistent user experience. Given the ruthlessly short attention span of most mobile app users, consistency of user experience is one way to keep the user engaged throughout a single usage of the app. An app user interface should have a similar look all throughout and behave uniformly. Consistency in colors, placements and animations can make different app sections feel like a part of one family - leading to a smooth and natural user experience.

One way to achieve UI consistency is to use a style theme. All resources used in styling app interface live together - styles are shared and changes trickle down throughout app UI. If building cross-platform apps with Xamarin, Telerik UI for Xamarin can also aid in app-wide consistency with UI controls that are rich, performant and exude similar styling. This is achieved using a built-in Telerik theme, providing developers consistent app-wide XAML styles, as well as customization options.

There is a new kid on the Xamarin app styling block though - CSS, and while met with hesitancy, it is here to stay. Is it blasphemy to mix and match CSS with XAML styles? Could CSS play a role in app-wide theming for UI consistency? This article explores the complex yet realistic world of using XAML styles with CSS to maintain app-wide themes for delightful user experiences.

Let's get started displaying a basic list of strings, before we look into its styling options. While there are several ways of bringing in Telerik UI for Xamarin bits in your Xamarin.Forms project, arguably the easiest one is to just get the NuGet package. You can get the whole suite or pick one of the customized NuGet packages based on the UI controls you are going to be using.

Next up, let's start with an new XAML page and its code-behind. First, we set up some sample data. No MVVM pattern here - picking up an MVVM framework should be need-based, not because of peer pressure.

That's it. When we run our app, we get the vanilla ListView from Telerik UI for Xamarin and it behaves exactly the same way in iOS, Android and UWP.

Notice that there is not much styling to our ListView - it is feature rich, but looks simplistic for now.

How to Theme

Next up, let us give our vanilla ListView some styling flare. This can be done with XAML styles that are inline within the ListView definition, but this makes it harder to maintain. Ideally, you'll want all uses of ListView within your app to have similar looks and behaviors. This also holds true for other UI components within your app as well - everything needs to feel coherent.

A theme helps here - you have one place define all your styles and maintain consistency. Telerik UI for Xamarin ships with a default Blue theme that you could easily tap into. It is part of the Telerik.XamarinForms.Common assembly - all one has to do is create a mergedResource Dictionary in the project App.xaml file, like so:

The needed XAML styles that apply to the ListView have now been pulled out of the DLL into an app-wide Resource Dictionary - you can see that the ListView starts to look a little more polished and shows the blue theme colors on row selections.

CSS Styling

Now, there is a new way to style Xamarin.Forms visual elements - it's CSS. While met with some hesitation, CSS offers some unique styling benefits and opens up code sharing between web & mobile apps. Switch to a Beta Xamarin.Forms NuGet package and you can play around with CSS styling of Xamarin.Forms apps. For now, you can style most out-of-the-box UI visual elements with CSS styles - and you get to write valid CSS with extensive Selector support.

Could CSS have a play in styling Telerik UI for Xamarin components? Turns out, most of the visual part of our ListView is defined through the ItemTemplate - and you'll mostly use standard Xamarin.Forms controls here. For any container control, the ItemTemplate is what dictates the inner UI - and all of it is open to styling with CSS.

To try this out, let us pull in an external CSS stylesheet as a ContentPage Resource and give our Label inside the ItemTemplate a style, like so:

Run the app and you'll see CSS getting in the weeds - styling repeating UI components in a Telerik UI for Xamarin ListView. Hallelujah!

Theme Customizations

Having an app-wide style theme is a great step towards achieving UI consistency throughout the app. However, developers or designers may need to tweak a built-in style theme to suit their app needs - little customizations to tailor the granular details. In the default Telerik Blue theme, there are uniform styles defined for a lot of controls - you have the option to override them of course. This is a great way to start with a polished theme throughout the app, but make little customizations to make things your own.

Follow the documentation and you'll see that the ListView has several coloring guidelines in the default theme. In your merged ResourceDictionary, you can easily define your own colors while keeping the rest of the theme unchanged, like so:

The result is harmony - and pure flexibility for developers to style their Xamarin.Forms pages and UI any way they desire.

Handy Benefits

There are some benefits to be drawn when we style complex Telerik UI with CSS - style definitions trickle down easily. To try this out, let us stick in a StackLayout in our ListViewItemTemplate, like so:

Now in our CSS file, we have a named style class that applies to the Label inside the ItemTemplate. But there is now also another style that applies to direct children Label elements that are inside a StackLayout.

Guess who wins? Last style in - you can envision the flexibility that cascading CSS styles bring to the table.

Another interesting connotation is CSS styles being able to refer complex Telerik UI directly and tweaking how UI components are rendered. Full caveat here: some core styles of the ListView from Telerik UI for Xamarincannot be updated from CSS yet. This needs engineering work - we are looking into feasibility and customer interest.

Having said that, you can still refer to the Telerik ListView by name in a CSS style class and CSS properties that act on generic Visual Elements will work, like visibility, direction, margin, padding etc. While this is not true localization to support Right-to-Left languages, you can see how easy it is to switch around ListView content with CSS styles, like so:

#TelerikListView {
direction: rtl;
}

Simply grab translated right-to-left language strings from a resource file and you are golden.

Most complicated XAML UI controls (like the ListView or the Grid) employ the ItemTemplate approach to define repeating UI components and their behaviors. And for all such usages in Telerik UI for Xamarin controls, you can use CSS classes to style individual controls. With more complicated layouts, you can really start seeing the power of trickle down effects with CSS styles.

Say our ListView now shows an Edit button in each row to modify text - could be just a Button laid out horizontally in the ItemTemplate StackLayout, like so:

Go Boldly

App-wide UI consistency goes a long way towards a smooth user experience. And themes definitely help keeping styles organized in one place and making sure changes are applicable throughout. And if you're using Telerik UI for Xamarin controls in your Xamarin.Forms apps, you'll have a rich built-in theme out of the box - use it as is or customize it to fit your needs.

Once you push aside our pre-conceived hesitations against CSS styling of Xamarin.Forms apps, you'll see that CSS styles work beautifully in conjunction with XAML styles and can augment style theme customizations with cascading effects. So pick up whatever combination of tools you want to style your Xamarin.Forms apps with - and provide a delightful user experience.

Sam Basu

Sam Basu is a technologist, author, speaker, Microsoft MVP, gadget-lover and Progress Developer Advocate for Telerik products. With a long developer background, he now spends much of his time advocating modern web/mobile/cloud development platforms on Microsoft/Telerik technology stacks. His spare times call for travel, fast cars, cricket and culinary adventures with the family. You can find him on the internet.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.