How to set the corner radius for chip buttons in a SfChipGroup

[Scott Roberts]

Hi,

There are properties to set the chip border color, border width, etc but I can't see a way to set the corner radius for buttons in a SfChipGroup.

Thanks,
Scott

[Hemalatha Marikumar]

Hi Scott,

We have analyzed your requirement and we would like to inform you that SfChipGroup's architectural design view is reassembled like corner curved shaped token view.  

We have maintained default corner radius value for SfChipGroup. Hence, we didn't provide a CornerRadius property to SfChipGroup. But your requirement can also be achieved by using custom sample which can be downloaded in below link.

Sample - https://www.syncfusion.com/downloads/support/forum/148282/ze/148282-sample-1337886575.zip 

 
Code snippet [XAML]:  

 

<!--CornerRadius for chip group ItemsSource--> 

<local:CustomChipGroup  

    ItemsSource="{Binding Items}"  

    DisplayMemberPath="Name" 

    CornerRadius="0"/> 

<Label Margin="0,30,0,10" Text="Using Items" FontAttributes="Bold"/> 

  

<!--CornerRadius for chip group Items--> 

<local:CustomChipGroup  CornerRadius="0"> 

    <local:CustomChipGroup.Items> 

        <buttons:SfChip Text="John"/> 

        <buttons:SfChip Text="Mary"/> 

        <buttons:SfChip Text="Jeny"/> 

        <buttons:SfChip Text="Mark"/> 

    </local:CustomChipGroup.Items> 

</local:CustomChipGroup> 

  

Code snippet [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); } 

    } 

  

    public CustomChipGroup() 

    { 

        this.ChipLayout.ChildAdded += ChipLayout_ChildAdded; 

    } 

  

    private static Thickness GetDefaultCornerRadius() 

    { 

        if (Device.RuntimePlatform == Device.Android) 

        { 

            return 40d; 

        } 

  

        return 15d; 

    } 

  

    private void ChipLayout_ChildAdded(object sender, ElementEventArgs e) 

    { 

        if (e.Element is SfChip) 

        { 

           (e.Element as SfChip).SetBinding(SfChip.CornerRadiusProperty, new Binding() { Path = "CornerRadius", Source = this, Mode = BindingMode.TwoWay }); 

        } 

    } 

} 

  

The above sample works for both custom collection and collection of Chips.  

  

Screenshot:  

 

CornerRadius – 0

CornerRadius – 20

 

Please get back to us for further assistance. 

 

Regards, 

Hemalatha M. 

 

[Scott Roberts]

Hi,

There are properties to set the chip border color, border width, etc but I can't see a way to set the corner radius for buttons in a SfChipGroup.

Thanks,
Scott

Thank you for your quick reply.   Your solution works unless you use the ChipLayout property and if you do, then the chip's default corner radius is used.  For example, if I use the solution you provided, setting the CornerRadius=0 but using a FlexLayout, the chip's corner radius is not set to 0.

<local:CustomChipGroup ItemsSource="{Binding Items}" 

     DisplayMemberPath="Name" CornerRadius="0">

<local:CustomChipGroup.ChipLayout>

<FlexLayout HorizontalOptions="Start" VerticalOptions="Center" Direction="Row"

Wrap="Wrap" JustifyContent="Start" AlignContent="Start" AlignItems="Start" />

</local:CustomChipGroup.ChipLayout>

</local:CustomChipGroup>

Thanks,
Scott

[Hemalatha Marikumar]

Hi Scott, 

  

We have modified the previous sample and now it works fine if we use ChipLayout for SfChipGroup. This can be achieved by using the OnChildAdded override method. Please refer the below code. 

  

Code snippet[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) 

    { 

        if (e.Element is SfChip) 

        { 

            (e.Element as SfChip).SetBinding(SfChip.CornerRadiusProperty, new Binding() { Path = "CornerRadius", Source = this, Mode = BindingMode.TwoWay }); 

        } 

    } 

  

    protected override void OnChildRemoved(Element child) 

    { 

        child.ChildAdded -= Child_ChildAdded; 

        base.OnChildRemoved(child); 

    } 

    . . . 

} 

  

  

  

Sample - https://www.syncfusion.com/downloads/support/forum/148282/ze/148282-sample136671671.zip 

  

Screenshot: 

 

  

Please get back to us for further assistance. 

  

Regards, 

Hemalatha M. 

[Scott Roberts]

Hi Hemalatha,

That works perfect.  

Thanks!

Scott

[Hemalatha Marikumar]

Hi Scott, 

 

Thanks for your update. 

 

We glad to hear that given solution works. 

 

Please let us know if you have any other query. 

 

Regards, 

Hemalatha M.