ListView desperately needs a SelectedItemBackgroundColor property

LouisTaljaardLouisTaljaard ZAMember ✭✭
edited November 2017 in Xamarin.Forms

It's a very basic thing, nobody wants an ugly grey (or blue) bar to appear as the background when you select an item in a ListView. It looks terrible from a UI point of view. Everybody has been implementing their own workarounds for this (custom renderers etc) but it is getting out of hand.

The ViewCellRenderer custom renderer approach works fine with a ListView with the default caching strategy ListViewCachingStrategy.RetainElement but it does NOT work if you set it to ListViewCachingStrategy.RecycleElement or ListViewCachingStrategy.RecycleElementAndDataTemplate .

If you need a different caching strategy you have to go one step further and create a custom ListViewRenderer and then assign your own UITableViewDelegate based delegate, and from there you need to override the WillDisplay method in order to eventually be able to set the selected item's background color to something that matches your app's color scheme. And after all this you'll find there are problems with the fact that you're replacing the "default delegate". (note: conversely and ironically this ListViewRenderer approach seems to work ok with a ListView that has a non-default caching strategy set but it does NOT work with the default caching strategy - in the latter case it doesn't pick up the ItemSelected event anymore). The problem with overwriting the default delegate is described here: https://forums.xamarin.com/discussion/42863/setting-delegate-of-control-in-custom-renderer-results-in-lost-functionality

The problem and various workarounds that people have been trying is summarised here (but still there are some problems as mentioned in paragraph above):

In short this is madness that each developer must go through all this pain for such a simple thing.

To solve all this a simple SelectedItemBackgroundColor property should be added to the ListView class. It won't be difficult to add the required code (just some code in the custom renderers will do the trick). Then we won't have to worry about all these custom renders or about how to handle the overwritten default delegate.

Tagged:

Open · Last Updated

Posts

  • CatoLommerudCatoLommerud USMember ✭✭

    I wholeheartedly support this request

  • SharpDoctorSharpDoctor USMember

    We need this BASIC functionality it's just a simple color, nothing fancy(gradient, images, ...)

  • LordDzLordDz SEMember
    edited November 2017

    I totally agree. Xamarin needs more of the simple things to simply work rather than having to lookup how to create customrenderers for a.. color.

  • RicardoJarreeRicardoJarree USMember ✭✭
    edited November 2017

    This should of been a priority feature when the ListViewRenderer was first implemented. Would be nice if you could alter the colour of the text and background when selected in the styling of the application.

  • Gigex42Gigex42 USMember ✭✭✭✭

    Why is it not possible to like this post...

    +1 on the suggestion

  • +1

  • GiampaoloGabbaGiampaoloGabba USMember ✭✭✭

    I support this. Listview need some love.

  • HenrikEricsonHenrikEricson USMember ✭✭

    I'll give my vote for this!

  • +1

  • CharwakaCharwaka INMember ✭✭✭✭✭

    +1

  • An enthusiastic +1!

  • seancalderonseancalderon USMember

    YES.PLEASE. THUMBS UP

  • GmotagiGmotagi GBMember ✭✭

    This needs to happen.

  • CatNaisCatNais Member ✭✭

    +1

  • JonathanRosanowskiJonathanRosanowski USMember ✭✭

    +1

  • BasilJohnBasilJohn NZMember ✭✭

    +1

  • TTimurTTimur Member

    +1

  • RaphaelAugustoSilvaRaphaelAugustoSilva USUniversity ✭✭

    +100000

  • AlmaJensen.9398AlmaJensen.9398 USMember ✭✭✭

    This should be marked as in progress. Looking at Github it looks like the implementation is almost complete.

    https://github.com/xamarin/Xamarin.Forms/pull/2050

  • titolerutitoleru Member ✭✭

    Please, this is absolutely essential.

  • NMackayNMackay GBInsider, University mod

    Can be easily done with a DataTrigger in the template and some selection logic in the viewmodel tbh.

    Or if your an Indy developer, just use sfListview, if you have less than 5 devs and turn over less than 1 million USD, no I don't work for Syncfusion but I work on a project that uses their products commercially so it's a bargain...trust me.

    https://www.syncfusion.com/products/communitylicense

  • NMackayNMackay GBInsider, University mod

    Also there is zero point bitching here, honestly. The forms team don't really look in here.

    Github
    https://github.com/xamarin/Xamarin.Forms

    Or annoy people on twitter but that rarely works.

  • titolerutitoleru Member ✭✭

    @NMackay said:
    Can be easily done with a DataTrigger in the template and some selection logic in the viewmodel tbh.

    Or if your an Indy developer, just use sfListview, if you have less than 5 devs and turn over less than 1 million USD, no I don't work for Syncfusion but I work on a project that uses their products commercially so it's a bargain...trust me.

    https://www.syncfusion.com/products/communitylicense

    Hey @NMackay. Don't worry, I won't take you as a Syncfusion vendor... I understand it can be cheap, but it just feels frustrating to be paying for such a simple thing (just coloring a ListView item when selected!!!). Thanks though.

    Regarding your first point, do you have any code to take a look at your DataTrigger workaround? Be aware that it would be of great help for all the community

  • NMackayNMackay GBInsider, University mod
    edited August 29

    @titoleru said:

    @NMackay said:
    Can be easily done with a DataTrigger in the template and some selection logic in the viewmodel tbh.

    Or if your an Indy developer, just use sfListview, if you have less than 5 devs and turn over less than 1 million USD, no I don't work for Syncfusion but I work on a project that uses their products commercially so it's a bargain...trust me.

    https://www.syncfusion.com/products/communitylicense

    Hey @NMackay. Don't worry, I won't take you as a Syncfusion vendor... I understand it can be cheap, but it just feels frustrating to be paying for such a simple thing (just coloring a ListView item when selected!!!). Thanks though.

    Regarding your first point, do you have any code to take a look at your DataTrigger workaround? Be aware that it would be of great help for all the community

    Totally get it, in 2019 to see the daft orange color in Android...I know. CollectionView will take over for vanilla Listview but someone posted a similar approach to what I've used here.

    https://stackoverflow.com/questions/43832726/xamarin-listview-selected-item-appearance

    It's not perfect but overriding the data template background color gets round the problem.

  • titolerutitoleru Member ✭✭

    Hi @NMackay, I didn't get that working either... I think the problem is not in the code itself, it's just that newer versions of Xamarin forms have completely broken all of these ListView implementations because they've changed the way they approached their ListViewCachingStrategy. Please check this link for more info.

    However, sync fusion:SfListView works perfectly for those interested: (add first corresponding Nuget Package "Syncfusion.Xamarin.SfListView" and use it in your XAML)

          <syncfusion:SfListView  x:Name="lvMenu"
                                    SelectionMode="Single"
                                    SelectionGesture="Tap"
                                    SelectionBackgroundColor="#009B66"
                                    ItemsSource="{Binding Durations}"
                                    SelectedItem="{Binding OnDurationSelected}">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                            <StackLayout Spacing="10" HorizontalOptions="Center" VerticalOptions="Center">
                                <Label TextColor="Gray" Font="20" Text="{Binding}"/>
                            </StackLayout>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
    

    Many thanks!

Sign In or Register to comment.