A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/warappa/XamlCSS/wiki/Css-Selectors-Quick-Reference below:

Css Selectors Quick Reference · warappa/XamlCSS Wiki · GitHub

I.e. Button, StackPanel, Image,...

Button
{
    Foreground: Red;
}

Selects controls by the x:Name attribute.

#ButtonNameInXaml
{
    Foreground: Red;
}
<Button x:Name="ButtonNameInXaml">OK</Button>

A freely choosable name with a meaning, i.e. important, warning, success, primary, hidden,...

.warning
{
    Foreground: Red;
}
<Button cssWPF:Css.Class="warning">OK</Button>

Taking the hierarchy of your layout in account.

Spaces mean "anywhere below" the left-hand expression, i.e. StackPanel Button means "All buttons in all StackPanels"

.message-box .footer Button
{
    Foreground: Red;
}

2.0.0 also supports an alternative syntax (see Nested Css Selectors):

.message-box {
    .footer {
        Button
        {
            Foreground: Red;
        }
    }
}
<StackPanel cssWPF:Css.Class="message-box">
    <TextBlock>Message</TextBlock>

    <StackPanel cssWPF:Css.Class="footer">
        <Button>OK</Button>
    </StackPanel>
</StackPanel>
Combine multiple Selectors

Multiple selectors can be combined by separating them with commas.
A control satisfying one or more of these selectors gets this style applied - the commas can be read as "OR".

#ButtonNameInXaml,
.warning,
.message-box .footer Button
{
    Foreground: Red;
}
<Button x:Name="ButtonNameInXaml">OK</Button>
<TextBox cssWPF:Css.Class="warning"></TextBox>
<StackPanel cssWPF:Css.Class="message-box">
    <TextBlock>Message</TextBlock>

    <StackPanel cssWPF:Css.Class="footer">
        <Button>OK</Button>
    </StackPanel>
</StackPanel>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4