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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ChipCornerRadius property missing on SfChipGroup

Thread ID:

Created:

Updated:

Platform:

Replies:

142518 Feb 7,2019 12:43 PM UTC Apr 30,2019 11:43 AM UTC Xamarin.Forms 5
loading
Tags: SfChipGroup
Arie
Asked On February 7, 2019 12:43 PM UTC

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 [Syncfusion]
Replied On 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

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
Replied On March 23, 2019 09:25 AM UTC

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

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


Muneesh Kumar G [Syncfusion]
Replied On 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. 
 
Regards, 
Muneesh Kumar G. 


Andrew Elliott
Replied On 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? 

Muneesh Kumar G [Syncfusion]
Replied On 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); }
        }

        #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.    
 


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

;