Style Xaml applications with CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Content XamlCSSTestApp-MainWindow image added Dec 17, 2017
XamlCSS.Packager Version 2.2.0-pre6 Aug 31, 2018
XamlCSS.Tests Attached property "ApplyStyleImmediately" to force reevaluation of cu… May 16, 2018
XamlCSS.UWP.Packager Version 2.2.0-pre6 Aug 31, 2018
XamlCSS.UWP.TestApp Fixes to run all test apps in release mode May 1, 2018
XamlCSS.UWP.Tests misc Apr 22, 2018
XamlCSS.UWP TreeNodeProvider: Fix UWP, XamarinForms Sep 5, 2018
XamlCSS.WPF.Packager Version 2.2.0-pre6 Aug 31, 2018
XamlCSS.WPF.TestApp WPF: workaround: children of Frame don't have parent set May 10, 2018
XamlCSS.WPF.Tests Fix clr-namespace: Type.GetType(...) needs full qualified typename - … Apr 30, 2018
XamlCSS.WPF TreeNodeProvider: Fix UWP, XamarinForms Sep 5, 2018
XamlCSS.XamarinForms.Packager Version 2.2.0-pre6 Aug 31, 2018
XamlCSS.XamarinForms.TestApp Version 2.2.0-pre5 May 16, 2018
XamlCSS.XamarinForms.Tests Version 2.2.0-pre5 May 16, 2018
XamlCSS.XamarinForms TreeNodeProvider: Fix UWP, XamarinForms Sep 5, 2018
XamlCSS TreeNodeProvider: Fix UWP, XamarinForms Sep 5, 2018
docs Fixed docs gitignore Feb 12, 2017
.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 Version 2.2.0-pre5 May 16, 2018
XamlCSS.v2.ncrunchsolution Updated AngleSharp Sep 10, 2016
XamlCSS.v3.ncrunchsolution Fixes to run all test apps in release mode May 1, 2018

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}"