All geek questions in one place

How to add a clear button to a TextBox in WPF?

I am working on a control for my WPF application in which I want a Button inside a TextBox . Button will contain an image that changes with the mouse, but I already know how to make this part. I'm having problems with what Button actually includes in a TextBox so that it takes up as much space as it is transparent. Below is the inscription that I have tried so far:

XAML:

 <Grid> <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/> <Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> <Button.Content> <Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Button.Content> </Button> </Grid>

I followed this question: How to implement a text box with a transparent button in wpf? , which is also related to this article: WPF Search Text Box . The XAML suggested in the question did not work, and I think this is because of the Style used, which I do not have access to. The article provided too much information, mainly talking about the properties of triggers and dependencies needed to replace the search and delete the mouse icons. So, I ask for help finding a simple solution on how to do this. Thanks!

EDIT: I followed the advice on answers, and I can draw the button correctly, but it won’t appear in the text box, and if that happens, the text will still work under it. I included XAML and a photo of what is happening:

XAML:

 <Grid Margin="5, 5, 10, 5"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/> <Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1"> <Button.Template> <ControlTemplate> <Border HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Source="Image.png" Width="12" Height="12"/> </Border> </ControlTemplate> </Button.Template> </Button> </Grid>

Picture

Searchbox w / Button

+6
source share
1 answer

Specify Button template instead of content

 <Button> <Button.Template> <ControlTemplate> <Border HorizontalAlignment="Center" VerticalAlignment="Center" > <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" Width="16" Height="16"/> </Border> </ControlTemplate> </Button.Template> </Button>

EDIT

By the way, in your case the image will cover the TextBox and enter the text. I would recommend placing these controls in different columns of the grid, for example below,

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/> <Button Grid.Column="1" Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> <ControlTemplate> <Border HorizontalAlignment="Center" VerticalAlignment="Center" > <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" Width="16" Height="16"/> </Border> </ControlTemplate> </Button.Template> </Button>
+5
source

Source: https://habr.com/ru/post/951734/

More articles:


All Articles