-
Notifications
You must be signed in to change notification settings - Fork 28
How does it work?
XamlCSS builds on the built-in style-system each platform provides. It uses native Style-objects to apply values to dependency-properties. You can use simple values like strings, colors or numbers, but also markup-extensions like Binding, StaticResource and DynamicResource.
XamlCSS is divided into 4 areas:
- parsing and preprocessing
- element-matching
- generating styles
- appling/unapplying styles
Parsing is done using a handwritten css-parser to support the special css-syntax-features required to set all kinds of Xaml properties. During parsing, also preprocessing is done like replacing css-variables and included mixins, and converting nested style-selectors into "flat" style-selectors.
UI-element selection is performed with a custom selection-engine, which lets you run css-selections on hierarchies of elements at decent performance.
If an element gets added or removed from the ui-hierarchy, XamlCSS detects it and checks if it matches any selectors or if it should un-apply the styles.
Native Style-objects are generated depending on which selector matches which type. If more than 1 selector matches an element, a style just for this combination of selectors and element-type is generated: the styles get merged into the new one.
These Style-objects are stored in the ResourceDictionary of the application. Each Style is assigned to a style-sheet, so even if different style-sheets define the same selectors, both are retained and handled separately.
XamlCSS supports multiple style-sheets. One style-sheet can be applied to only one element at a time.
Child-style-sheets inherit the style-rules of style-sheets higher in the ui-hierarchy, but override property-values, variables and mixins if they happen to have the same identifiers.
Style-sheets handle all elements beneath them - except sub-elements that have another style-sheet attached. In this case the child-style-sheet takes over the sub-hierarchy.
Updates to elements are scheduled. If the platform supports it it subscribes to render-events. Otherwise a render-callback is invoked by a timer every 16ms.