Xamarin.Forms中Expander箭头图片使用AppThemeBinding无法正常更新

问题现象 #

在Xamarin.Forms开发场景下，实现Xamarin Community Toolkit中Expander控件的箭头图片随系统主题自动适配时，会出现两类异常：

• 初始实现代码可正常完成展开/收起状态的箭头上下方向切换，但深色模式下箭头图片配色与背景对比度不足，无法清晰显示，初始实现代码如下：

<xct:Expander>
    <xct:Expander.Header>
        <Grid>
            <Label
                FontAttributes="Bold"
                FontSize="15"
                Style="{StaticResource Label}"
                Text="More Details" />
            <Image
                HeightRequest="25"
                HorizontalOptions="End"
                Source="DownArrow.png"
                VerticalOptions="Start">
                <Image.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                         TargetType="Image"
                         Value="True">
                        <Setter Property="Source" Value="UpArrow.png" />
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </Grid>
    </xct:Expander.Header>
        <Label
            Text="Some content"
            TextColor="{AppThemeBinding Light={StaticResource TextColor},
                                                            Dark=LightGray}" />
</xct:Expander>

• 若尝试直接为Image的Source属性配置AppThemeBinding实现主题适配，指定浅色模式加载DownArrow.png/UpArrow.png、深色模式加载DownArrowDark.png/UpArrowDark.png，会触发新的状态异常：箭头仅在首次点击Expander时从向下状态切换为向上状态，之后始终停留在向上箭头，无法随Expander的展开/收起操作正常更新。

问题原因 #

该异常由Xamarin.Forms属性赋值优先级机制导致：

• 若通过特性语法直接在Source属性上声明AppThemeBinding，该动态绑定的优先级高于DataTrigger中Setter的固定值赋值。
• 当IsExpanded首次变为True触发DataTrigger时，Setter会用固定的向上箭头路径覆盖Source属性上原有的AppThemeBinding；当IsExpanded变回False、DataTrigger条件失效时，Source属性无法自动回退到之前的AppThemeBinding绑定状态，只会保留最后一次Setter赋值的向上箭头资源，最终导致状态卡死。

修复方案 #

统一使用属性元素语法配置默认状态和触发状态的AppThemeBinding，保证两处赋值逻辑优先级一致，同时关闭图片缓存避免资源加载错乱，修复后可正常实现状态+主题双适配，代码如下：

<xct:Expander>
    <xct:Expander.Header>
        <Grid>
            <Label
                FontAttributes="Bold"
                FontSize="15"
                Style="{StaticResource Label}"
                Text="More Details" />
            <Image
                HeightRequest="25"
                HorizontalOptions="End"
                VerticalOptions="Start"
                CachingEnabled="False">
                <!--  默认收起状态的主题适配箭头  -->
                <Image.Source>
                    <AppThemeBinding Light="DownArrow.png" Dark="DownArrowDark.png" />
                </Image.Source>
                <Image.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                        TargetType="Image"
                        Value="True">
                        <!--  展开状态的主题适配箭头  -->
                        <Setter Property="Source">
                            <Setter.Value>
                                <AppThemeBinding Light="UpArrow.png" Dark="UpArrowDark.png" />
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </Grid>
    </xct:Expander.Header>
    <Label
        Text="Some content"
        TextColor="{AppThemeBinding Light={StaticResource TextColor}, Dark=LightGray}" />
</xct:Expander>

额外说明 #

• 代码中给Image添加CachingEnabled="False"属性，是为了避免不同主题下同尺寸箭头的本地缓存导致显示错误。
• 该实现无需额外自定义转换器或后台代码，即可同时响应系统主题切换、Expander展开收起两类状态变更，不会出现箭头卡死、配色不适配的问题。

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