Xaml + CSS = XamlCSS (WPF, UWP, Xamarin.Forms)


#1

Hello community!

XamlCSS enables developers to

  • structure UI with xaml and
  • style it with css.

Benefits

  • No verbose style declarations (xml is very verbose)
  • Simple values like numbers, colors, thickness,…
  • Use of markup-extensions like Binding, StaticResource and DynamicResource
  • Full support for css-selectors:
  • Custom, mergeable, semantic styles (aka css-classes) like “warning”, “important”, “default”, “primary”,…
  • Styling based on hierarchy like .warning Button {...} (“if button in a warning, then…”)
  • Detects UI-structure changes (added/removed controls)
  • Live designer-preview for WPF and UWP
  • MIT license

Supported Platforms

XamlCSS is available on all xaml platforms

  • WPF
  • UWP
  • Xamarin.Forms (Android, iOS, WinRT)

NuGet Packages



GitHub

Example: WPF-Designer + Css Code

Personal Note

This project is just at its beginning, but it’s more than a proof of concept - it works as expected although some features like triggers and viewstates are currently missing. But it shows what is possible even without native support from the frameworks.

It’s main goal is:
Show that css could definitely have its place in the xaml ecosystem!

If you like this project: Spread the word - maybe some time in the future Microsoft enables css in WPF, Xamarin.Forms and UWP natively!

David Rettenbacher


#2

This project is so creamy. It’s about time! I have been waiting for something like this for years. Congratulations, David. And thank you for this awesome job!


#3

XamlCSS 2.0.0 Preview

Yesterday I released a new pre-release version on nuget: XamlCSS 2.0.0-pre1:

New Features

Version 2.0.0 comes with some very big improvements:

More Information

For more information have a look at the XamlCSS-wiki.

There you find more examples of how you use css with Xaml applications.

Feedback

As you might expect, I would greatly appreciate your feedback on your experience - whether good or bad - of using XamlCSS!
If you find bugs or want to suggest features, please use the XamlCSS issue page to report them back to me.

PS: @SuperJMN Thanks :slight_smile:

*) Only supported on WPF and Xamarin.Forms


.NET Foundation Website | Blog | Projects | Code of Conduct