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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148282 Oct 13,2019 10:37 PM UTC Oct 18,2019 06:47 AM UTC Xamarin.Forms 5
loading
Tags: SfChipGroup
Scott Roberts
Asked On October 13, 2019 10:37 PM UTC

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 [Syncfusion]
Replied On October 14, 2019 12:23 PM UTC

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
Replied On October 15, 2019 02:05 PM UTC

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 [Syncfusion]
Replied On October 17, 2019 02:02 PM UTC

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. 


Scott Roberts
Replied On October 17, 2019 03:33 PM UTC

Hi Hemalatha,

That works perfect.  

Thanks!
Scott



Hemalatha Marikumar [Syncfusion]
Replied On October 18, 2019 06:47 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon