Avalonia笔记3-样式

学习笔记：

最基本的样式由选择器(selector)和设置器(setters)的集合组成。

1. OfType选择器

应用于所有button控件

 <Window.Styles>
    <Style Selector="Button" >
        <Setter Property="Background" Value="Orange" ></Setter>
    </Style>
</Window.Styles>

<Style Selector="local | Button"> 如果控件没有在默认的avalonia命名空间下，需要加上其命名空间，竖线分割；

2. Is选择器

Selector=“Button” 控件需要精确匹配，并不会对其派生控件起作用，如果需要对其派生控件也有效的话，使用<Style Selector="is(Button)">就可以了，比如ToggleButton；

3.  Name选择器

 <Window.Styles>
    <Style Selector="Button#test" >
        <Setter Property="Background" Value="Orange" ></Setter>
    </Style>
</Window.Styles>

<Button Grid.Row="7" x:Name="test1">test1</Button>
<Button Grid.Row="8" Name="test2">test2</Button>

4：PropertyEquals选择器

使用<Style Selector="Button[isDefault=true]">，

如果是附加属性的话，使用<Style Selector="Button[(Grid.Row)=0]"> ；

5. Class选择器

<Button Grid.Row="7" Classes="Test2">dfudbhuidf</Button>

<Style Selector="Button.Test2">
    <Setter Property="BorderBrush" Value="Blue"></Setter>
</Style>

Classes的值可以有多个；且可以增加条件，比如：

<Button Grid.Row="7" Classes="Test2 Test3">dfudbhuidf</Button>

<Style Selector="Button.Test2.Test3">
    <Setter Property="BorderBrush" Value="Blue"></Setter>
</Style>

6. Child选择器

<Style Selector="StackPanel > Button"/>

对直接位于StackPanel下的button起作用，对于隔着一层的button不起作用；

7. Descendant选择器

<Style Selector="StackPanel Button" />

对所有位于StackPanel下的button起作用，对于隔着一层的button也起作用；

8. Template选择器

<Style Selector="Button /template/ ContentPresenter"/>

匹配控件模板中的控件。这里列出的所有其他选择器都作用在逻辑树上。如果要在控件模板中选择控件，则必须使用此选择器。

这个比较重要，实际应用示例：

<StackPanel Margin="20" HorizontalAlignment="Left">
    <Expander  Header="HEADER">
        <TextBlock Text="Hello Avalonia"></TextBlock>
    </Expander>
</StackPanel>

 想要将这个控件背景改为红色，给StackPanel添加background属性为红色，或者给Expander添加background属性为红色，都是不可行的，要么是超出了expander范围，或者只有下拉菜单为红色，实现办法：

<Style Selector="Expander /template/ ToggleButton">
    <Setter Property="Background" Value="Red"></Setter>
</Style>

这样就可以了。 

再举一示例：

实现button点击时背景为橙色：

<Style Selector="Button:pressed" >
    <Setter Property="Background" Value="Orange" ></Setter>
</Style>

这样是行不通的，需要改为：

<Style Selector="Button:pressed /template/ ContentPresenter" >
    <Setter Property="Background" Value="Orange" ></Setter>
</Style>

9. Not选择器

<Style Selector="TextBlock:not(.h1)">

取反内部选择器。

10. Or选择器

<Style Selector="TextBlock, Button">

查找任意一个与这些选择器中匹配的元素。每个选择器用,分开。