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