Theme files include a number of logical blocks which can be separated depending on their function - StyleSheets, StyleFilters, and StyleActions:
There two kinds of StyleSheets in a theme file - a StyleSheet serving as a root component and StyleSheets that contain StyleActions.
|
|
purpose |
parent component |
child component |
examples |
|
<StyleSheet xmlns="http://querix.com"> ... </StyleSheet> |
as a root component, contains all the theme code components regardless of their type and number
|
— |
StyleSheet StyleFilter StyleAction |
|
|
<StyleSheet> ... </StyleSheet> |
contains StylesFilters and their children |
StyleFilter |
StyleFilter StyleAction |
<StyleSheet> <WithPseudoClassFilter PseudoClassName="Inactive"> ... <WithPseudoClassFilter PseudoClassName="Inactive"> <StyleSheet>
<StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet>
|
StyleFilters are used to filter theme elements depending on their name, class, type, or function.
|
name |
purpose |
parent component |
child component |
examples |
|
ElementFilter
<ElementFilter ElementName="..."> ... </ElementFilter>
|
adds an element to a theme style takes an element name as an attribute: ElementName="..."
|
StyleSheet |
StyleAction (via StyleSheet) StyleFilter (via StyleSheet)
|
<ElementFilter ElementName="Button"> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </ElementFilter>
<ElementFilter ElementName="Button"> <StyleSheet> <ElementIdFilter Identifier="bt1"> ... </ElementIdFilter> </StyleSheet> </ElementFilter>
|
|
<ElementFilter ElementName="Button"> <ElementFilter ElementName="Label"> ... </ElementFilter> </ElementFilter> |
||||
|
ElementIdFilter
<ElementIdFilter Identifier="..."> ... </ElementIdFilter>
|
adds a With ID... filter to a theme style takes an identifier as an attribute: Identifier="..." |
StyleSheet |
StyleAction (via StyleSheet) |
<ElementIdFilter Identifier="bt1"> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </ElementIdFilter>
|
|
WithClassFilter
<WithClassFilter ClassName="..."> ... </WithClassFilter>
|
adds a With class... filter to a theme style takes a class name as an attribute: ClassName="..." |
StyleSheet |
StyleAction (via StyleSheet) StyleFilter (via StyleSheet) |
<WithClassFilter ClassName="myclass"> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </WithClassFilter>
<WithClassFilter ClassName="myclass"> <StyleSheet> <ElementFilter ElementName="ReportViewerConfig"> ... </ElementFilter> </StyleSheet> </WithClassFilter>
|
|
WithPseudoClassFilter
<WithPseudoClassFilter PseudoClassName="..."> ... </WithPseudoClassFilter>
|
adds a With Pseudo-class... filter to a theme style takes a pseudo-class name as an attribute: PseudoClassName="..." |
StyleSheet |
StyleAction (via StyleSheet) StyleFilter (via StyleSheet) |
<WithPseudoClassFilter PseudoClassName="Active"> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </WithClassFilter>
<WithPseudoClassFilter PseudoClassName="Active"> <StyleSheet> <ElementFilter ElementName="Label"> ... </ElementFilter> </StyleSheet> </WithPseudoClassFilter>
|
|
DescendantFilter
<DescendantFilter> ... </DescendantFilter>
|
adds a Descendants... filter to a theme style |
StyleSheet |
StyleAction (via StyleSheet) StyleFilter (via StyleSheet) |
<DescendantFilter> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </DescendantFilter>
<DescendantFilter> <StyleSheet> <ElementFilter ElementName="Button"> ... </ElementFilter> </StyleSheet> </DescendantFilter>
|
|
ChildFilter
<ChildFilter> ... </ChildFilter>
|
adds a Children... filter to a theme style |
StyleSheet |
StyleAction (via StyleSheet) StyleFilter (via StyleSheet) |
<ChildFilter> <StyleSheet> <DoStyleAction> ... </DoStyleAction> </StyleSheet> </ChildFilter>
<ChildFilter> <StyleSheet> <ElementFilter ElementName="Button"> ... </ElementFilter> </StyleSheet> </ChildFilter>
|
StyleActions are used to apply properties to theme elements.
|
|
purpose |
parent component |
child component |
examples |
|
DoStyleAction
<DoStyleAction> ... </DoStyleAction> |
indicates that a StyleAction is added serves as a parent for any StyleActions |
StyleSheet |
SetProperty |
<DoStyleAction> <SetProperty> <PropertyPath> <PropertyName>HideLabels</PropertyName> </PropertyPath> </SetProperty> </DoStyleAction>
|
|
SetProperty
<SetProperty> ... </SetProperty> |
adds a StyleAction to a theme style |
DoStyleAction |
PropertyPath PropertyValue |
<SetProperty> <PropertyPath> <PropertyName>Cursor</PropertyName> </PropertyPath> <PropertyValue>WaitCursor</PropertyValue> </SetProperty>
|
|
PropertyPath
<PropertyPath> ... </PropertyPath>
|
specifies the property path by including the names of the added property and its parent properties (if any) |
SetProperty |
PropertyName |
<PropertyPath> <PropertyName>Background</PropertyName> <PropertyName>FillColor</PropertyName> </PropertyPath>
<PropertyPath> <PropertyName>Font</PropertyName> </PropertyPath>
|
|
PropertyName
<PropertyName>...</PropertyName>
|
specifies the name of the added property |
PropertyPath |
— |
<PropertyName>IsRaised</PropertyName>
<PropertyName>Parameter</PropertyName>
|
|
PropertyValue
<PropertyValue>...</PropertyValue>
|
specifies the value of the added property can take attributes as described here |
PropertyPath |
— |
<PropertyValue>Cross</PropertyValue>
<PropertyValue type="Font" Bold="True" />
|
|
ApplyClass
<ApplyClass Name="..." />
|
adds an Apply class... action to a theme style takes a class name as an attribute: Name="..." |
DoStyleAction |
— |
<ApplyClass Name="mybutton" />
<ElementFilter ElementName="Browser"> <StyleSheet> <DoStyleAction> <ApplyClass Name="trusted" /> </DoStyleAction> </StyleSheet> </ElementFilter>
|
|
Include
<Include IncludeFileName="..." />
|
adds an Include... action to a theme style takes a name of the included file as an attribute: IncludeFileName="..."
|
DoStyleAction |
— |
<Include IncludeFileName="qx://application/my.qxtheme" /> |
Related articles:
