在 Collectionview 上设置选择背景颜色并保持材质波纹

Posted 2023-04-12

【中文标题】在 Collectionview 上设置选择背景颜色并保持材质波纹

【英文标题】：set selection backgroundcolor on Collectionview and keep the material ripple

【发布时间】：2021-06-07 13:19:23

【问题描述】：

我有一个这样的 Collectionview：

                         <CollectionView SelectionMode="Single" WidthRequest="200" HeightRequest="144" x:Name="listViewLanguageMenu"  HorizontalOptions="End" VerticalOptions="Start" ItemSizingStrategy="MeasureAllItems">
                         <CollectionView.ItemTemplate >
                             <DataTemplate >
                                 <StackLayout Style="StaticResource languageMenuStyle" HeightRequest="40"  Padding="25,4,5,4" Margin="0" Spacing="0" HorizontalOptions="End" VerticalOptions="Center"  Orientation="Horizontal">
                                     <Image VerticalOptions="CenterAndExpand" Aspect="AspectFit" Source="Binding ImageSourceLanguage"></Image>
                                     <Label VerticalOptions="CenterAndExpand" FontSize="18" Margin="5,0,0,0"  VerticalTextAlignment="Center" Text="Binding LanguageName"></Label>
                                 </StackLayout>
                             </DataTemplate>
                         </CollectionView.ItemTemplate>
                     </CollectionView>

如果我像这样在 Style 中设置背景：

  <Style TargetType="StackLayout" x:Key="languageMenuStyle">        
     <Setter Property="VisualStateManager.VisualStateGroups">
         <VisualStateGroupList>
             <VisualStateGroup x:Name="CommonStates">
                 <VisualState x:Name="Selected">
                     <VisualState.Setters>
                         <Setter Property="SelectableItemBackground" Value="StaticResource buttonBackgroundColor"/>
                         <Setter Property="Visual" Value="Material"></Setter>
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="Normal" >
                     <VisualState.Setters>
                         <Setter Property="Visual" Value="Material"></Setter>
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
         </VisualStateGroupList>
     </Setter>
 </Style>

选择颜色现在已成功更改，但我不再拥有标准颜色在选择时的材质波纹。如何更改选择颜色并产生材质波纹？

谢谢。

您好， 是的

【参考方案1】：

我用你的代码测试，你为stacklayout创建languageMenuStyle样式，但是stacklayout没有SelectableItemBackground属性，我为stacklayout修改languageMenuStyle，collectionview在更改collectionview选择颜色时仍然有材质波纹。

 <Style x:Key="languageMenuStyle" TargetType="StackLayout">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Green" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

【讨论】：

谢谢！如果可行，我会尽快测试并标记它已解决。

@Legion 有什么更新吗？请给我一个反馈。

嗨，我并没有忘记你，但我忙于工作，会在某个时候回到你身边。有效。谢谢！