Selected Item Highlighted Xamarin.Forms in a ListView

Question

Currently I have a custom CellView template that I have created to effectively use a background image for the entire cell, and have text overlay.

I did this through an absolute layout, and bound the custom cell template to my ListView .
My issue is that I can seemingly no longer highlight a cell upon selection.

I am guessing that my issue is originating from the image taking up 100% of the cell's background (by adding it to a stack layout first not as a proper background image), or that my custom ViewCell implementation is not implementing ItemSelection properly.

I am under the impression that a ListView cell will by default have some sort of selection highlighting. It was working with a default ListView , and while I was using a relative layout with a small segment of the cell outside of the image.
Which is where I was able to highlight the cell.

The image was never actually highlighted. So this is why I suspect the image to be the problem.

What I Want to Accomplish

Highlight an entire cell image on tap and all with some color to indicate that it has been selected. Within the shared code (PCL).

I have so far tried to create a non visible BoxView with some transparency that becomes visible on click; however I could not figure out how to actually make this happen with use of ItemSelected() . I am not asking for a coded solution, but rather a finger in the right direction; however, I will not dispute a coded solution.

public CustomViewCell()
    {
        var someLabel= new Label();
        someLabel.SetBinding (Label.TextProperty, "someLabel");

        var someImage = new Image () {
            Aspect = Aspect.AspectFill,
        };
        someImage.SetBinding (Image.SourceProperty, "ImageSource");

        AbsoluteLayout.SetLayoutFlags (someImage, AbsoluteLayoutFlags.All);
        AbsoluteLayout.SetLayoutBounds (someImage, new Rectangle (0f, 0f, 1f, 1f));

        AbsoluteLayout.SetLayoutFlags (someLabel, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds (someLabel, 
            new Rectangle (0.1, 0.85, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)
        );

        AbsoluteLayout theLayout = new AbsoluteLayout {
            HeightRequest = 50,
            BackgroundColor = Color.Black
        };

        theLayout.Children.Add (someImage);
        theLayout.Children.Add (someLabel);

        this.View = theLayout;
    }
}

After this I just have basic accessors for the bindings, and created the List / applied the template. If needed I can provide, but they are basic.

Answer 1

Hye. For this purposes you have to use Item Selected Property and bind this with your variable and after that do what you want with that (eg use Name property with every item in list for check this).

I had not tested that, i think you will catch idea.

Here is your list:

MenuItems = new ObservableCollection<MasterPageMenuItemModel>
            {
                new MasterPageMenuItemModel {Name = "GistsPage", ImageSource = GistsPageImagePath},
                new MasterPageMenuItemModel {Name = "IssueDashboardPage", ImageSource = IssueDashboardPageImagePath},
                new MasterPageMenuItemModel {Name = "BookmarksPage", ImageSource = BookmarksPageImagePath},
                new MasterPageMenuItemModel {Name = "ReportAnIssuePage", ImageSource = ReportAnIssuePageImagePath}
            };

Ok, now you have Name property. Then use "Selected Item" for binding it with your property:

<ListView x:Name="MasterPageMenu"
                  SeparatorColor="Transparent"
                  AbsoluteLayout.LayoutBounds="{Binding MasterMenuBounds}"
                  AbsoluteLayout.LayoutFlags="None"
                  ItemsSource="{Binding MenuItems}"
                  SelectedItem="{Binding MenuItemSelectedProperty, Mode=TwoWay}">

For check it when you need you can use ItemSelected event. When it raise use your bindable property with Name property and do what you want with that.