How to Customize the Appearance of the Clear Button in WPF SfTextBoxExt

This section explains how users can customize the appearance of the clear button in the WPF SfTextBoxExt.

Step1: Override the default ControlTemplate:
Override the default control template to customize the appearance of the clear button in the WPF SfTextBoxExt. Here’s how you can achieve this:

XAML:

 <window.resources>
       <controltemplate x:key="DefaultSfTextBoxExtStyle" targettype="{x:Type Input:SfTextBoxExt}">
           <grid>
               <grid.columndefinitions>
                   <columndefinition width="*">
                   <columndefinition width="Auto">

               </columndefinition></columndefinition></grid.columndefinitions>

               <border x:name="Bd" grid.columnspan="3" background="{TemplateBinding Background}" borderbrush="{TemplateBinding BorderBrush}" borderthickness="{TemplateBinding BorderThickness}" snapstodevicepixels="true">
                   <grid>
                       <scrollviewer x:name="PART_ContentHost" margin="4,0,0,0" verticalalignment="{TemplateBinding VerticalAlignment}" verticalcontentalignment="{TemplateBinding VerticalContentAlignment}" snapstodevicepixels="{TemplateBinding SnapsToDevicePixels}">

                       <contentcontrol x:name="PART_Watermark" grid.row="0" margin="4,0,0,0" padding="{TemplateBinding Padding}" verticalalignment="{TemplateBinding VerticalAlignment}" verticalcontentalignment="{TemplateBinding VerticalContentAlignment}" background="{TemplateBinding Background}" content="{TemplateBinding Watermark}" contenttemplate="{TemplateBinding WatermarkTemplate}" contenttemplateselector="{TemplateBinding WatermarkTemplateSelector}" fontfamily="{TemplateBinding FontFamily}" fontsize="{TemplateBinding FontSize}" fontstretch="{TemplateBinding FontStretch}" fontstyle="{TemplateBinding FontStyle}" fontweight="{TemplateBinding FontWeight}" foreground="{TemplateBinding Foreground}" ishittestvisible="False" istabstop="False" opacity="0.5" visibility="{TemplateBinding Visibility}">
                   </contentcontrol></scrollviewer></grid>
               </border>

               <button grid.column="1" name="deleteButton" margin="0,1,0,1" padding="5,0,5,0" background="Transparent" borderbrush="Transparent" borderthickness="0" istabstop="False" visibility="Collapsed">
                   <img source="CloseButton.png" width="20" height="20" horizontalalignment="Center" verticalalignment="Center">
               </button>
           </grid>
       </controltemplate>
   </window.resources>

Step 2: Configure the ControlTemplate with SfTextBoxExt
Link the ControlTemplate to the SfTextBoxExt template to use the overridden ControlTemplate with the SfTextBoxExt for a customized appearance of the clear button. This will enable you to achieve the desired appearance for the clear button in the SfTextBoxExt.

XAML:

<stackpanel verticalalignment="Center">
       <input:sftextboxext horizontalalignment="Center" verticalalignment="Center" horizontalcontentalignment="Center" height="40" width="200" template="{StaticResource DefaultSfTextBoxExtStyle}" showclearbutton="True" text="Hello! World...">

       </input:sftextboxext>
   </stackpanel> 

Output:

Conclusion:
I hope you enjoyed learning how to customize the appearance of the clear button in WPF SfTextBoxExt.

Refer to our WPF TextBox feature tour page for its other groundbreaking feature representations. You can also explore our WPF TextBox documentation to understand how to create and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our other controls.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!