Avalonia模板控件中Path元素无法显示的问题排查

问题场景 #

自定义的CycleButton控件（继承自Button）在设计预览中能正常显示SVG图形，但添加到MainWindow.axaml中使用时，SVG图形完全不显示。尝试替换Path为PathIcon后问题依旧。

问题根源 #

1. 属性赋值时机错误：在Data和Scale属性的setter中，仅当_icon不为空时才更新UI，但控件初始化时模板尚未应用（OnApplyTemplate未执行），此时_icon为null，导致设置的属性值无法同步到Path控件。
2. 缺少属性变更回调：未利用Avalonia的属性变更通知机制，当属性值在模板应用后变更时，无法自动同步到UI元素。
3. 不必要的属性重定义：重新注册了RenderTransformProperty，覆盖了Button基类的同名属性，可能引发绑定和渲染异常。

修复步骤 #

1. 移除属性setter中的手动UI更新逻辑，改用Avalonia属性变更回调处理UI同步。
2. 为DataProperty和ScaleProperty添加变更回调，确保属性值变更时自动更新对应UI元素。
3. 在OnApplyTemplate方法中，模板加载完成后同步当前属性值到UI元素，保证模板应用前设置的属性生效。
4. 移除冗余的RenderTransform属性定义，直接使用Button基类的同名属性。

修改后的完整代码 #

C#实现 #

public class CycleButton : Button
{
    private Border? _panForeground;
    private readonly AnimationHelper _animation = new();
    private Path? _icon;
    public int Uuid = Guid.NewGuid().GetHashCode();

    /// <inheritdoc />
    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
    {
        base.OnApplyTemplate(e);

        _panForeground = e.NameScope.Find<Border>("PanForeground");
        _icon = e.NameScope.Find<Path>("Icon");

        // 模板应用后同步当前属性值
        if (_icon != null)
        {
            _icon.Data = Data;
            if (_icon.RenderTransform is ScaleTransform scaleTransform)
            {
                scaleTransform.ScaleX = Scale;
                scaleTransform.ScaleY = Scale;
            }
        }
    }

    public static readonly StyledProperty<Geometry?> DataProperty =
        AvaloniaProperty.Register<CycleButton, Geometry?>(nameof(Data), 
            changed: (sender, e) =>
            {
                if (sender is CycleButton button && button._icon != null)
                {
                    button._icon.Data = e.NewValue;
                }
            });

    public Geometry? Data
    {
        get => GetValue(DataProperty);
        set => SetValue(DataProperty, value);
    }

    public static readonly StyledProperty<double> ScaleProperty =
        AvaloniaProperty.Register<CycleButton, double>(nameof(Scale), 
            defaultValue: 1.0,
            changed: (sender, e) =>
            {
                if (sender is CycleButton button && button._icon != null)
                {
                    if (button._icon.RenderTransform is ScaleTransform scaleTransform)
                    {
                        scaleTransform.ScaleX = e.NewValue;
                        scaleTransform.ScaleY = e.NewValue;
                    }
                }
            });

    public double Scale
    {
        get => GetValue(ScaleProperty);
        set => SetValue(ScaleProperty, value);
    }
}

AXAML样式（保留原代码） #

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:controls="using:Sekota_McLauncher.Controls"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <controls:CycleButton Scale="1.2" Data="M7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z M8 4.75C8 5.16421 8.33579 5.5 8.75 5.5L15.25 5.5C15.6642 5.5 16 5.16421 16 4.75C16 4.33579 15.6642 4 15.25 4L8.75 4C8.33579 4 8 4.33579 8 4.75Z M4.75 8C4.33579 8 4 8.33579 4 8.75V15.25C4 15.6642 4.33579 16 4.75 16C5.16421 16 5.5 15.6642 5.5 15.25V8.75C5.5 8.33579 5.16421 8 4.75 8Z M19.25 8C18.8358 8 18.5 8.33579 18.5 8.75V15.25C18.5 15.6642 18.8358 16 19.25 16C19.6642 16 20 15.6642 20 15.25V8.75C20 8.33579 19.6642 8 19.25 8Z M8.75 20C8.33579 20 8 19.6642 8 19.25C8 18.8358 8.33579 18.5 8.75 18.5H15.25C15.6642 18.5 16 18.8358 16 19.25C16 19.6642 15.6642 20 15.25 20H8.75Z M5 21C6.10457 21 7 20.1046 7 19C7 17.8954 6.10457 17 5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21Z M21 5C21 6.10457 20.1046 7 19 7C17.8954 7 17 6.10457 17 5C17 3.89543 17.8954 3 19 3C20.1046 3 21 3.89543 21 5Z M19 21C20.1046 21 21 20.1046 21 19C21 17.8954 20.1046 17 19 17C17.8954 17 17 17.8954 17 19C17 20.1046 17.8954 21 19 21Z"/>
    </Design.PreviewWith>

    <Style Selector="controls|CycleButton">
        <Setter Property="Foreground" Value="AliceBlue"/>
        <Setter Property="Background" Value="Black"/>
        <Setter Property="CornerRadius" Value="20"/>
        <Setter Property="RenderTransform">
            <ScaleTransform/>
        </Setter>
        <Setter Property="Template">
            <ControlTemplate>
                <Border Focusable="True"
                        Name="PanBackground"
                        UseLayoutRounding="False"
                        Height="40"
                        Width="40">
                    <Border CornerRadius="{TemplateBinding CornerRadius}"
                            Name="PanForeground"
                            Background="{TemplateBinding Background}"
                            RenderTransform="{TemplateBinding RenderTransform}"
                            RenderTransformOrigin="50%, 50%">
                        <Path Name="Icon"
                              HorizontalAlignment="Center" VerticalAlignment="Center"
                              Margin="0, 0, 3, 3"
                              Fill="AliceBlue"
                              Data="{TemplateBinding Data}"
                              RenderTransformOrigin="50%, 50%">
                            <Path.RenderTransform>
                                <ScaleTransform/>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter>
        <Setter Property="Transitions">
            <Transitions>
                <BrushTransition Duration="0:0:0.15" Property="Foreground"/>
                <BrushTransition Duration="0:0:0.15" Property="Background"/>
            </Transitions>
        </Setter>
    </Style>
</Styles>

MainWindow.axaml使用代码（保留原代码） #

<controls:CycleButton 
    Name="Test" 
    Height="50" Width="50"
    Foreground="AliceBlue"
    Background="Black"
    Data="M14,2 C20.6274,2 26,7.37258 26,14 C26,20.6274 20.6274,26 14,26 C7.37258,26 2,20.6274 2,14 C2,7.37258 7.37258,2 14,2 Z M14,3.5 C8.20101,3.5 3.5,8.20101 3.5,14 C3.5,19.799 8.20101,24.5 14,24.5 C19.799,24.5 24.5,19.799 24.5,14 C24.5,8.20101 19.799,3.5 14,3.5 Z M14,11 C14.3796833,11 14.6934889,11.2821653 14.7431531,11.6482323 L14.75,11.75 L14.75,19.25 C14.75,19.6642 14.4142,20 14,20 C13.6203167,20 13.3065111,19.7178347 13.2568469,19.3517677 L13.25,19.25 L13.25,11.75 C13.25,11.3358 13.5858,11 14,11 Z M14,7 C14.5523,7 15,7.44772 15,8 C15,8.55228 14.5523,9 14,9 C13.4477,9 13,8.55228 13,8 C13,7.44772 13.4477,7 14,7 Z"/>

验证结果 #

修改后，CycleButton在MainWindow中能正常显示指定的SVG图形，设计预览和运行时表现一致，属性变更也能实时同步到UI。

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