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# UnleashedProgramming 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