ChipCornerRadius property missing on SfChipGroup

[Arie]

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,

[Mugundhan Saravanan]

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

CodeSnippet:

 

<buttons:SfChipGroup x:Name="SfChipGroup" Type="Action"> 

<buttons:SfChipGroup.Items> 

                <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"/> 

            </buttons:SfChipGroup.Items> 

        </buttons:SfChipGroup> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142518/ze/SfChipGroupSample1440799851  

Please let us know if you have any other concern.

Regards,
Mugundhan S. 

[Cepega]

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

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

[Muneesh Kumar G]

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 }); 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfChipGroupSample-1684365744 

 

Please let us know if you have any concern. 

 

Regards, 

Muneesh Kumar G. 

[Andrew Elliott]

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? 

[Muneesh Kumar G]

Hi Andrew Elliott, 

 

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 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142518/ze/GettingStartedButton-1133766225.zip 

 

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); }
        }

        #endregion

        public CustomChipGroup()
        {
            this.ChipLayout.ChildAdded+= ChipLayout_ChildAdded;
        }

        #region Default corner radius

        private static Thickness GetDefaultCornerRadius()
        {
            if (Device.RuntimePlatform == Device.Android)
            {
                return 40d;
            }

            return 15d;
        }

        #endregion

        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});
            }
        }
    } 

 

 

[XAML] 

 

     <StackLayout>
        <Label Margin="0,30,0,10"  Text="Using ItemsSource" FontAttributes="Bold"/>
        <local:CustomChipGroup 
            ItemsSource="{Binding Items}" 
            DisplayMemberPath="Name"
            CornerRadius="0"/>
         <Label Margin="0,30,0,10" Text="Using Items" FontAttributes="Bold"/>
        <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>
    </StackLayout> 

 

With this example can suitable for both custom collection and collection of Chips. 

 

Screenshot: 

 

 

 

Please let us know if you have any queries.  

 

Regards, 

Muneesh Kumar G.