Developer Docs - Mobile Docs - Walkthrough

Learn how to incorporate all of the built-in styling utilities to build responsive and stylistic views.

Getting Started

Rock Mobile provides a rich set of typography, color, and utility classes designed to make building responsive and visually consistent UIs easy. These classes can be used not only within the predefined blocks and components but also in your own custom XAML layouts.

Enough talk... let's dive in! In this walkthrough, we're going to build a "Person" card that automatically adapts to both light and dark modes, ensuring a seamless user experience regardless of the theme.

To start, let's create the base of our "Person" card. This card will display a person's name in a simple yet elegant design, leveraging the utility classes provided by the mobile shell. Here's the XAML code for our base card:

Let’s take a closer look at what’s happening in this XAML code. There are two elements that utilize our custom utility classes.

2.<Rock:Avatar>: Displays an avatar for the current person.  

Applying these styles results in a theme-responsive card.

In this walkthrough, we've explored how to leverage Rock Mobile's powerful built-in styling utilities to create responsive and visually appealing user interfaces. By using these utilities, you can ensure that your designs are both consistent and adaptable, providing a seamless user experience across different themes, including light and dark modes.