Xamarin.forms Forms：如何在包含指示器的扩展器上应用样式

我想在Xamarin.Forms应用程序中重新使用一些

扩展器

扩展器
使用
图像
作为
FontImageSource
显示V字形作为
指示器
，图像上的
数据触发器
允许在向上/向下V字形之间切换：

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="Who we are?"
                    Style="{StaticResource AboutPageCategoryLabelStyle}" />
            <Image
                    HeightRequest="20"
                    HorizontalOptions="End"
                    VerticalOptions="Center"
                    WidthRequest="20">
                    <Image.Source>
                        <FontImageSource
                            FontFamily="FontAwesomeLight"
                            Glyph="{StaticResource FalIconChevronDown}"
                            Size="20"
                            Color="Gray" />
                    </Image.Source>
                    <Image.Triggers>
                        <DataTrigger
                            Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                            TargetType="Image"
                            Value="True">
                    <Setter Property="Source">
                        <Setter.Value>
                            <FontImageSource
                                FontFamily="FontAwesomeLight"
                                Glyph="{StaticResource FalIconChevronUp}"
                                Size="20"
                                Color="Gray" />
                        </Setter.Value>
                    </Setter>
                        </DataTrigger>
                    </Image.Triggers>
            </Image>
            </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

然后在我的视图中应用此样式：

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="Header" />
            <Image Style="{StaticResource ChevronImageForExpander}">
            </Image>
        </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="Cotnent" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

这也可以正常工作，但我只有“扩展”指示器图像

因此，我尝试“合并”这两种样式，如下所示：

<Style x:Key="ChevronImageForExpander" TargetType="Image">
    <Setter Property="BackgroundColor">Transparent</Setter>
    <Setter Property="HorizontalOptions">End</Setter>
    <Setter Property="VerticalOptions">Center</Setter>
    <Setter Property="HeightRequest">20</Setter>
    <Setter Property="WidthRequest">20</Setter>
    <Setter Property="Source">
        <Setter.Value>
            <FontImageSource Glyph="{StaticResource FalIconChevronDown}"
                                FontFamily="FontAwesomeLight"
                                Size="20"
                                Color="{StaticResource Gray-600}"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Triggers">
        <Setter.Value>
            <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                            TargetType="Image"
                            Value="True">
                <Setter Property="Source">
                    <Setter.Value>
                        <FontImageSource
                            FontFamily="FontAwesomeLight"
                            Glyph="{StaticResource FalIconChevronUp}"
                            Size="20"
                            Color="{StaticResource Gray-600}" />
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Setter.Value>
    </Setter>
</Style>


透明的
终点
居中
20
20

但这不起作用，我得到一个异常：“System.InvalidOperationException:BindableProperty“Triggers”是只读的。”

我还可以创建一个控件，但我想为
扩展器使用不同类型的内容。ContentTemplate
：标签、图像

如何更好地重用此扩展器？

编辑：为样式添加一些代码
最后，在“全局”样式中触发声明是一个问题：我们必须使用
而不是

所以，像这样它工作得很好：

<Style x:Key="ChevronImageForExpander" TargetType="Image">
    <Setter Property="BackgroundColor">Transparent</Setter>
    <Setter Property="HorizontalOptions">End</Setter>
    <Setter Property="VerticalOptions">Center</Setter>
    <Setter Property="HeightRequest">20</Setter>
    <Setter Property="WidthRequest">20</Setter>
    <Setter Property="Source">
        <Setter.Value>
            <FontImageSource Glyph="{StaticResource FalIconChevronDown}"
                                FontFamily="FontAwesomeLight"
                                Size="20"
                                Color="{StaticResource Gray-600}"/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                        TargetType="Image"
                        Value="True">
            <Setter Property="Source">
                <Setter.Value>
                    <FontImageSource
                        FontFamily="FontAwesomeLight"
                        Glyph="{StaticResource FalIconChevronUp}"
                        Size="20"
                        Color="{StaticResource Gray-600}" />
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>


透明的
终点
居中
20
20

在XAML中：

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="Header" />
            <Image Style="{StaticResource ChevronImageForExpander}">
            </Image>
        </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="Content" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>



也许有另一种方法可以将ContentTemplate应用于标题（包括标签和图像），但至少，它是这样正确的。
如果要重用此扩展器，可以尝试使用它创建contentview。@LeoZhu MSFT是的，这就是我尝试这样做的原因，但在这种情况下，我需要指定我将在此
ContentView
中使用的所有
ContentTemplate
：如果我只想为扩展器自定义内容的样式，这不是很有趣吗？我应该在DataTemplate中只为一种情况创建相应的样式，而只有样式在更改。。。同时，我希望能够显示社交网络链接或URL，因此我应该将该命令传递给ContentView。有没有办法只共享
扩展器的
标题的样式呢？也许你可以为标题创建一个contentview。是的，这就是我要找的。但是由于
标题
包含一个
图像源
，以及一个与
存储类型
相关的
触发器
，我不知道如何实现这一点。我可以为“默认”图像应用
样式
，但不能为触发的图像应用
样式…如何使用xamarin 5.0。在我的设备上，此命令不是可执行资源：

<Style x:Key="ChevronImageForExpander" TargetType="Image">
    <Setter Property="BackgroundColor">Transparent</Setter>
    <Setter Property="HorizontalOptions">End</Setter>
    <Setter Property="VerticalOptions">Center</Setter>
    <Setter Property="HeightRequest">20</Setter>
    <Setter Property="WidthRequest">20</Setter>
    <Setter Property="Source">
        <Setter.Value>
            <FontImageSource Glyph="{StaticResource FalIconChevronDown}"
                                FontFamily="FontAwesomeLight"
                                Size="20"
                                Color="{StaticResource Gray-600}"/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                        TargetType="Image"
                        Value="True">
            <Setter Property="Source">
                <Setter.Value>
                    <FontImageSource
                        FontFamily="FontAwesomeLight"
                        Glyph="{StaticResource FalIconChevronUp}"
                        Size="20"
                        Color="{StaticResource Gray-600}" />
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="Header" />
            <Image Style="{StaticResource ChevronImageForExpander}">
            </Image>
        </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="Content" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>