Skip to content
Style Xaml applications with CSS
C# CSS
Branch: master
Clone or download
Latest commit 70a533d Feb 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Content Check in 2.2.0-pre7 Nov 19, 2018
XamlCSS.Tests Fix tests Jan 27, 2019
XamlCSS.UWP.TestApp Xamarin.Forms: Update XamlCSS.XamarinForms to Xamarin.Forms 3.x due t… Feb 3, 2019
XamlCSS.UWP.Tests Xamarin.Forms: Update XamlCSS.XamarinForms to Xamarin.Forms 3.x due t… Feb 3, 2019
XamlCSS.UWP XamlCSS 2.2.0 Feb 10, 2019
XamlCSS.WPF.TestApp Xamarin.Forms: Update XamlCSS.XamarinForms to Xamarin.Forms 3.x due t… Feb 3, 2019
XamlCSS.WPF.Tests Xamarin.Forms: Update XamlCSS.XamarinForms to Xamarin.Forms 3.x due t… Feb 3, 2019
XamlCSS.WPF XamlCSS 2.2.0 Feb 10, 2019
XamlCSS.XamarinForms.TestApp XamlCSS 2.2.0 Feb 10, 2019
XamlCSS.XamarinForms.Tests Xamarin.Forms: Update XamlCSS.XamarinForms to Xamarin.Forms 3.x due t… Feb 3, 2019
XamlCSS.XamarinForms XamlCSS 2.2.0 Feb 10, 2019
XamlCSS XamlCSS 2.2.0 Feb 10, 2019
docs
.gitignore gitignore Jan 21, 2017
LICENSE Initial commit May 14, 2016
README.md Typos and NuGet shield Jan 21, 2018
SharedAssemblyInfo.cs Fixes to run all test apps in release mode May 1, 2018
XamlCSS.sln XamlCSS 2.2.0 Feb 10, 2019
XamlCSS.v2.ncrunchsolution Updated AngleSharp Sep 10, 2016
XamlCSS.v3.ncrunchsolution Fixes to run all test apps in release mode May 1, 2018
global.json Update XamlCSS/XamlCSS.WPF/XamlCSS.UWP to .NET Standard Feb 2, 2019

README.md

XamlCSS

Style Xaml-applications with CSS - get it for WPF, Xamarin.Forms or UWP and start right here!

Why XamlCSS For XAML?

Concise

Styling with (s)css gives a more concise declaration of your styles. XamlCSS even supports a subset of SCSS features like selector nesting, css-variables and mixins. This enables you to make your declarations even more concise.

Freely Combine Styles

Other than vanilla Xaml-styles, css allows you to freely combine styles - no BasedOn restriction. Even better, this is done for you behind the curtains!
And if you really want to combine styles yourself use @extend.

Semantic Meaning

Semantic meaning can be conveyed, i.e. is your ui-element important, a warning, a header or a sub-header? This is achieved by using css-classes.

Based On View-Hierarchy

Css takes into account where inside your view-hierarchy your element gets added. No need to manually assigning a style.
It also detects that an element was added or removed.
In combination with semantic selectors you can style a button differently just because it is in a warning dialog. And if you want to create a dark, a light and a custom theme, just switch the css-class-name on your root view-element and all elements update themselves automatically.

Support For Xaml-Features

You can use markup-extensions and triggers in your (s)css.

In css you cannot declare an instance of an object as you can do in xaml. A Storyboard for example must be declared as usual in a ResourceDictionary but then can be referenced in css with a markup-extension.

Designer Support

XamlCSS builds on top of the native Xaml-Style implementations, so it works with the WPF and UWP designer. For Xamarin.Forms there is LiveXAML.

Supported platforms

Supported Features

  • CSS selectors
  • Remove and reapply styles
  • Detect new elements and apply matching styles
  • Support Binding * (except vanilla UWP)
  • Support StaticResource *
  • Support DynamicResource * (except vanilla UWP)
  • Set simple values like Foreground, FontSize, FontStyle,... by CSS
  • Triggers
  • Multiple StyleSheets
  • Nested selectors (like Sass)
  • Css-variables
  • Import of other css-files
  • Mixins

Not (yet) supported

  • Visual State Manager

For more information look at the provided test-apps in the solution to see how to initialize and use XamlCSS.

*) Breaking change in binding syntax in 2.0.0: instead of {Binding value} you now write #Binding value or "{Binding value}"

You can’t perform that action at this time.