If you’re familiar with mobile development, then you know that CSS is the go-to for styling your web applications. Starting with Xamarin Forms 3.0, CSS styling was added to allow for you to use many of the CSS selectors to modify the styles of your XAML. This allows for easier and more concise modification of the look and feel of your Xamarin App. The full documentation can be found here but if you’re interested in video tutorials, please click this link to gain access to Codebrains Tutorials. In this tutorial, we’ll go over some of the basics of CSS in Xamarin.

Internal Xamarin CSS Styling

One of the ways that CSS styling can be applied to a page is directly in the page’s Resources using a Systesheet tag.


            button {
                background-color: #DA1820;
                margin: 20;
                color: #000;
            }
Xamarin Inline CSS

Even though this may work for small styling changes, normally we’ll want for all of our components in the app to be more uniform. It’s best to use external styles.

External Xamarin CSS

First, we’ll want to create an external CSS file in our assets folder. Then we’re going to link to that file location in our StyleSheet tag.

<StyleSheet Source="/Assets/Styles/styles.css" />

We’ll change the color of the button to show that the button color has changed.

button {
    background-color: #70c405;
    margin: 20;
    color: #000;
}

Conclusion

Even though styling can be set directly in the XAML, moving your styling to CSS can improve maintainability. If you’d like to learn more, please check out some of our video tutorials here.

Codebrains Newsletter

Get weekly dev news and tutorials.

Powered by ConvertKit