How to show/hide the search icon from the SearchBox control based on whether there is content in the search box?

Question

Hi, dear all,

I'd like to implement the following scenario: when there is content in the search box, the search icon is hidden; otherwise shown.

We could edit the style of the search box control (please refer to this link if needed) to bind the visibility of the search button to the content of the search box. Then doing the convert in code. But is there a convenient way to do this in XAML directly with only a little code change?

Thank you very much.

Answer 1

I believe that you can do this in XAML using VisualStates, but it's more than a little code change.  If you want to minimize the amount of code changes, do it using binding and code-behind.

To see the VisualStates for the Searchbox, put a SearchBox on the page, right-click it and "Edit a copy".  It will put the entire Style of the SearchBox in the Page.Resources for you.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Hi, Matt, thank you very much!

As I am not familiar with VisualStates, I am using the "convert" function: binding the visibility property of the search button to the "Text" property of the search text box and checking whether it is empty in code. If yes, show it, otherwise hide it.

The code is similar as the following:

1. In code, define a new class for the converter. In the converter code, check whether the input string is empty or not to decide the visibility of the search button.

2. In XAML: define a key "StringToVisConverter" to the converter. The using the following to the search button definition:

Visibility="{Binding ElementName=SearchTextBox, Path=Text, Converter={StaticResource StringToVisConverter}}"

Good Luck!