How to customise SfChip close button glyph?

[Radoslaw Kubas]

Hello,

I want to customize SfChip close button glyph, it it possible?

Best regards,

Radek

[Hemalatha Marikumar]

Hi Radoslaw Kubas, 

 

Greetings from Syncfusion.  

 

Query: Customize SfChip close button glyph, it it possible? 

 

Yes. It has been achieved by using two possible ways.  

 

Solution 1#: Using ImageSource property 

 

You can achieve your requirement by using ImageSource property in SfChip and set the font image source to that as per in below 

 

<buttons:SfChip Text="Chip" ShowIcon="True" ImageWidth="25" ImageAlignment="End" TextColor="White"> 

                <buttons:SfChip.ImageSource> 

                    <FontImageSource Glyph="&#xF096;" 

                         FontFamily="{OnPlatform iOS=Segoe MDL2 Assets, Android=SegMDL2.ttf#Segoe MDL2 Assets,UWP=/Assets/SegMDL2.ttf#Segoe MDL2 Assets}" 

                         /> 

                </buttons:SfChip.ImageSource> 

            </buttons:SfChip> 

 

Property	Usage
ShowIcon	To enable the provided image. By default it has false.
ImageWidth	To customize the size of added close button image
ImageAlignment	To align the image at last.

 

Solution 2#: Using Content property in Chip 

 

You can customize the close button glyph by using the Content support in SfChip and SfButton as per in below code snippet 

 

<buttons:SfChip Text="Chip"  x:Name="chip" ShowCloseButton="True"> 

                <buttons:SfChip.Content> 

                <Grid HeightRequest="35"> 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition Width="*"/> 

                            <!--close button width--> 

                            <ColumnDefinition Width="28"/> 

                        </Grid.ColumnDefinitions> 

                        <Label Text="{Binding Source={x:Reference chip},Path=Text}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center"/> 

                        <Label  HorizontalOptions="Center" IsVisible="{Binding Source={x:Reference chip},Path=ShowCloseButton}" Text="&#xF096;" FontSize="18" Margin="0,0,3,0" Grid.Column="1" VerticalOptions="Center"> 

                           <Label.FontFamily> 

                                <OnPlatform iOS="Segoe MDL2 Assets" Android="SegMDL2.ttf#Segoe MDL2 Assets" UWP="/Assets/SegMDL2.ttf#Segoe MDL2 Assets"/> 

                            </Label.FontFamily> 

                        </Label> 

                 </Grid> 

                </buttons:SfChip.Content> 

            </buttons:SfChip> 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/159606/ze/Sample1904450379

 

Screenshot:  

Regards,
Hemalatha M. 

[Radoslaw Kubas]

Hello, thank you very much for this hint!

Could you also advise me, how to do the same, but  for chips inside SfChipGroup ?

Best regards,

Radek

[Yuvaraj Palanisamy]

Hi Radoslaw Kubas, 

 

We have analyzed your query and we can achieve our requirement by using SfChipGroup ItemTemplate support.    

   

Here using custom font icon support in the label, we have added the close button icon to the Label.  To obtain the Input type chip group, we have added the tap gesture of close button label and remove that model from the entire list to move that chip from the chip group.   

   

  <buttons:SfChipGroup    

               ItemsSource="{Binding Languages}"   

                ChipBorderWidth="0">   

                <buttons:SfChipGroup.ItemTemplate>   

                    <DataTemplate>   

                        <Grid>   

                            <Grid.ColumnDefinitions>   

                                <ColumnDefinition Width="*"/>   

                                <!--close button width-->   

                                <ColumnDefinition Width="20"/>   

                            </Grid.ColumnDefinitions>   

                            <Label Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center"/>   

                             <Label HorizontalOptions="Center" FontSize=”20” Grid.Column="1" VerticalOptions="Center">   

                                <Label.Text>   

                                    <OnPlatform Default="&#xe742;" UWP="&#xeB90;"/>   

                                </Label.Text>   

                                <Label.FontFamily>   

                                    <OnPlatform iOS="V1 Font Material icon" Android="SfButton.ttf#V1 Font Material icon"   

                                                UWP="/Assets/sfbutton_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets"/>   

                                </Label.FontFamily>   

                                <!--To recognize the close button tap to remove the item from the chipgroup-->   

                                <Label.GestureRecognizers>   

                                    <TapGestureRecognizer Command="{Binding TapCloseButton}" CommandParameter="{x:Reference viewModel}"/>   

                                </Label.GestureRecognizers>   

                            </Label>   

                        </Grid>   

                    </DataTemplate>   

                </buttons:SfChipGroup.ItemTemplate>   

            </buttons:SfChipGroup>   

   

  

   

