This blog post is a part of Louis Matos’s Xamarin Month, where this months topic is Code Snippets.
For more information take a look at his blog and see the list of all the other authors and their posts.
C# Markup
C# Markup is a set of fluent helpers and classes to make building Xamarin Forms UI in declarative style C# a joy. C# Markup started life as CSharpForMarkup, and was added to Xamarin Forms in version 4.6. C# Markup is also included in .NET MAUI, the exciting next evolution of Forms, which amongst many other innovations adds support for MVU. See this C# Markup for MVU and MVVM Spec PR for next-gen features of C# Markup in MAUI.
Snippets and .editorconfig
When writing C# Markup pages for Xamarin Forms, some code patterns are often repeated with minor variations.
Below C# Markup snippets create some of these patterns, and let you specify variations with optional parameters. Type cm to see them all:
They can be downloaded here (source).
The source formatting in these snippets works best if you also download the C# Markup .editorconfig. This is a minimalistic override for *Page.cs files only; copy it to any location in your repo above your page files and below your own .editorconfig (if any). When you insert a code snippet in a *Page.cs file, these formatting settings will keep the snippet formatting intact. NJoy!
cmPage
To create a new C# Markup page with any type of root layout, add a *Page.cs class file, delete the empty class and in it’s place type cmPage + Tab. This will give you:
Enter the Page name and optionally select:
- Page base type
- Root layout type
- First child view type
(you can navigate through the snippet parameters with Tab and Shift+Tab)
UI Logic
Note that the page class is a partial class; if at some point your page needs UI logic (e.g. for animation or UI event handlers), this makes it easy to add a *Page.logic.cs partial class file. At that point you can also move the base class and the constructor to the logic file, to keep your markup file clean.
Hot Reload
Instead of assigning to Content directly in the page constructor, we do this in the Build method. Using this convention allows you to use LiveSharp for hot reloading C# Markup.
cmPageGrid
To create a new C# Markup page with a Grid type root layout that uses enums for rows and columns, add a *Page.cs class file, delete the empty class and in it’s place type cmPageGrid + Tab. This will give you:
Enter the Page name and optionally select:
- Page base type
- Root layout type
- First child view type
Components
One of the benefits of C# Markup is that it lets you structure your markup top-down with named components; it can read like a story. A component is simply a read-only property on the page, that news up a block of markup (if you want to pass parameters, use a function instead of a property). This improves markup maintainability, especially for large / complex markup.
Markup structured like this can look like:
Note that another benefit of components is that you don’t need to repeat the new keyword for every view.
cmLayout
To create any type of layout component, type cmLayout + Tab within your page class. This will give you:
Select the layout type, enter the component name, and optionally select the first child view type.
cmGrid
To create a Grid layout component that uses enums for rows and columns, type cmGrid + Tab within your page class. This will give you:
Enter the Component name, and optionally select:
- Grid component type
- First child view type
cmView
There are many ways to style views in C# Markup. Styles are an option – e.g. if you want to reuse styles that are used in XAML parts of your app. But if you do not have a style, a more developer friendly option is to simply use styled
components.
To do this, type cmView + Tab within your page class. This will give you:
Select the layout type and enter the component name, and then style / customize the view. E.g.:
Contribute
Do you have requests or ideas for more C# Markup snippets? Put them in the CSharpForMarkup issues or make a pull request.
Thanks and NJoy C# Markup!