【问题标题】:Change background color of selected item in CollectionView not working on UWP更改 CollectionView 中所选项目的背景颜色不适用于 UWP
【发布时间】:2021-05-07 03:31:29
【问题描述】:

我想更改所选项目的背景颜色。我尝试了以下解决方案,但没有成功。

<CollectionView x:Name="FlexCategoryType" Margin="0" HorizontalOptions="FillAndExpand" SelectionMode="Single" ItemsSource="{Binding ItemsCategory}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectionChanged="FlexCategoryType_SelectionChanged">
                                                <CollectionView.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackLayout>
                                                            <Label Text="{Binding Name}"/>
                                                            <VisualStateManager.VisualStateGroups>
                                                                <VisualStateGroup Name="CommonStates">
                                                                    <VisualState Name="Normal" />
                                                                    <VisualState Name="Selected">
                                                                        <VisualState.Setters>
                                                                            <Setter Property="BackgroundColor" Value="Yellow" />
                                                                        </VisualState.Setters>
                                                                    </VisualState>

                                                                </VisualStateGroup>
                                                            </VisualStateManager.VisualStateGroups>
                                                        </StackLayout>
                                                    </DataTemplate>
                                                </CollectionView.ItemTemplate>

                                            </CollectionView>

CollectionView SelectedItem is not highlighted in Xamarin Forms

【问题讨论】:

    标签: xamarin xamarin.forms uwp


    【解决方案1】:

    更改 CollectionView 中所选项目的背景颜色在 UWP 上不起作用

    问题是你没有具体CollectionViewSelectionMode,默认值为none。请设置为Single。并添加VisualStateGroups,如下所示

    <CollectionView SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout Margin="10">
                    <Label Text="{Binding}" VerticalOptions="Center" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal" />
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Yellow" />
                                </VisualState.Setters>
                            </VisualState>
    
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>1</x:String>
                <x:String>2</x:String>
                <x:String>3</x:String>
                <x:String>4</x:String>
                <x:String>5</x:String>
            </x:Array>
        </CollectionView.ItemsSource>
    </CollectionView>
    

    更新

    如何更改ListView单元格选择的颜色。

    这里是FormsListViewItem 样式,请将其复制到UWP App.xaml 文件并编辑SelectedBackground 为您想要的颜色。

    例如

    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="FormsListViewItem" TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter
                        CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="Inline"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                        PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                        PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
                        SelectionCheckMarkVisualEnabled="True"
                        SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                        SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
                        SelectedBackground="SeaGreen"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
    

    【讨论】:

    • 嗨,我已经在上面添加了我的代码,请检查。您的代码似乎可以在 Android 上运行,但我需要它用于 UWP。
    • 我在uwp里面测试过,效果不错,可以做空白样,上面测试。
    • 能否分享一下你的代码示例,我会在此基础上进行测试。
    • 我已经附上了我的问题
    • 您的列表视图解决方案运行良好。谢谢
    猜你喜欢
    • 2018-07-20
    • 1970-01-01
    • 1970-01-01
    • 2013-06-03
    • 2023-03-28
    • 1970-01-01
    • 1970-01-01
    • 2016-12-03
    • 1970-01-01
    相关资源
    最近更新 更多