表单:如何在包含指示器的扩展器上应用样式

Question

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

Expander使用Image作为FontImageSource来显示V形作为Indicator，图像上的DataTrigger允许在上/下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>

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

我可以定义CCD_ 9的样式；默认"；指示器模式:

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

然后在我的视图中，我应用了这种风格：

<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使用不同类型的内容：标签、图像。。。

如何才能更好地重用此扩展器

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

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应用于Header(同时应用于Label和Image(，但至少，它是正确的。