Avalonia中Style Selector选择自定义控件报错及失效问题排查

问题1：Selector引用自定义控件类型报错AVLN:0004 #

Avalonia样式选择器中，引用带命名空间的自定义控件时，不能用XAML的冒号分隔命名空间和控件类型，而是要用管道符(|)。冒号在选择器语法中是伪类（如:checked）的分隔符，原写法会导致命名空间解析错误。

修正方案 #

将选择器中的materialIcons:MaterialIcon改为materialIcons|MaterialIcon，同时明确视觉树层级路径（因为MaterialIcon被包裹在Grid内）：

<ToggleButton Width="40"
              Height="40"
              Command="{Binding PlayOrPauseVideoCommand}"
              IsChecked="{Binding IsPlaying}">
    <ToggleButton.Styles>
        <Style Selector="ToggleButton:checked > Grid > materialIcons|MaterialIcon">
            <Setter Property="Kind" Value="Pause" />
        </Style>
        <Style Selector="ToggleButton:not(:checked) > Grid > materialIcons|MaterialIcon">
            <Setter Property="Kind" Value="Play" />
        </Style>
    </ToggleButton.Styles>
    <Grid>
        <materialIcons:MaterialIcon Width="30" Height="30" />
    </Grid>
</ToggleButton>

问题2：通过控件名选择样式不生效 #

原选择器ToggleButton:checked #PlayorPauseIcon未生效，是因为视觉树层级匹配不精准：MaterialIcon是Grid的子元素，而非ToggleButton的直接子元素，需要明确指定完整路径。

修正方案 #

在选择器中用>表示直接子元素，精准遍历到目标控件：

<ToggleButton Width="40"
              Height="40"
              Command="{Binding PlayOrPauseVideoCommand}"
              IsChecked="{Binding IsPlaying}">
    <ToggleButton.Styles>
        <Style Selector="ToggleButton:checked > Grid > #PlayorPauseIcon">
            <Setter Property="Kind" Value="Pause" />
        </Style>
        <Style Selector="ToggleButton:not(:checked) > Grid > #PlayorPauseIcon">
            <Setter Property="Kind" Value="Play" />
        </Style>
    </ToggleButton.Styles>
    <Grid>
        <materialIcons:MaterialIcon x:Name="PlayorPauseIcon" Width="30" Height="30" />
    </Grid>
</ToggleButton>

补充说明 #

• 添加:not(:checked)的样式是为了确保按钮状态切换时，图标能同步回退到初始状态，避免手动设置的Kind属性和样式冲突。
• 选择器中使用>可以避免匹配到视觉树中其他层级的同名控件/类型，提升样式匹配的精准度。
• 无需额外指定x:SetterTargetType，因为Selector已经明确了目标控件的类型/名称，Avalonia会自动识别属性归属。

内容的提问来源于stack exchange，提问作者N1vla