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
Corner Radius: 15
