Avalonia笔记 1 - 小小云博客

C# Avalonia

控件和布局

增加的方法

StackPanel 添加了 Spacing 可以实现内部的间隔
TextBox 添加了 Watermark 属性当输入为空的时候显示默认的空白水印

增加的控件

Panel 轻量的布局控件可以替代单个的 Grid
ToggleSwitch 和 ToggleButton

对于 Grid 支持这样布局 <Grid RowDefinitions="1*,2*,1*" ColumnDefinitions="*,*"> 布局更简便

绑定

提供了比WPF更加简洁的绑定方法类似CSS的选择器

绑定自己 $self.xxx
通过name绑定 #name

绑定父级

<Border Tag="Hello Avalonia!">
  <TextBlock Text="{Binding $parent.Tag}"/>
</Border>
 
<!-- 绑定到祖先级 -->
<Border Tag="Hello Avalonia!">
  <Border>
    <TextBlock Text="{Binding $parent[1].Tag}"/>
  </Border>
</Border>
<!-- 按类型绑定到祖先 -->
<Border Tag="Hello Avalonia!">
  <Decorator>
    <TextBlock Text="{Binding $parent[Border].Tag}"/>
  </Decorator>
</Border>

样式

关于自定义样式和 WPF相比区别是比较大的

使用Style标签定义样式用类似CSS选择器的语法

Name选择

Selector="TextBlock#my"
<TextBlock Name="my" Text="带名字的TextBlock"/>

Class选择

Selector="TextBlock.Big"
<TextBlock Classes="Big" Text="带Classes的TextBlock"/>

Child选择

//子选择器是通过用>字符分隔两个选择器来定义的 。此选择器匹配逻辑树中的直接子级，因此在上面的示例中，选择器将匹配作为 StackPanel 的直接逻辑子级的任何按钮。
Selector="StackPanel > TextBlock"

后代选择

// 当俩个选择器用空格分隔时，选择器将匹配逻辑树中的后代，因此在这种情况下，选择器将匹配StackPanel逻辑后代的任何按钮。
Selector="StackPanel TextBlock"

属性选择

Selector="CheckBox[IsChecked=True]"

Template

<Style Selector="Button:pointerover /template/ ContentPresenter">
    <Setter Property="BorderBrush" Value="Red" />
</Style>

<!-- 这个可能很多时候要和伪类（:pointerover）配合使用，因为它的实际背景由ContentPresenter呈现，而在源码中有对它的设定，这意味着你直接向下面这样写是没有效果的 -->

<Style Selector="Button:pointerover">
    <Setter Property="BorderBrush" Value="Red" />
</Style>

Not

// 选择不具有Big类的TextBlock
Selector="TextBlock:not(.Big)"

Nth Child

// 选择第四个TextBlock
Selector="TextBlock:nth-child(4)"

Nth Lash Child

Selector="TextBlock:nth-last-child(3)"
根据元素在一组同级姐妹中的位置匹配元素，从末尾开始计算。

注意：这个不是说找倒数第三个TextBlock，如果最后一个TextBlock下面还有俩个元素，这其实是找的最后一个TextBlock.

Nth Child（）和Nth Lash Child（）都采用单个参数，而且元素索引从1开始。

功能符号

An+B 表示列表中的元素，其索引有An+B定义的自定义数字模式中的索引匹配，其中：
A 是整数步长
B 是整数偏移量
n 是所有非负整数，从0开始。
可以理解为从B开始的每个A th元素。
实例：

例	表示法
`:nth-child(odd)`	奇数元素 1、3、5等
`:nth-child(even)`	偶数元素 2、4、6等
`:nth-child(2n +1)`	奇数元素
`:nth-child(2n)`	偶数元素
`:nth-child(7)`	第7个元素
`:nth-child(n+7)`	从第7个元素开始，7、8、9...
`:nth-child(3n+4)`	从第4个元素开始，4、7、10、13等
`:nth-child(-n+3)`	前3个元素

一些选择器的示例

选择器	描述
`Button`	选择所有按钮控件
`Button#myButton`	选择名称为 myButton的按钮控件
`Button.red`	选择具有red样式类的所有按钮控件
`Button.red.large`	选择具有red和large样式类的所有按钮控件
`Button.red:focus`	选择具有red样式类和：focus伪类的所有按钮控件
`StackPanel Button.foo`	选择具有 foo 类的所有按钮，这些按钮是StackPanel的后代
`StackPanel > Button.foo`	选择具有 foo类的所有按钮，这些按钮是StackPanel的子级
`Grid:pointerover Button`	选择有 :pointerover伪类的grid 下的所有按钮
`Button /template/ ContentPresenter`	选择按钮模板内的所有内容演示器控件

伪类

与 CSS 中一样，Avaloniad的控件可以具有伪类;这些伪类是由控件本身而不是由用户定义的类。个人感觉跟事件触发器差不多。可以选择处于什么状态的控件

伪类以 : 字符开头.如 Border:pointerover

一个简单的伪类例子

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaStyle.MainWindow"
        Title="AvaloniaStyle">
    <Window.Styles>
        <Style Selector="Border:pointerover">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </Window.Styles>

    <StackPanel Spacing="20">
        <Border>
            <TextBlock Text="鼠标滑过将变红"/>
        </Border>
        <Button Content="按钮" />
        <CheckBox />
    </StackPanel>
</Window>

我们在写代码的时候，如果要用到这个伪类，要在控件元素后空一格，然后敲：这时候是会有代码提示的，如果不空格的话，我试的是没有的。

一部分转接和参考自

十月寒流

Avalonia 学习之样式的选择器和伪类

本文由 jxxxy 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。