Forum Xamarin Xamarin.Forms

ViewCell Selected Background Color in iOS 13

bandorbandor USMember ✭✭

Prior to iOS 13, you could set a background color in a ViewCell, and change that background color to another color when the cell is pressed. The color change would start on the press down and reset on release. The press feedback no longer works in iOS 13 if you use a cell background color other than transparent.

I need to use a cell background color to get the style I want in my app. Does anyone know a way to use a cell background color and get a touch effect in iOS 13 in a ListView? I've tried a number of approaches, but they all just capture the press release, not the press down. I did manage a workaround for cells in a TableView, but I still need help for cells in a ListView. Thanks!

Tagged:

Best Answers

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    If you set another color for any subviews of your cell the selected background color will be overridden:
    https://stackoverflow.com/a/58105706/8354952
    I tested it on iOS 13 and got the same result.
    It means you should not change the view cell's background color if you want to display the effect of the selection state.
    If you do want to use a custom background and selected background you have to implement it by yourself.
    i.e. create a simple list view like:

    <ListView ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout BackgroundColor="{Binding BgColor}">
                        <Label Text="{Binding Text}"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    Then change the selected background color in the SelectedItem like:

    public ItemModel SelectedItem 
    { 
        set 
        {
            if (selectedItem != null)
            {
                SelectedItem.BgColor = Color.LightSalmon;
            }                
            selectedItem = value;
            if (selectedItem != null)
            {
                SelectedItem.BgColor = Color.Red;
            }                
            onPropertyChanged();
        }
        get => selectedItem;
    }
    

    At last, you will get the effect like:

  • bandorbandor USMember ✭✭

    Hi LandLu. Thanks for the message. The SelectedItem setter in your example only gets called when you remove your finger from the cell. It doesn't capture the press down effect. I appreciate you writing out the code, but I'm trying to find a solution that will change the background color on press down, then return it to its original color on release. I'm certainly open to any custom renderer solutions if anybody has one.

    For reference, I'm trying to style my ListView to look like a native iOS TableView--white cells on a gray background. It's not as simple as just making the header gray, with transparent cells against a white background. That would expose white above the header if you pull down the cells. You can achieve the correct look by setting the ListView's iOS:GroupHeaderStyle property to Grouped, making the ListView background color gray, and making the ViewCells' background color white. Prior to iOS 13, you could then use a ViewCell custom renderer, and set the cell's SelectedBackgroundView to achieve the correct pressed effect. This no longer works with non-transparent ViewCells.

    LuiC, thank you for linking in that thread. I read it earlier when I was first trying to solve this problem. Everyone seemed fairly satisfied with the transparent cell solution over there and the issue was already marked as closed.

  • bandorbandor USMember ✭✭

    Thanks LandLu! This is the effect I want! My only concern is if I press the cell quickly (say less than a quarter of a second), I don't get any highlight effect. It's as if the color change in TouchesEnded gets called before the view can update for the change in TouchesBegan. Maybe there's some lag on TouchesBegan. I'm not quite sure what the issue is.

    Please let me know if you have any thoughts on this. If not, not worries! You've been very helpful. Thanks!

  • bandorbandor USMember ✭✭

    That delay works great! I really appreciate all of your help on this LandLu! The touch effect looks and feels nice and responsive now!

Sign In or Register to comment.