问题描述
我想在 Xamarin.Forms应用中重新使用一些Expanders
。
Expander
使用Image
作为FontimageSource
来显示 V形,显示为Indicator
,图像上的DataTrigger
允许在上下人字形之间切换:
<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>
然后在我的视图中应用此样式:
<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
使用不同种类的内容:标签,图像,...
如何更好地重用此扩展器?
解决方法
最后,这只是“全局”样式的Trigger声明问题:我们必须使用<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应用于标头(包括标签和图像),但至少这样是正确的。