How to set corner radius to my listview selected item border

Question

Hello,

I have this listview

I added this code to set the border color of the selected item :

private async void ViewCell_Tapped(object sender, EventArgs e)
{
if (CrossConnectivity.Current.IsConnected)
{
var viewCell = (ViewCell)sender;
if (viewCell.View != null)
{
viewCell.View.BackgroundColor = Color.Red;
}
}
else
{
await DisplayAlert(AppResources.Error, AppResources.ErrorOccurred, AppResources.OK);
await CheckInternet();
}
}

I want to set a corner radius to the red border

Any Solutions please ?

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

Yes if there is a solution to disable the red part else i want to set a corner radius to the red part

if you want to change ListView selecteditem background color, need to use custom render to do this in Xamarin.Forms.

Firstly, create a class name is customcell which should inherit any ViewCell in shared code .

public class customcell:ViewCell  
    {  
          
        public static readonly BindableProperty SelectedItemBackgroundColorProperty = BindableProperty.Create("SelectedItemBackgroundColor", typeof(Color), typeof(customcell));    
        public Color SelectedItemBackgroundColor  
        {  
            get  
            {  
                return (Color)GetValue(SelectedItemBackgroundColorProperty);  
            }  
            set  
            {  
                SetValue(SelectedItemBackgroundColorProperty, value);  
            }  
        }  
    }  

In Android project, create a class name as customcellRenderer and make sure to add renderer registration for our customcel class above the namespace.

[assembly: ExportRenderer(typeof(customcell), typeof(customcellRenderer))]  
namespace CustomRenderer.Droid  
{  
    public class customcellRenderer : ViewCellRenderer  
    {  
        private Android.Views.View _cellCore;  
        private Drawable _unselectedBackground;  
        private bool _selected;  
        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)  
        {  
            _cellCore = base.GetCellCore(item, convertView, parent, context);  
            _selected = false;  
            _unselectedBackground = _cellCore.Background;  
            return _cellCore;  
        }  
        protected override void OnCellPropertyChanged(object sender, PropertyChangedEventArgs args)  
        {  
            base.OnCellPropertyChanged(sender, args);  
            if (args.PropertyName == "IsSelected")  
            {  
                _selected = !_selected;  
                if (_selected)  
                {  
                    var extendedViewCell = sender as customcell;  
  
                    _cellCore.SetBackgroundColor(extendedViewCell.SelectedItemBackgroundColor.ToAndroid());  
                }  
                else  
                {  
                    _cellCore.SetBackground(_unselectedBackground);  
                }  
            }  
        }  
    }  
}  

Then set color for listview SelectedBackgroundColor.

<ContentPage  
    x:Class="CustomRenderer.Page1"  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    xmlns:custom="clr-namespace:CustomRenderer">  
    <ContentPage.Resources>  
        <custom:BoolToColorConverter x:Key="converter1" />  
    </ContentPage.Resources>  
    <ContentPage.Content>  
        <StackLayout>  
            <ListView  
                HasUnevenRows="True"  
                ItemsSource="{Binding Clients}"  
                SelectedItem="{Binding placeItemSelected}">  
                <ListView.ItemTemplate>  
                    <DataTemplate>  
                        <custom:customcell SelectedItemBackgroundColor="White">  
                            <Frame  
                                BackgroundColor="{Binding selected, Converter={StaticResource converter1}}"  
                                BorderColor="Red"  
                                CornerRadius="30">  
                                <StackLayout>  
                                    <Label Text="{Binding Name}" />  
                                    <Label Text="{Binding Phone}" />  
                                </StackLayout>  
                            </Frame>  
                        </custom:customcell>  
  
                    </DataTemplate>  
                </ListView.ItemTemplate>  
            </ListView>  
        </StackLayout>  
    </ContentPage.Content>  
</ContentPage>  

Create BoolToColorConverter to change selected item frame background.

 public class BoolToColorConverter : IValueConverter  
    {  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            return (bool)value ? Color.Blue : Color.Gray;  
        }  
  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            return null;  
        }  
    }  

The screenshot:

Update:

I suggest you can use CollectionView to display data instead of ListView, because CollectionView don't need to use ViewCell.

 <ContentPage.Resources>  
         
        <Style TargetType="Frame">  
            <Setter Property="VisualStateManager.VisualStateGroups">  
                <VisualStateGroupList>  
                    <VisualStateGroup x:Name="CommonStates">  
                        <VisualState x:Name="Normal" />  
                        <VisualState x:Name="Selected">  
                            <VisualState.Setters>  
                                <Setter Property="BackgroundColor" Value="Blue" />  
                            </VisualState.Setters>  
                        </VisualState>  
                    </VisualStateGroup>  
                </VisualStateGroupList>  
            </Setter>  
        </Style>  
    </ContentPage.Resources>  
    <ContentPage.Content>  
        <StackLayout>  
            
  
            <CollectionView  
                ItemsSource="{Binding Clients}"  
                SelectedItem="{Binding placeItemSelected}"  
                SelectionMode="Single">  
                <CollectionView.ItemTemplate>  
                    <DataTemplate>  
                        <Frame BackgroundColor="Gray" CornerRadius="20">  
                            <StackLayout>  
                                <Label Text="{Binding Name}" />  
                                <Label Text="{Binding Phone}" />  
                            </StackLayout>  
                        </Frame>  
                    </DataTemplate>  
                </CollectionView.ItemTemplate>  
            </CollectionView>  
        </StackLayout>  
    </ContentPage.Content>  

The Screenshot:

Best Regards,

Cherry Bu

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.