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

ChipCornerRadius property missing on SfChipGroup

Why is the CornerRadius property not settable, like ChipBorderWidth or ChipBorderColor, from the sfChipGroup? 
Could this be added in the future? 

Could anyone propose a workaround that might be using a DataTemplate with appropriate bindings to address this issue while using the control in a MVVM scenario?

Best regards,

5 Replies

MS Mugundhan Saravanan Syncfusion Team February 12, 2019 04:13 PM UTC

Hi Arie,

Greetings from Syncfusion.

Query: “ CornerRadius property not settable from the SfChipGroup?”

We have analyzed the reported query and currently we don’t have direct support for SfChipGroup but you can achieve this in the SfChip alone. We have prepared a sample for using the CornerRadius property in the SfChip and bind the value in the ViewModel. Please have the sample from the following link

<buttons:SfChipGroup x:Name="SfChipGroup" Type="Action"> 
                <buttons:SfChip  CornerRadius="{Binding CornerRadius,Mode=TwoWay}"  Text="Extra"/> 
                <buttons:SfChip  CornerRadius="{Binding CornerRadius,Mode=TwoWay}"  Text="Small"/> 
                <buttons:SfChip  CornerRadius="{Binding CornerRadius,Mode=TwoWay}"  Text="Medium"/> 
                <buttons:SfChip  CornerRadius="{Binding CornerRadius,Mode=TwoWay}"  Text="Large"/> 
Sample: http://www.syncfusion.com/downloads/support/forum/142518/ze/SfChipGroupSample1440799851  

Please let us know if you have any other concern.

Mugundhan S. 

CE Cepega March 23, 2019 09:25 AM UTC

How I can use this case when I using ItemSources in xaml? 

<buttons:SfChipGroup ItemsSource="{Binding Items}» >

MK Muneesh Kumar G Syncfusion Team March 29, 2019 11:10 AM UTC

Hi Cepega, 
Greetings from Syncfusion. 
Query: "How I can use corner radius when I'm using ItemSources in XAML". 
We have validated the requirement and you can achieve this by populating collection of SfChip as per the below code snippet. Please have the sample and code snippet for your reference. 
Code Snippet: 
employees = new ObservableCollection<SfChip>();
employees.Add(new SfChip() { Text= "John", CornerRadius= 10 });
 employees.Add(new SfChip() { Text = "James", CornerRadius = 10 });
Please let us know if you have any concern. 
Muneesh Kumar G. 

AE Andrew Elliott April 29, 2019 12:33 PM UTC

That works but it is not a great solution to be honest. To have to work with a SfChip item and compare it to a string or item index to work out whats selected is not great.

The same applies for other properties like item width and height.

Is this going to be addressed in a future release? 

MK Muneesh Kumar G Syncfusion Team April 30, 2019 11:43 AM UTC

Thanks for your update, 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 
Code Implementation: 
   public class CustomChipGroup : SfChipGroup
        #region CornerRadius

        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;

        #region Default corner radius

        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});
        <Label Margin="0,30,0,10"  Text="Using ItemsSource" FontAttributes="Bold"/>
            ItemsSource="{Binding Items}" 
         <Label Margin="0,30,0,10" Text="Using Items" FontAttributes="Bold"/>
        <local:CustomChipGroup  CornerRadius="0">
                <buttons:SfChip Text="John"/>
                 <buttons:SfChip Text="Mary"/>
                 <buttons:SfChip Text="Jeny"/>
                 <buttons:SfChip Text="Mark"/>
With this example can suitable for both custom collection and collection of Chips. 
Please let us know if you have any queries.  
Muneesh Kumar G.    

Live Chat Icon For mobile
Up arrow icon