CODEWITHSUNDEEP
xamlxamarinxamarin.formsmaterial-design-in-xaml
Legion
Legion

Reputation: 321

set selection backgroundcolor on Collectionview and keep the material ripple

I have a Collectionview like so:

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

If I set the background inside the Style like so:

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

The selection color has now succesfully changed but I no longer have the Material Ripple that the standard color has on selection. How do I change the selection color and have the material ripple?

Thanks.

Greetings,
Yme

Upvotes: 0

Views: 181

Answers (1)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

I use your code to test, you create languageMenuStyle style for stacklayout, but stacklayout don't have SelectableItemBackground property, I modify languageMenuStyle for stacklayout, the collectionview still have material ripple when changing the collectionview selection color.

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

Upvotes: 1

Related Questions