Telerik blogs
XFCSSTheming-870x220
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.

The List

What do most mobile apps have in common? There is usually a list of things. And a ListView is often the developer's choice in UI to display the list. Sure, there is a default ListView in Xamarin.Forms, but the ListView in Telerik UI for Xamarin raises the game substantially. There are features that developers should just not have to re-invent from scratch - like sorting, grouping, filtering, layouts, swipe actions, pull to refresh and flexible styling.

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.

public class SourceItem
{
  public SourceItem(string name)
  {
    this.Name = name;
  }

  public string Name { get; set; }
}

public class ViewModel
{
  public ViewModel()
  {
    this.Source = new List<SourceItem> { 
      new SourceItem("Tom"),
      new SourceItem("Anna"),
      new SourceItem("Peter"),
      new SourceItem("Teodor"),
      new SourceItem("Lorenzo"),
      new SourceItem("Andrea"),
      new SourceItem("Martin")
    };
  }

  public List<SourceItem> Source { get; set; }
}

Now that we have a Source in our dummy ViewModel holding some data, let us set up our ListView in XAML markup:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StylingWithCSS.TelerikUI"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input">
  <ContentPage.Content>
    <telerikDataControls:RadListView x:Name="TelerikListView" Margin="0,80,0,0">
      <telerikDataControls:RadListView.ItemTemplate>
        <DataTemplate>
          <telerikListView:ListViewTemplateCell>
            <telerikListView:ListViewTemplateCell.View>
              <Grid>
                <Label Margin="10" Text="{Binding Name}" />
              </Grid>
            </telerikListView:ListViewTemplateCell.View>
          </telerikListView:ListViewTemplateCell>
        </DataTemplate>
      </telerikDataControls:RadListView.ItemTemplate>
    </telerikDataControls:RadListView>
  </ContentPage.Content>
</ContentPage>

Notice that Label in our ListView ItemTemplate is already bound to the Name property of the binding context object. Let's feed the hungry ListView some data, like so:

ViewModel VM = new ViewModel();
this.TelerikListView.ItemsSource = VM.Source;

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 merged Resource Dictionary in the project App.xaml file, like so:

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StylingWithCSS.App"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
             xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common">
  <Application.Resources>
    <!-- Application resource dictionary -->
    <telerikCommon:RadResourceDictionary>
      <telerikCommon:RadResourceDictionary.MergedDictionaries>
        <ResourceDictionary MergedWith="telerikCommon:BlueResources"/>
        <ResourceDictionary MergedWith="telerikDataControls:TelerikThemeStyles" />
      </telerikCommon:RadResourceDictionary.MergedDictionaries>
    </telerikCommon:RadResourceDictionary>
  </Application.Resources>
</Application>

Back in our XAML page markup, we simply need to set the StyleClass in our ListView to point to the Telerik theme:

<telerikDataControls:RadListView x:Name="TelerikListView"
                                 Margin="0,80,0,0"
                                 StyleClass="TelerikTheme">
  ...
  ...
</telerikDataControls:RadListView>

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:

<ContentPage.Resources>
  <StyleSheet Source="MyStyle.css" />
</ContentPage.Resources>
<ContentPage.Content>
  <telerikDataControls:RadListView x:Name="TelerikListView"
                                   Margin="0,80,0,0"
                                   StyleClass="TelerikTheme">
    <telerikDataControls:RadListView.ItemTemplate>
      <DataTemplate>
        <telerikListView:ListViewTemplateCell>
          <telerikListView:ListViewTemplateCell.View>
            <Grid>
              <Label Margin="10"
                     Text="{Binding Name}"
                     StyleClass="MyLabel" />
            </Grid>
          </telerikListView:ListViewTemplateCell.View>
        </telerikListView:ListViewTemplateCell>
      </DataTemplate>
    </telerikDataControls:RadListView.ItemTemplate>
  </telerikDataControls:RadListView>
</ContentPage.Content>

In the CSS file, we can actually define the named style class:

.MyLabel {
  color: red;
}

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:

<Application.Resources>
  <!-- Application resource dictionary -->
  <telerikCommon:RadResourceDictionary>
    <telerikCommon:RadResourceDictionary.MergedDictionaries>
      <ResourceDictionary MergedWith="telerikCommon:BlueResources">
        <!-- `ListView` -->
        <Color x:Key="ListViewItemBorderColor">Orange</Color>
        <Color x:Key="ListViewSelectionColor">Orange</Color>
        <Color x:Key="ListViewBackgroundColor">Lightgreen</Color>
      </ResourceDictionary>
      <ResourceDictionary MergedWith="telerikDataControls:TelerikThemeStyles" />
    </telerikCommon:RadResourceDictionary.MergedDictionaries>
  </telerikCommon:RadResourceDictionary>
</Application.Resources>

Hopefully, you're past the initial blasphemous shock of seeing CSS support in styling Xamarin.Forms visual elements. Turns out, customized XAML styles in app-wide themes can happily co-exist with page-level CSS styles, like so:

^ContentPage {
  padding: 20;
  background-color: lightgreen;
}

.MyLabel {
  color: red;
}

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 ListView ItemTemplate, like so:

<telerikDataControls:RadListView.ItemTemplate>
  <DataTemplate>
    <telerikListView:ListViewTemplateCell>
      <telerikListView:ListViewTemplateCell.View>
        <StackLayout Orientation="Horizontal">
          <Label Margin="10" Text="{Binding Name}" StyleClass="MyLabel" />
        </StackLayout>
      </telerikListView:ListViewTemplateCell.View>
    </telerikListView:ListViewTemplateCell>
  </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

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.

^ContentPage {
  padding: 20;
  background-color: lightgreen;
}

.MyLabel {
  color: red;
}

stacklayout>label {
  color: blue;
}

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 Xamarin cannot 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:

<telerikListView:ListViewTemplateCell>
  <telerikListView:ListViewTemplateCell.View>
    <StackLayout Orientation="Horizontal">
      <Label Margin="10" Text="{Binding Name}" StyleClass="MyLabel" />
      <Button Text="Edit" />
    </StackLayout>
  </telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>

Here's our CSS style and the corresponding results - fun stuff, isn't it?

stacklayout button {
  color: red;
  border-color: #9acd32;
  font-style: italic;
}

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.


SamBasu
About the Author

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.

Related Posts

Comments

Comments are disabled in preview mode.