How to set own color on Viewcell Item selection in xamarin.UWP?

Question

I am creating app in that it contains list view and when I try to run to iOS and Android it works proper with custom renderer but when I try to run in Windows on tap it display blue color I have to set tranparent color on item tap I try to make custom renderer but I can't find solution.

Thanks in advance.

Martin Zikmund Martin Zikmund · Accepted Answer · 2018-08-03T09:03:16

There are two options you have in this case. If you don't need ListView to indicate selected items, just need to know which have been tapped, set the SelectionMode to None:

<ListView SelectionMode="None" ...>

To know which item has been tapped you can now use the ItemTapped event, which will give you the data-bound item in ItemTappedEventArgs.Item property.

If you want to keep the selection mode but want to modify the color of selected ListView item, you can do that as well.

Check the default styles and templates for the ListView control in documentation. You can see that by default the color is set in ListViewItemPresenter.SelectedBackground to {ThemeResource SystemControlHighlightListAccentLowBrush}. This brush is actually a system-wide brush based on the current user's system accent color, but you can override - either just for the specific ListView or for the entire application.

If you want a application-wide override, declare a Brush on the application resources level in App.xaml inside the UWP project head:

<Application.Resources>
    <SolidColorBrush Color="Red" x:Key="SystemControlHighlightListAccentLowBrush" />
</Application.Resources>

For a control specific override, create a custom renderer and custom style.

First the control in shared project:

public class SelectionColorListView : ListView
{
    public static readonly BindableProperty SelectionColorProperty =
        BindableProperty.Create(nameof(SelectionColor), typeof(Color), typeof(SelectionColorListView), Color.Green);

    public Color SelectionColor
    {
        get => (Color) GetValue(SelectionColorProperty);
        set => SetValue(SelectionColorProperty, value);
    }
}

And then the renderer for UWP:

[assembly: ExportRenderer(typeof(SelectionColorListView), typeof(SelectionColorListViewRenderer))]

namespace App.UWP
{
    public class SelectionColorListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                UpdateSelectionColor();
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == nameof(SelectionColorListView.SelectionColor))
            {
                UpdateSelectionColor();
            }
        }

        private void UpdateSelectionColor()
        {
            if (Control != null && Element is SelectionColorListView listView)
            {
                var nativeColor = XamarinColorToNative(listView.SelectionColor);
                Control.Resources["SystemControlHighlightListAccentLowBrush"] = new SolidColorBrush(nativeColor);
            }
        }

        private Color XamarinColorToNative(Xamarin.Forms.Color color)
        {
            var alpha = (byte)(color.A * 255);
            var red = (byte)(color.R * 255);
            var green = (byte)(color.G * 255);
            var blue = (byte)(color.B * 255);
            return Color.FromArgb(alpha, red, green, blue);
        }
    }
}

Note that unfortunately the color cannot be changed at runtime - once a selection is done for the first time, the color will stay the same even if you change the property value.

Finally, if you just want the color to be "transparent" use Color.Transparent as the SelectionColor.

How to set own color on Viewcell Item selection in xamarin.UWP?

2 Answers