public class Language   

    {   

        public Xamarin.Forms.Command CloseButtonTapped { get; set; }   

   

        public string Name { get; set; }   

        public Language()   

        {   

            CloseButtonTapped = new Xamarin.Forms.Command(TapCloseButton);   

        }   

   

        private void TapCloseButton(object e)   

        {   

            ViewModel viewModel = e as ViewModel;   

            viewModel.Languages.Remove(this);   

        }   

   

    }   

  

Also, we have prepared the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/159606/ze/Sample-1586179313  

  

Regards, 

Yuvaraj. 

1111

[Radoslaw Kubas]

Hello,

Thank you for support and new example, but not everything works as expected there. I tried in iOS simulator and it is impossible to close any chip. It seems that chips not receive Tap events. 

Best regards,

Radek

[Suyamburaja Jayakumar]

Hi Radoslaw Kubas, 

 

We have already logged the issue for “ChipGroup ItemTemplate elements does not work with Tap/Click action”. We will update complete details on or before 18 November 2020. 

 

Regards,  

Suyamburaja J. 

 

[Suyamburaja Jayakumar]

Hi Radoslaw Kubas,    

  

We have already logged the issue for “ChipGroup ItemTemplate elements does not work with Tap/Click action”. But we suggest one sample level solution but itself having some touch propagation issue, hence only we have promised to move that fix, but due to needing some automation testing, we shared the patch. We share the complete solution along with that patch below   

   

Please find the sample code with details:    

   

Here using font support in the label, we have added the close button icon to the Label. To obtain the Input type chip group, we have added the tap gesture of close button label and remove that model from the entire list to move that chip from the chip group.   

 

<buttons:SfChipGroup    

               ItemsSource="{Binding Languages}"   

                ChipBorderWidth="0"> 

        <buttons:SfChipGroup.ItemTemplate> 

            <DataTemplate> 

                <Grid> 

                    <Grid.ColumnDefinitions> 

                        <ColumnDefinition Width="*"/> 

                        <!--close button width--> 

                        <ColumnDefinition Width="20"/> 

                    </Grid.ColumnDefinitions> 

                    <Label Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center"/> 

                    <Label HorizontalOptions="Center" FontSize="20" Grid.Column="1" VerticalOptions="Center"> 

                        <Label.Text> 

                            <OnPlatform Default="&#xe742;" UWP="&#xeB90;"/> 

                        </Label.Text> 

                        <Label.FontFamily> 

                            <OnPlatform iOS="V1 Font Material icon" Android="SfButton.ttf#V1 Font Material icon"   

                                                UWP="/Assets/sfbutton_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets"/> 

                        </Label.FontFamily> 

                        <!--To recognize the close button tap to remove the item from the chipgroup--> 

                        <Label.GestureRecognizers> 

                            <TapGestureRecognizer Command="{Binding TapCloseButton}" CommandParameter="{x:Reference viewModel}"/> 

                        </Label.GestureRecognizers> 

                    </Label> 

                </Grid> 

            </DataTemplate> 

        </buttons:SfChipGroup.ItemTemplate> 

    </buttons:SfChipGroup> 

 

public class Language 

        { 

            public Xamarin.Forms.Command CloseButtonTapped { get; set; } 

 

            public string Name { get; set; } 

            public Language() 

            { 

                CloseButtonTapped = new Xamarin.Forms.Command(TapCloseButton); 

            } 

 

            private void TapCloseButton(object e) 

            { 

                ViewModel viewModel = e as ViewModel; 

                viewModel.Languages.Remove(this); 

            } 

 

        } 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/159606/ze/SfChip-sample-121933493.zip  

     

Please find the patch details form below.    

     

Please find the patch from the below link:  

http://syncfusion.com/Installs/support/patch/18.3.0.47/942776/I299920/SyncfusionPatch_18.3.0.47_942776_11172020044947482_I299920.exe  

     

(OR)   

   

Please find the patch assemblies alone from the below location:   

http://syncfusion.com/Installs/support/patch/18.3.0.47/942776/I299920/SyncfusionPatch_18.3.0.47_942776_11172020044947482_I299920.zip  

   

(OR)   

    

Please find the NuGet from the below location:   

http://syncfusion.com/Installs/support/patch/18.3.0.47/942776/I299920/SyncfusionNuget_18.3.0.47_942776_11172020044947482_I299920.zip  

     

Assembly Version: 18.3.0.47    

        

Disclaimer:      

     

Please note that we have created this patch for version 18.3.0.47 specifically to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.    

   

We suspect it may still reproduce because of not clearing the cache from your end. So, please use the package before clear the cache.   

  

Note: Clear the NuGet cache before using this patch.     

 https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache  

 

Please find the procedure to use the NuGet  

 https://www.syncfusion.com/kb/11556/how-to-install-the-customer-patch-nuget-in-windows-machine   

  

Please check and let us know whether the issue has been resolved at your end or not. Based on your confirmation only we will include this fix in our official release. 

 

Regards,  

Suyamburaja J.