XamlCSS.XamarinForms 2.2.0

Style XAML applications with CSS

There is a newer prerelease version of this package available.
See the version list below for details.
Install-Package XamlCSS.XamarinForms -Version 2.2.0
dotnet add package XamlCSS.XamarinForms --version 2.2.0
<PackageReference Include="XamlCSS.XamarinForms" Version="2.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add XamlCSS.XamarinForms --version 2.2.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

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 &quot;{Binding value}&quot;

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 &quot;{Binding value}&quot;

Release Notes

2.2.0
           - #32: .NET Standard - Xamarin.Forms: minimum Xamarin.Forms 3.x required (.NET Standard 2.0)
           - #82: VisualTree/LogicalTree Match-Optimization Marks Not-Traversed Nodes as Traversed
           - #83: Xamarin.Forms: support modals
           - #84: WPF, UWP: :visual-tree Pseudo Selector Not Matching Correctly On Parent Elements

           2.2.0-pre7
           - Live edit: '#' should not crash application
           - Tree-node-matching performance: if general parent selector already matched don't evaluate for elements down the tree

           2.2.0-pre6
           - Attached property "ApplyStyleImmediately"
           - Performance improvement (IsInLogicalTree/IsInVisualTree)
           - Fixed element-loaded-issues
           - Faster style-apply on app-start

           2.2.0-pre5
           - #79 Nth-Selectors With Negative Factor Are Not Handled Correctly

           2.2.0-pre4
           - Major performance enhancements
           - #76 Support Attribute Selectors With Change-Tracking

           2.2.0-pre3
           - #72 StyleSheet Should Update If SingleBaseStyleSheet Changes
           - Removed Measure calls used for exact performance profiling
           - Remove missed debug messages

           2.2.0-pre2
           - #69 Support Selectors With Visual Tree Elements Like ScrollBar: :visualtree selector, logical tree and visual tree
           - #71 Increase Performance Of Applying Styles: new tree traversing (performance, optimization)
           - #73 Support AOT By Setting Preserve Attribute
           - Wrong universal-selector if not first selector-fragment
           - Pseudo-selector not parsed if combined with another selector (comma separated)

           2.2.0-pre1
           - #52 Attributes Cannot Be Matched - One-Time Matching
           - #53 Asterisk Selector Has Wrong Specificity
           - #54 String Value Throws Exception In Property- And DataTriggers
           - #59 Preview-Friendly Basing StyleSheets On Others
           - #62 Variable Cannot Reference Another Variable
           - #64 Support Xml-Namespace mapping
           - #65 Remove AngleSharp Dependency

           2.1.0
           - #39 Ampersand Could Be Anywhere in Selector
           - #40 Support @extend
           - #43 Wrong Selector Generated When Using Ampersand In The Middle Of Selector
           - #44 DataTriggers: Support Custom Markup-Extension-Expressions
           - #45 DataTriggers: Support Variables In Markup-Expressions And Values
           - #46 PropertyTriggers: Support Variables In Value-Expressions
           - #47 UWP, Xamarin.Forms Update Loop: Massive Performance Problems If Errors In CSS
           - #48 Support Parsing Floating Point Numbers Without Leading Zero
           - #49 Support Import Of Css Stored In Application.Resources
           - #50 Css-Parser: Parser Hangs If Document Only Contains "At" Character

           2.0.1
           - #36 Fixed "XamlCSS does not support unicode escapes"

           2.0.0
           - #29 Support comments
           - #30 Support enter/exit trigger actions
           - #31 Better error information
           - Rewritten tokenizer, css-parser (performance, maintainability)
           - Fixed same selector property overrides
           - Support namespaces in markup-extensions

           2.0.0-pre1
           - #11 Nested selectors, css-variables
           - #23 Css imports
           - #24 Sass-like mixins
           - #27 Support triggers (property, data, event)
           - #28 Fixed bracket parsing
           - Dependency on PCLStorage

           1.0.6
           - #20 Performance: Selectors are parsed too often
           - #21 [XamarinForms] UI Timer can overtake itself
           - #22 [XamarinForms] ListView Cells broken again in 1.0.5

           1.0.5
           - #13 Xamarin.Forms: Style disappears when resuming Android app
           - #19 Decimal Number not parsed correctly
           - #18 Class not properly parsed in grouped selectors
           - #13 CSS-Parser: Broken String-Literal Handling

           1.0.4
           - Fixed: Css namespacing support fixed
           - Fixed: Style disappears when resuming Android app
           - Fixed: Css.Initialize(Application.Current) doesn't always enable styling
           - Fixed: CarouselPage is not supported

           1.0.3
           - Fixed NullReferenceException

           1.0.2
           - CssParser Tokenizer fixed
           - Better Logical-/Visual-Tree handling

           1.0.1
           - Define stylesheet in Xaml-files with css text
           - Fixed selector specificity

           1.0.0
           - Performance/memory improvements: Caching dom-elements, dom-children,...
           - Batch-Rendering
           - Better support for MarkupExtensions
           - Xamarin.Forms 2.3.2.127

           0.9.0-beta-1
           - Added better css-quotes support
           - Support modal pages
           - fixed bool value support
           - Fixed VisualTreeCell.Include="true"
           - Performance improvement
           - AngleSharp 0.9.8
           - Xamarin.Forms 2.3.1.114

           0.9.0-alpha-5
           - Fix partial updates: not finding all parents while executing css-parser

           0.9.0-alpha-4
           - VisualTreeHelper.Include didn't work due to bug converting Element to VisualElement - always resulted in null

           0.9.0-alpha-3
           - Support more general UI types

           0.9.0-alpha-2
           - fixed NullReferenceException

           0.9.0-alpha
           - experimental support for MarkupExtensions

           0.8.0
           - Support for attached properties
           - Support for CSS-namespaces

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
2.2.1-pre2 51 5/1/2020
2.2.1-pre1 156 4/4/2020
2.2.0 589 2/10/2019
2.2.0-pre7 228 9/5/2018
2.2.0-pre6 205 8/31/2018
2.2.0-pre5 344 5/12/2018
2.2.0-pre4 309 5/6/2018
2.2.0-pre3 309 5/1/2018
2.2.0-pre2 315 4/30/2018
2.2.0-pre1 364 2/11/2018
2.1.0 685 12/9/2017
2.0.1 484 7/23/2017
2.0.0 396 5/21/2017
2.0.0-pre1 377 2/9/2017
1.0.6 432 1/22/2017
1.0.4 406 12/18/2016
1.0.3 387 11/29/2016
1.0.2 361 11/29/2016
1.0.1 377 11/22/2016
0.9.0-beta-1 352 9/10/2016
0.9.0-alpha-5 365 6/27/2016
0.9.0-alpha-4 364 6/26/2016
0.9.0-alpha-3 342 6/24/2016
0.9.0-alpha-2 374 6/17/2016
0.9.0-alpha 381 5/22/2016
0.8.0 440 5/21/2016
0.8.0-beta-3 384 5/18/2016
0.8.0-beta 617 5/16/2016