Change the clear button icon

[Scott Roberts]

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]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Sample1053464409


 

Output: 

 

 


 

Please check the sample and let know if you need any other further assistance.  

 

Regards, 

Hemalatha M. 

[Hemalatha Marikumar]

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: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Sample1053464409


 

Output: 

 

 


 

Please check the sample and let know if you need any other further assistance.  

 

Regards, 

Hemalatha M.