Articles in this section
Category / Section

How to customize the corner radius of ChipGroup items in Xamarin.Forms

1 min read

This article describes how to set CornerRadius value for each chipgroup items in the Xamarin ChipGroup(SfChipGroup) by the following steps.

 

Step 1: Create a custom chipgroup class, which is derived from SfChipGroup, and define a property named CornerRadius.

 

C#:

public class CustomChipGroup : SfChipGroup
{
    public static readonly BindableProperty CornerRadiusProperty =
        BindableProperty.Create("CornerRadius", typeof(Thickness), typeof(CustomChipGroup), GetDefaultCornerRadius(), BindingMode.TwoWay, null, null);
 
    public Thickness CornerRadius
    {
        get { return (Thickness)GetValue(CornerRadiusProperty); }
        set { this.SetValue(CornerRadiusProperty, value); }
    }
 
    private static Thickness GetDefaultCornerRadius()
    {
        if (Device.RuntimePlatform == Device.Android)
        {
            return 40d;
        }
 
        return 15d;
    }
}

Step 2: Override the OnChildAdded method and hook the ChildAdded event in that method, which will be called whenever a new child is added to SfChipGroup. In that event method, you can set the value for CornerRadius for each individual SfChip.

 

C#:

public class CustomChipGroup : SfChipGroup
{
    . . .
    protected override void OnChildAdded(Element child)
    {
        base.OnChildAdded(child);
        child.ChildAdded += Child_ChildAdded;
    }
 
    private void Child_ChildAdded(object sender, ElementEventArgs e)
    {
        var sfChip = e.Element as SfChip;
        if (sfChip != null)
        {
            sfChip.SetBinding(SfChip.CornerRadiusProperty, new Binding() { Path = "CornerRadius", Source = this, Mode = BindingMode.TwoWay });
        }
    }
}

Step 3: Unhook the ChildAdded event in OnChildRemoved override method.

 

C#:

public class CustomChipGroup : SfChipGroup
{
    . . .
    protected override void OnChildRemoved(Element child)
    {
        child.ChildAdded -= Child_ChildAdded;
        base.OnChildRemoved(child);
    }
}

Step 4: Set the CornerRadius value for customized SfChipGroup.

 

XAML:

<local:CustomChipGroup ItemsSource="{Binding Items}" 
                                              DisplayMemberPath="Name"     
                                              CornerRadius="0"/>

 

Output:

Corner Radius: 0
SfChipGroup CornerRadius: 0

Corner Radius: 15

 

SfChipGroup CornerRadius: 15

Download the complete here

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied