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

Question

我想在 Xamarin.Forms 应用.

中重新使用一些 Expanders

Expander使用Image作为FontImageSource显示人字形作为Indicator，DataTrigger在图像上允许在 up/down 雪佛龙：

之间切换

<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>

我试图创建一个 Style 来轻松复制相同的 Expander，但它不起作用：

我可以为 “默认”指标模式定义 Image 的样式:

<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>

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

<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>

这很好用，但是我只有“默认”指示器图像。

我尝试通过 Trigger 为 "扩展" 指标模式定义样式:

<Style x:Key="ChevronImageForExpanderTrigger" TargetType="Image">
    <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>

这也很好用，但我只有“扩展”指示器图像。

所以我尝试像这样“合并”这两种样式：

<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>

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

我也可以创建一个控件，但我想为 Expander.ContentTemplate 使用不同种类的内容：标签、图像、...

如何更好地轻松重用这个 Expander？

编辑：为样式添加一些代码

Answer 1

最后只是“全局”风格的触发器声明问题：我们必须使用<Style.Triggers>而不是<Setter Property="Triggers">

所以，像这样效果很好：

<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>

并且在 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 应用于页眉（同时应用于标签和图像），但至少，它是正确的。

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

Xamarin.Forms: how to apply a style on a Expander containing an Indicator

xamarin.forms

datatrigger

expander

indicator