将XAML中图片旋转触发器转换为C# Markup后失效问题排查

我有一个箭头图片，原本在XAML中实现了Expander展开时旋转的功能，转成C#代码后，箭头能正常显示且主题绑定生效，但旋转功能失效。

原XAML代码 #

<Image
    HeightRequest="25"
    HorizontalOptions="End"
    Source="{AppThemeBinding Light=down_arrow.png,
                                Dark=down_arrow_dark.png}"
    VerticalOptions="Start">
    <Image.Triggers>
        <DataTrigger
            Binding="{Binding Source={RelativeSource AncestorType={x:Type mct:Expander}}, Path=IsExpanded}"
            TargetType="Image"
            Value="True">
            <Setter Property="Rotation" Value="180" />
        </DataTrigger>
    </Image.Triggers>
</Image>

当前失效的C#代码 #

var arrowImage = new Image()
{
    Triggers = 
    {
        new DataTrigger(typeof(Image))
        {
            Value = true,
            Binding = new Binding(nameof(expander.IsExpanded)),
            Setters =
            {
                new Setter()
                {
                    Property = Image.RotationProperty,
                    Value = 180
                }
            }
        }
    },
    HeightRequest = 25,
    HorizontalOptions = LayoutOptions.End,
};
arrowImage.SetAppTheme<FileImageSource>(Image.SourceProperty, "down_arrow.png", "down_arrow_dark.png");

问题原因 #

XAML中通过RelativeSource查找父级Expander控件并绑定其IsExpanded属性，但当前C#代码的Binding既没有设置正确的RelativeSource，也没有指定Expander实例作为数据源，导致触发器无法监听Expander的展开状态变化。

修复方案 #

方案一：通过RelativeSource关联父级Expander #

如果箭头是Expander的子控件，用RelativeSource自动查找父级Expander：

var arrowImage = new Image()
{
    Triggers = 
    {
        new DataTrigger(typeof(Image))
        {
            Value = true,
            Binding = new Binding(nameof(Expander.IsExpanded))
            {
                Source = RelativeSource.FromAncestor(typeof(Expander))
            },
            Setters =
            {
                new Setter(Image.RotationProperty, 180)
            }
        }
    },
    HeightRequest = 25,
    HorizontalOptions = LayoutOptions.End,
    VerticalOptions = LayoutOptions.Start // 补全原XAML中的垂直布局设置
};
arrowImage.SetAppTheme<FileImageSource>(Image.SourceProperty, "down_arrow.png", "down_arrow_dark.png");

方案二：直接绑定到Expander实例 #

如果已经持有Expander的实例expander，直接将其设为Binding的数据源：

var arrowImage = new Image()
{
    Triggers = 
    {
        new DataTrigger(typeof(Image))
        {
            Value = true,
            Binding = new Binding(nameof(Expander.IsExpanded))
            {
                Source = expander
            },
            Setters =
            {
                new Setter(Image.RotationProperty, 180)
            }
        }
    },
    HeightRequest = 25,
    HorizontalOptions = LayoutOptions.End,
    VerticalOptions = LayoutOptions.Start
};
arrowImage.SetAppTheme<FileImageSource>(Image.SourceProperty, "down_arrow.png", "down_arrow_dark.png");

关键修复点 #

• 为Binding设置正确的数据源：要么用RelativeSource查找父级Expander，要么直接指定Expander实例
• 绑定路径应为nameof(Expander.IsExpanded)，而非nameof(expander.IsExpanded)（后者会错误查找Image自身的属性）
• 补全原XAML中遗漏的VerticalOptions = LayoutOptions.Start，保持布局一致

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