如何自定义Avalonia Expander控件的Chevron按钮样式？

问题解决：Chevron按钮多状态样式配置 #

要修改Chevron箭头在常态、悬停、展开/收起状态的颜色，需精准定位ToggleButton模板内的Path#ExpanderChevron元素，结合状态选择器设置样式。以下是修正后的完整代码：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:ExpanderApp.ViewModels"
        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="ExpanderApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Window.Styles>
        <Style Selector="Expander">
            <!-- 整个Expander的外部边距 -->
            <Setter Property="Margin" Value="10"/>

            <!-- 展开内容区域的样式 -->
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="Yellow"/>
            <Setter Property="Padding" Value="20"/>
            
            <!-- Header区域的ToggleButton基础样式 -->
            <Style Selector="^ /template/ ToggleButton">
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Background" Value="DarkBlue"/>
                <Setter Property="Padding" Value="10"/>
                
                <!-- 常态下的Chevron箭头颜色 -->
                <Style Selector="^ /template/ Path#ExpanderChevron">
                    <Setter Property="Fill" Value="Yellow"/>
                </Style>
                
                <!-- 鼠标悬停时的ToggleButton背景及Chevron颜色 -->
                <Style Selector="^:pointerover">
                    <Setter Property="Background" Value="BlueViolet"/>
                    <Style Selector="/template/ Path#ExpanderChevron">
                        <Setter Property="Fill" Value="Orange"/>
                    </Style>
                </Style>
                
                <!-- 收起状态（unchecked）下的ToggleButton背景及Chevron颜色 -->
                <Style Selector="^:unchecked">
                    <Setter Property="Background" Value="DeepSkyBlue"/>
                    <Style Selector="/template/ Path#ExpanderChevron">
                        <Setter Property="Fill" Value="LightYellow"/>
                    </Style>
                </Style>
                
                <!-- 展开状态（checked）下的Chevron颜色 -->
                <Style Selector="^:checked /template/ Path#ExpanderChevron">
                    <Setter Property="Fill" Value="Gold"/>
                </Style>
            </Style>
            
            <!-- Header文本在悬停时的颜色 -->
            <Style Selector="^ /template/ ToggleButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="White"/>
            </Style>
        </Style>
    </Window.Styles>

    <Expander IsExpanded="true">
        <Expander.Header>
            <Label>This is the header</Label>
        </Expander.Header>
        <StackPanel Orientation="Vertical">
            <Label Name="First">This is the first label of the expander</Label>
            <Label Name="Second">This is the second label of the expander</Label>
            <Label Name="Third">This is the third label of the expander</Label>
            <Label Name="Fourth">This is the fourth label of the expander</Label>
        </StackPanel>
    </Expander>
</Window>

关键修改说明 #

• 常态Chevron样式：在ToggleButton的嵌套样式中直接定位Path#ExpanderChevron，设置默认填充色。
• 悬停状态：通过^:pointerover选择器匹配鼠标悬停的ToggleButton，同时修改其背景和内部Chevron的颜色。
• 展开/收起状态：分别用:checked（展开）和:unchecked（收起）选择器，结合内部的Path元素设置对应颜色，确保状态切换时箭头颜色同步变化。

现有代码优化建议 #

1. 嵌套样式层级简化：将ToggleButton的子样式（如悬停、状态切换）直接嵌套在ToggleButton的Style内部，避免重复写^ /template/ ToggleButton前缀，提升可读性。
2. 状态选择器合并：原代码中分开定义的ToggleButton:pointerover背景和文本样式，可合并到ToggleButton的悬停状态样式中，减少冗余选择器。
3. 避免冗余模板路径：在父样式内部定义子样式时，使用^指代父选择器，无需重复书写完整模板路径，简化代码结构。
4. 注释规范化：保留关键样式的中文注释，明确每个样式块的作用，便于后续维护。

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