Home > C#, WinRT > Customizing SearchBox appearance in Windows 8.1 Store apps

Customizing SearchBox appearance in Windows 8.1 Store apps

29/10/2013

The SearchBox control that comes with Windows 8.1 makes it very easy to integrate the new search experience in our apps.

If we want to customize the control appearance, we need to override the default colors that are defined in the generic.xaml file located in the folder C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design.

In particular, there are a lot of SolidColorBrush that determine the appearance of the various parts of the control. We can insert them in the Application.Resources section of App.xaml and change their values in order to obtain the style that is more appropriate to our app.

The following section shows the default colors. I have added some comments to make it easier to determine the meaning of each brush:

<Application.Resources>
    <ResourceDictionary>

        <!-- SearchBox background when the mouse is out of the control -->
        <SolidColorBrush x:Key="SearchBoxBackgroundThemeBrush" Color="#CCFFFFFF" />

        <!-- SearchBox background when the mouse is over the control -->
        <SolidColorBrush x:Key="SearchBoxPointerOverBackgroundThemeBrush" 
                         Color="#DDFFFFFF" />

        <!-- SearchBox background when the control is focused. 
             It is also the background of the Search button when it is pressed -->
        <SolidColorBrush x:Key="SearchBoxFocusedBackgroundThemeBrush" Color="#FFFFFFFF" />

        <!-- SearchBox border when the mouse is out of the control -->
        <SolidColorBrush x:Key="SearchBoxBorderThemeBrush" Color="#FF2A2A2A" />

        <!-- SearchBox border when the mouse is over the control -->
        <SolidColorBrush x:Key="SearchBoxPointerOverBorderThemeBrush" Color="#FFDDDDDD" />

        <!-- SearchBox border when the control is focused -->
        <SolidColorBrush x:Key="SearchBoxFocusedBorderThemeBrush" Color="#FF2A2A2A" />

        <!-- Search button background when when the control is focused, but the mouse is 
             out of the button.
             It is also the background of search suggestions when the mouse is over 
             them -->
        <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="#FF4617B4" />

        <!-- Search button background when the mouse is over the button
             (when the control is focused or not) -->
        <SolidColorBrush x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush" 
                         Color="#FF5F37BE" />

        <!-- Search button color when the mouse is out of the control -->
        <SolidColorBrush x:Key="SearchBoxForegroundThemeBrush" Color="#FF000000" />

        <!-- Search button color when the mouse is over the control -->
        <SolidColorBrush x:Key="SearchBoxPointerOverTextThemeBrush" Color="#99000000" />

        <!-- Search button color when the control is focused. 
             It is also the search suggestions color when the mouse is over them -->
        <SolidColorBrush x:Key="SearchBoxButtonForegroundThemeBrush" Color="White" />

        <!-- Search button color when the mouse is over the button and the control 
             is focused -->
        <SolidColorBrush x:Key="SearchBoxButtonPointerOverForegroundThemeBrush" 
                         Color="#FFFFFFFF" />

        <!-- Search button color when it is pressed -->
        <SolidColorBrush x:Key="SearchBoxFocusedTextThemeBrush" Color="#FF000000" />

        <!-- Search suggestions color seprator -->
        <SolidColorBrush x:Key="SearchBoxSeparatorSuggestionForegroundThemeBrush" 
                         Color="#FF000000" />

        <!-- Color of highlighted characters in the result suggestions -->
        <SolidColorBrush x:Key="SearchBoxHitHighlightForegroundThemeBrush" 
                         Color="#FF4617B4" />

        <!-- Color of highlighted characters in the result suggestions when the mouse is 
             over the element -->
        <SolidColorBrush x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush" 
                         Color="#FFA38BDA" />

        <!-- Disabled SearchBox background -->
        <SolidColorBrush x:Key="SearchBoxDisabledBackgroundThemeBrush" 
                         Color="Transparent" />

        <!-- Disabled SearchBox border -->
        <SolidColorBrush x:Key="SearchBoxDisabledBorderThemeBrush" Color="#FF666666" />

        <!-- Disabled search button color -->
        <SolidColorBrush x:Key="SearchBoxDisabledTextThemeBrush" Color="#66FFFFFF" />

    </ResourceDictionary>
</Application.Resources>

Whit the default brushes, we obtain the following appearance:

Default SearchBox appearance

Default SearchBox appearance

We can try to change some of these colors to customize the control:

<Application.Resources>
    <ResourceDictionary>

        <!-- Search button background when when the control is focused, but the mouse is 
             out of the button.
             It is also the background of search suggestions when the mouse is over 
             them -->
        <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="Green" />

        <!-- Search button background when the mouse is over the button
             (when the control is focused or not) -->
        <SolidColorBrush x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush" 
                         Color="DarkGreen" />

        <!-- Search button color when the control is focused. 
             It is also the search suggestions color when the mouse is over them -->
        <SolidColorBrush x:Key="SearchBoxButtonForegroundThemeBrush" Color="Yellow" />

        <!-- Search suggestions color seprator -->
        <SolidColorBrush x:Key="SearchBoxSeparatorSuggestionForegroundThemeBrush" 
                         Color="Red" />

        <!-- Color of highlighted characters in the result suggestions when the mouse is 
             over the element -->
        <SolidColorBrush x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush" 
                         Color="White" />

    </ResourceDictionary>
</Application.Resources>

And the result is the following:

Customized SearchBox appearance

Customized SearchBox appearance

Note that, as we are overriding the colors defined in the standard generic.xaml file, we need to include in our resources only the brushes that are actually modified (as in the example above).

Categories: C#, WinRT
  1. Andrea Domenichini
    04/11/2013 at 06:09

    Hi,

    is it possible to have a different color for suggestion item detail text?

    • 04/11/2013 at 08:44

      Not directly. You need to modify the SearchBox template to accomplish this.

  1. 30/10/2013 at 01:41
  2. 30/10/2013 at 11:22
Comments are closed.
%d bloggers like this: