-
Notifications
You must be signed in to change notification settings - Fork 28
Why CSS for Xaml?
TL;DR
Getting Started
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.
Other than vanilla Xaml-styles, css allows you to feely 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 can be conveyed, i.e. is your ui-element important, a warning, a header or a sub-header? This is archieved by using css-classes.
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 i.e. 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.
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.
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.
| Feature | XamlCSS | Xaml |
|---|---|---|
| Directly setting values | <Button TextColor="Red" /> |
<Button Foreground="Red" /> |
| Apply styles to types of controls | Button { TextColor: Red; } |
<Style TargetType="{x:Type Button}"><Setter Property="Foreground" Value="Red" /></Style>
|
| Base styles on one another | .style1 { @extend(.styleBase); } |
<Style x:Key="style1" BasedOn="{StaticResource styleBase}">...</Style> |
| Apply style to one specific control |
#button-a { TextColor: Red; } applied <Button Name="button-a" />
|
<Style x:Key="styleForButtonA">...</Style>applied <Button Style="{StaticResource styleForButtonA}" />
|
| Apply styles to categories ("classes") of controls |
.warning { TextColor: Orange; } applied <Button css:Css.Class="warning" />
|
- |
| Apply styles to categories of specific control-types | Button.warning { TextColor: Orange; } |
- |
| Consider nesting of controls |
.message-box .footer Button.warning {TextColor: Orange;} or .message-box {.footer {Button.warning {TextColor: Orange;}}}
|
- |
| Combine styles from many categories | <Button class="warning primary flat" /> |
- (create style for each used combination) |
Css is far more lightweight, concise and versatile than existing Xaml-styling. This project aims to bring these features of Css to Xaml!
*) Personal view