Windows

Aplicar estilo y recurso de tema a los controles: Tutorial de desarrollo de aplicaciones de Windows Phone - Parte 20

Aplica CSS para mejorar la interfaz

Aplica CSS para mejorar la interfaz
Anonim

En el último tutorial aprendimos a aplicar el estilo y el recurso de tema a nuestros controles. Ahora en esta parte de nuestra serie de tutoriales , seguiremos trabajando con estilos y recursos y aprenderemos cómo aplicar recursos de color de nuestra elección.

Comencemos trabajando con el mismo proyecto que creamos en el último tutorial con un botón Seleccione ese botón y diríjase a la ventana de propiedades. Al hacer clic en la flecha pequeña situada junto a la propiedad de primer plano, verá que se abre otra ventana pequeña con fichas y fichas de diferentes colores. Hay cuatro pestañas pequeñas en esa ventana pequeña, a saber, Cepillo nulo, Cepillo de color sólido, Cepillo de degradado y Cepillo de imagen. Por defecto, está configurado en pincel sólido con color blanco (RGB: 0,0,0 y canal de transparencia alfa configurado en 255). Puede elegir el color que desee moviendo el control deslizante a lo largo de la barra vertical y luego el cursor circular para seleccionar el tono exacto. También puede elegir iDropper con el que puede adoptar el color de cualquiera de las herramientas disponibles. Hay muchas maneras de modificar el color de este pincel de color sólido.

Lo mismo ocurre con el Pincel de degradado. Realiza tareas similares a las de un pincel de color sólido, pero tiene pocas opciones adicionales. Te da una serie de paradas. Puede usar estas paradas creativamente para obtener diferentes tonos entre el color elegido. También puede cambiar la textura del color usando opciones como gradiente horizontal y gradiente vertical. El pincel de imagen le permite elegir una imagen como nuestro recurso. Puede agregar una imagen tal como agregamos una imagen en el control de imagen.

Por ahora, use el pincel de degradado usando un stop como lo hice (vea la imagen). Ahora, si ve la ventana XAML, verá que se agrega un código a la ventana XAML para el botón.

Supongamos ahora, si queremos agregar el mismo color de degradado que agregamos para nuestro botón a todos los demás controles en nuestra página, ¿Cómo lo hacemos? Para eso vaya a la propiedad de primer plano donde configuramos el pincel de degradado de color y haga clic derecho sobre él y seleccione "Extraer valor al recurso". Abrirá una pequeña ventana emergente "Crear recurso". Puede nombrar el recurso como lo desee o puede irse como está. Luego puede elegir dónde desea guardarlo, dependiendo de dónde desee usar este recurso. Si desea usarlo en una sola página, seleccione MainPage.xaml, elija App.xaml y haga clic en Ok.

Ahora arrastre otro botón en la superficie del diseñador y vaya a la propiedad en primer plano. Ahora encontrará nuestro recurso personalizado bajo el nombre de recursos locales. Una vez que hagas clic en él, verás el segundo botón con el mismo color que el primero. ¿Qué pasa si hay múltiples propiedades que queremos aplicar a nuestro control? Podemos hacerlo usando estilos. Un estilo es una colección de establecedores de propiedades. Permítanos crear un nuevo estilo ahora. Primero borre todas las modificaciones que hicimos en el último ejemplo y obtenga un nuevo botón para comenzar de nuevo. Pegue el siguiente código debajo de las declaraciones xmlsns.







En este código, hemos creado dos propiedades setter para cambiar el color del borde y del primer plano. Después de esto, vaya al código del botón y agregue este código:

Style = "{StaticResource myStyle}".

Notará que el color del borde del botón y el color del primer plano se vuelve rojo.

Ahora, si lo desea para aplicar este estilo a toda su aplicación, corte el código entre. Abra el archivo App.xaml y péguelo entre las etiquetas de recursos de la aplicación. Ahora, si vuelve atrás y comprueba el botón, verá que ese botón todavía muestra el color rojo.

Así que todo esto se trata de estilos y recursos en Windows Phone 7.5. En el próximo capítulo, aprenderemos a navegar entre las páginas xaml.