CODEWITHSUNDEEP
c#androidxamarinxamarin.forms
BrunoLM
BrunoLM

Reputation: 100312

How do I change the color of a selected item on a ListView?

I'm creating a ListView that has some simple items inside a ViewCell.

When I select one of the items it becomes orange. When I click and hold (to open the context actions) it becomes white...

background color

<ListView ItemsSource="{Binding Items}" HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Delete" />
                </ViewCell.ContextActions>
                <StackLayout Orientation="Horizontal" Padding="20">
                    <StackLayout HorizontalOptions="StartAndExpand">
                        <Label Text="{Binding Name}" FontSize="Large" FontAttributes="Bold" />
                        <Label Text="{Binding Description}" />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

How can I customize these colors?

Upvotes: 15

Views: 16280

Answers (2)

Rick Neeft
Rick Neeft

Reputation: 145

Late to the party but the problem has been solved in the CollectionView https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/selection#change-selected-item-color

    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                        Value="LightSkyBlue" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

Upvotes: 0

BrunoLM
BrunoLM

Reputation: 100312

I found out that I have to customize it directly on Android.

To use the theme I changed Droid/Properties/AssemblyInfo.cs adding:

[assembly: Application(Theme = "@style/AppStyle.Light")]

And I created some files on:

Droid\Resources\values

colors.xml contains the color definitions for my theme:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <color name="ListViewSelected">#96BCE3</color>
  <color name="ListViewHighlighted">#E39696</color>
</resources>

styles.xml contains the theme settings:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="AppStyle.Light" parent="android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:colorPressedHighlight">@color/ListViewSelected</item>
    <item name="android:colorLongPressedHighlight">@color/ListViewHighlighted</item>
    <item name="android:colorFocusedHighlight">@color/ListViewSelected</item>
    <item name="android:colorActivatedHighlight">@color/ListViewSelected</item>
    <item name="android:activatedBackgroundIndicator">@color/ListViewSelected</item>
  </style>
</resources>

Using these names I can change the listview style.

android:colorPressedHighlight
android:colorLongPressedHighlight
android:colorFocusedHighlight
android:colorActivatedHighlight
android:activatedBackgroundIndicator

References can be found on developer.android.com R.attr

colors

Upvotes: 28

Related Questions