Setting the appearance of the Clear Button

[Ronez]

Dear Sirs/Madams,

Is there a way to change the appearance of the Clear Button with an image like the one below?

Thank you for your patience and cooperation.

Best regards,
SE

[AhamedAliNishad JahirHussain]

Hi Stephan,

We have reviewed your query and created a sample based on your requirement. In the sample, we have customized the ControlTemplate of SfTextboxExt to change the appearance of the clear button at the sample level. Please find the attached sample. Please refer the below code snippet for this.

Code snippet 

  <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"

                    IsTabStop="False"

                    Visibility="Collapsed">

                    <Image Source="CloseButton.png"

                          

           Width="20"

           Height="20"

           HorizontalAlignment="Center"

           VerticalAlignment="Center" />

                </Button>

 

            </Grid>

 

        </ControlTemplate>

Sample output:

Please check the sample and let us know If you require any other details.

Regards,

Ahamed Ali Nishad.

Attachment: TextBoxClose_d4299cff.zip

[Ronez]

Dear Ahamed Ali Nishad, 

i was able to successfully integrate your template. 

Thank you for your patience and cooperation.

Best regards,
SE

[Preethi Rajakandham]

Hi Stephan Eibner,

You're welcome. We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help.

Regards,

Preethi R