Personalizar colores por defecto del nuevo control SearchBox en Windows 8.1

viernes, 28 de febrero de 2014

Con la nueva versión de Windows 8.1, para desarollar una aplicación para la Tienda de Windows en XAML, tenemos el nuevo control SearchBox para poder realizar búsquedas dentro de nuestra aplicación.

Este control dispone de funcionalidad de historial de búsquedas y posibilidad de textos sugeridos mediante autocompletado.

Si no te convencen los colores por defecto que trae este control se pueden personalizar, vamos a ver como podemos realizar esta personalización de los colores.

Todos los estilos por defecto de los controles en Windows 8 se obtienen de un fichero General.xaml situado en la siguiente ruta C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design

En este fichero estos son los colores definidos para el SearchBox, He añadido comentarios en cada uno de los colores para que se entiendan mejor.
               
<!--Color de fondo del control cuando no tiene el foco-->
<SolidColorBrush x:Key="SearchBoxBackgroundThemeBrush" Color="#CCFFFFFF" />

<!--Color del borde del control cuando no tiene el foco-->
<SolidColorBrush x:Key="SearchBoxBorderThemeBrush" Color="#FF2A2A2A" />

<!--Color de fondo del control cuando esta deshabilitado-->
<SolidColorBrush x:Key="SearchBoxDisabledBackgroundThemeBrush" Color="Transparent" />

<!--Color del icono de lupa cuando el control esta deshabilitado-->
<SolidColorBrush x:Key="SearchBoxDisabledTextThemeBrush" Color="#66FFFFFF" />

<!--Color del borde del control cuando esta deshabilitado-->
<SolidColorBrush x:Key="SearchBoxDisabledBorderThemeBrush" Color="#FF666666" />

<!--Color de fondo del control cuando el puntero del ratón pasa por encima del control-->
<SolidColorBrush x:Key="SearchBoxPointerOverBackgroundThemeBrush" Color="#DDFFFFFF" />

<!--Color del icono de lupa cuando el puntero del ratón pasa por encima del control-->
<SolidColorBrush x:Key="SearchBoxPointerOverTextThemeBrush" Color="#99000000" />

<!--Color del borde del control cuando el puntero del ratón pasa por encima del control-->
<SolidColorBrush x:Key="SearchBoxPointerOverBorderThemeBrush" Color="#FFDDDDDD" />

<!--Color de fondo del control cuando el control tiene el foco-->
<SolidColorBrush x:Key="SearchBoxFocusedBackgroundThemeBrush" Color="#FFFFFFFF" />

<!--Color del icono de lupa cuando cuando el boton de busqueda tiene el foco-->
<SolidColorBrush x:Key="SearchBoxFocusedTextThemeBrush" Color="#FF000000" />

<!--Color del borde del control cuando el control tiene el foco-->
<SolidColorBrush x:Key="SearchBoxFocusedBorderThemeBrush" Color="#FF2A2A2A" />

<!--Color de fondo del boton de búsqueda cuando el control tiene el foco
y color de fondo tambien de un elemento sugerido cuando esta seleccionado-->
<SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="#FF4617B4" />

<!--Color del icono de lupa cuando el control tiene el foco-->
<SolidColorBrush x:Key="SearchBoxButtonForegroundThemeBrush" Color="White" />

<!--Color del icono de lupa cuando el puntero del ratón pasa por encima-->
<SolidColorBrush x:Key="SearchBoxButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />

<!--Color de fondo del boton de búsqueda cuando el puntero del ratón pasa por encima-->
<SolidColorBrush x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />

<!--Color de fondo del separador de los resultados sugeridos-->
<SolidColorBrush x:Key="SearchBoxSeparatorSuggestionForegroundThemeBrush" Color="#FF000000" />

<!--Color de las letras de los resultados sugeridos que coninciden con el termino escrito 
en la caja de texto-->
<SolidColorBrush x:Key="SearchBoxHitHighlightForegroundThemeBrush" Color="#FF4617B4" />

<!--Color de las letras de los resultados sugeridos que coninciden con el termino escrito 
en la caja de texto, cuando el texto sugerido esta seleccionado-->
<SolidColorBrush x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush" Color="#FFA38BDA" />

<!--Color del icono de lupa cuando el control no tiene el foco y tambien color del texto
y de los textos sugeridos-->
<SolidColorBrush x:Key="SearchBoxForegroundThemeBrush" Color="#FF000000" />

Si queremos personalizar estos colores tenemos que crearnos unos recursos para aquellos colores que queremos personalizar con los mismos nombres que tienen en este fichero. Al definirnos estos recursos para el ambito de nuestra aplicación el control asumirá estos colores y no los de por defecto.
Para definirnos los colores en el ambito de nuestra aplicación podemos crearnos una sección de recursos en el fichero app.xaml o crearnos un diccionario de recursos y referenciarlo desde el app.xaml. Para nuestro ejemplo sencillo nos basta con crearnos los recursos directamente en el app.axml.
               
<Application
    x:Class="CustomizeSearchBoxControlColors.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomizeSearchBoxControlColors">
    <Application.Resources>
        <ResourceDictionary>
                       
            <!--Color de fondo del boton de búsqueda cuando el control tiene el foco
            y color de fondo tambien de un elemento sugerido cuando esta seleccionado-->
            <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="#3498db" />

            <!--Color de fondo del boton de búsqueda cuando el puntero del ratón pasa por encima-->
            <SolidColorBrush x:Key="SearchBoxButtonPointerOverBackgroundThemeBrush" Color="#3498db" />

            <!--Color de las letras de los resultados sugeridos que coninciden con el termino escrito 
            en la caja de texto-->
            <SolidColorBrush x:Key="SearchBoxHitHighlightForegroundThemeBrush" Color="#3498db" />

            <!--Color de las letras de los resultados sugeridos que coninciden con el termino escrito 
            en la caja de texto, cuando el texto sugerido esta seleccionado-->
            <SolidColorBrush x:Key="SearchBoxHitHighlightSelectedForegroundThemeBrush" Color="#34495e" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

Sobreescribiendo los recursos por defecto de esta forma conseguimos personalizar la apariencia del control SearchBox.


Libros Relacionados

Windows 8.1 Apps with XAML and C# Unleashed

Programming Windows: Writing Windows 8 Apps With C# and XAML

Desarrollo en Windows 8 y Windows Phone 8 con XAML y C#

No hay comentarios:

Publicar un comentario