How to trigger the event for the clear button in WPF SfTextBoxExt?

This section explains how users can trigger the event of the clear button in the WPF SfTextBoxExt.

Step1: Override the default ControlTemplate:

Override the default control template to trigger the event of the clear button in the WPF SfTextBoxExt. Here’s how you can achieve this:

XAML:

<Window.Resources>
        <SolidColorBrush x:Key="Black" Color="Black" />

        <ControlTemplate x:Key="DefaultSfTextBoxExtStyle" TargetType="{x:Type Input:SfTextBoxExt}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </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}" />
                    </Grid>
                </Border>

                <Button Grid.Column="1"
                    Name="deleteButton"
                    Margin="0,1,0,1"
                    Padding="5,0,5,0"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    BorderThickness="0" 
                    Click="deleteButton_Click"
                    IsTabStop="False"
                    Visibility="Collapsed">
                    <Path
                        x:Name="ClearButtonContent"
                        Width="8"
                        Height="8"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Data="M1.4139423,0 L7.0029922,5.5845888 12.592018,0 14.006015,1.4149939 8.4180527,6.9985202 14.006,12.582007 12.591996,13.997001 7.0030056,8.4124444 1.4140122,13.997001 1.5026823E-05,12.582007 5.5879484,6.9985092 0,1.4149939 z"
                        Fill="{StaticResource Black}"
                        Stretch="Fill"
                        UseLayoutRounding="True" />
                </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 to trigger the event of the clear button. This will enable you to trigger the clear button in the SfTextBoxExt.

XAML:

<StackPanel VerticalAlignment="Center">
        <Input:SfTextBoxExt HorizontalAlignment="Center" 
                            VerticalAlignment="Center" 
                            HorizontalContentAlignment="Left"
                            Height="40"
                            Width="200" 
                            Template="{StaticResource DefaultSfTextBoxExtStyle}"
                            ShowClearButton="True"
                            Text="Hello! World...">
        </Input:SfTextBoxExt>
</StackPanel>

C#

private void deleteButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Delete button clicked");
}

Output:

Conclusion

I hope you enjoyed learning how to trigger the event 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!