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

Change the clear button icon

Thread ID:

Created:

Updated:

Platform:

Replies:

148672 Oct 29,2019 10:12 PM UTC Oct 30,2019 11:14 AM UTC Xamarin.Forms 2
loading
Tags: SfAutoComplete
Scott Roberts
Asked On October 29, 2019 10:12 PM UTC

Hi,


Is there a way to display a custom icon for theSfAutoComplete control?   Currently the control displays an X in a circle but we would like to display a custom image.

Thanks,
Scott

Attachment: Capture_891de6cc.zip

Hemalatha Marikumar [Syncfusion]
Replied On October 30, 2019 11:10 AM UTC

Hi Scott Roberts, 
  
Greetings from Syncfusion. 
 
Query: Display custom image instead of default close button. 
 
We would like to let you know that close button icon on SfAutoComplete is default one and we don’t have a support to customize it. But your requirement has been achieved with the help of SfComboBox. We have a customization option for dropdown button on SfComboBox. Using DropDownButtonSettings’s View property, we can add custom image on it as per the following code snippet. 
 
 
Note: 
 
Default mode of SfComboBox is non-editable mode. To make a similar look of SfAutoComplete, sets AllowFiltering and IsEditable property as True. 


 
Code Snippet [XAML]: 
 
          <combobox:SfComboBox HeightRequest="40" 
                                 IsEditableMode="True" 
                                 AllowFiltering="True" 
                                 ShowClearButton="False" 
                                 ValueChanged="ComboBox_ValueChanged" 
                                 x:Name="comboBox"> 
                    ………  
            <combobox:DropDownButtonSettings.View>
                        <Image x:Name="dropDownImage"
                                   Source="DeleteButton.png"
                                   HeightRequest="30"
                                   WidthRequest="30"                          
                                   IsVisible="false"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                                                          NumberOfTapsRequired="1"/>
                            </Image.GestureRecognizers>
                        </Image>
                    </combobox:DropDownButtonSettings.View>
                </combobox:DropDownButtonSettings>
 
        </combobox:SfComboBox> 
      
  
Sample Link: 
Output: 
 
 


 
Please check the sample and let know if you need any other further assistance.  
 
Regards, 
Hemalatha M. 


Hemalatha Marikumar [Syncfusion]
Replied On October 30, 2019 11:14 AM UTC

Hi Scott Roberts, 
  
Greetings from Syncfusion. 
 
Query: Display custom image instead of default close button. 
 
We would like to let you know that close button icon on SfAutoComplete is default one and we don’t have a support to customize it. But your requirement has been achieved with the help of SfComboBox. We have a customization option for dropdown button on SfComboBox. Using DropDownButtonSettings’s View property, we can add custom image on it as per the following code snippet. 
 
 
Note: 
 
Default mode of SfComboBox is non-editable mode. To make a similar look of SfAutoComplete, sets AllowFiltering and IsEditable property as True. 


 
Code Snippet [XAML]: 
 
          <combobox:SfComboBox HeightRequest="40" 
                                 IsEditableMode="True" 
                                 AllowFiltering="True" 
                                 ShowClearButton="False" 
                                 ValueChanged="ComboBox_ValueChanged" 
                                 x:Name="comboBox"> 
                    ………  
            <combobox:DropDownButtonSettings.View>
                        <Image x:Name="dropDownImage"
                                   Source="DeleteButton.png"
                                   HeightRequest="30"
                                   WidthRequest="30"                          
                                   IsVisible="false"
                                   HorizontalOptions="Center"
                                   VerticalOptions="Center">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                                                          NumberOfTapsRequired="1"/>
                            </Image.GestureRecognizers>
                        </Image>
                    </combobox:DropDownButtonSettings.View>
                </combobox:DropDownButtonSettings>
 
        </combobox:SfComboBox> 
      
  
Sample Link: 
Output: 
 
 


 
Please check the sample and let know if you need any other further assistance.  
 
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