如何为选中的CollectionView项设置文本颜色？

问题描述 #

已通过样式设置CollectionView选中项的背景色，但尝试设置选中项文本颜色时出现错误：Cannot resolve property "TextColor" on type "ContentView (property missing or missing accessors)"。

现有CollectionView代码 #

<CollectionView 
        Margin="5,5,5,15"
        ItemSizingStrategy="MeasureAllItems"
        ItemsSource="{Binding Languages}"
        SelectedItem="{Binding SelectedLanguage, Mode=TwoWay}"
        SelectionChangedCommand="{Binding LanguageChangedCommand}"
        SelectionMode="Single">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="language:CultureInfo">
            <ContentView Padding="5" >
                <Grid ColumnDefinitions="*,3*">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>
                    <Image Source="{Binding TwoLetterISOLanguageName, StringFormat='flag_{0}.png'}" Grid.Column="0" HorizontalOptions="Start" />
                    <Label Text="{Binding DisplayName}" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
                </Grid>
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

现有样式代码 #

<Style TargetType="ContentView">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource LaticreteColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

解决方案 #

报错原因是ContentView本身没有TextColor属性，TextColor是Label的专属属性。要实现选中时改变文本颜色，需要在VisualState中通过元素路径定位到ContentView内部的Label，再设置其TextColor属性。

方式一：通过元素索引定位（快速实现） #

直接修改现有样式，通过Content.Children[索引]访问内部Label（Label是Grid的第二个子元素，索引为1）：

<Style TargetType="ContentView">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <!-- 正常状态文本颜色 -->
                        <Setter Property="Content.Children[1].TextColor" Value="#333333" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource LaticreteColor}" />
                        <!-- 选中状态文本颜色 -->
                        <Setter Property="Content.Children[1].TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

方式二：通过命名元素定位（更可靠） #

给DataTemplate中的Grid和Label设置专属名称，避免因元素顺序变化导致索引失效：

1. 修改ItemTemplate中的元素命名：

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="language:CultureInfo">
        <ContentView Padding="5" >
            <Grid x:Name="LanguageItemGrid" ColumnDefinitions="*,3*">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <Image Source="{Binding TwoLetterISOLanguageName, StringFormat='flag_{0}.png'}" Grid.Column="0" HorizontalOptions="Start" />
                <Label x:Name="LanguageNameLabel" Text="{Binding DisplayName}" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
            </Grid>
        </ContentView>
    </DataTemplate>
</CollectionView.ItemTemplate>

2. 修改样式中的Setter路径：

<Style TargetType="ContentView">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter Property="LanguageItemGrid.LanguageNameLabel.TextColor" Value="#333333" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource LaticreteColor}" />
                        <Setter Property="LanguageItemGrid.LanguageNameLabel.TextColor" Value="White" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

两种方式都能实现选中项文本颜色的切换，推荐使用方式二，代码可读性和维护性更强。

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