We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

5 Replies

HM Hemalatha Marikumar Syncfusion Team October 14, 2019 04:23 AM

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. 
 



SR Scott Roberts replied to Scott Roberts October 15, 2019 06:05 AM

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



HM Hemalatha Marikumar Syncfusion Team October 17, 2019 06:02 AM

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); 
    } 
    . . . 
} 
  
  
  
  
Screenshot
 
  
Please get back to us for further assistance. 
  
Regards, 
Hemalatha M. 



SR Scott Roberts October 17, 2019 07:33 AM

Hi Hemalatha,

That works perfect.  

Thanks!
Scott




HM Hemalatha Marikumar Syncfusion Team October 17, 2019 10:47 PM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon