WPF: Cómo crear un botón de cristal escalable en BlendPor Steve Psaltis , 20 de julio 2011

   5.00 ( 2 votos )   

Es increíble como un simple efecto puede transformar una aplicación. He tratado de encontrar la manera de crear un efecto de cristal sencillo lo más rápido posible y con el menor cepillos pocos y capas como sea posible para ayudar en el rendimiento de procesamiento, especialmente para Windows Mobile 7. Mis intentos anteriores se parecía más a un tubo de vidrio y participa cepillos de más. Me las he arreglado para conseguir el mío a dos cepillos. Yo creo que podría bajar aún más y sólo utilizar la sustitución de color, pero eso es para otro post! Así que aquí está cómo Actualmente estoy haciendo ...

Paso 1 - Crear el primer rectángulo

Comience con un control de usuario en blanco y asegurarse de que tiene una cuadrícula raíz de diseño. Esto será muy importante para el escalamiento más adelante.

Crear un nuevo rectángulo en sus dimensiones requeridas, en mi caso sus 150 x 50 píxeles. Establezca el relleno a un relleno degradado mantener el gradiente por defecto. Ajuste el color de primer Negro y el segundo color a un gris oscuro, he utilizado # FF454444 como el gris oscuro. Ajuste el radio de esquina a 3 para x e y.

Paso 2 - Crear el efecto de cristal rectangular

El siguiente paso es crear el rectángulo interior que nos dará el efecto de cristal. Para ello, basta con copiar el rectángulo anterior y pegar. Por ahora, sólo queremos reducir su tamaño para que podamos conseguir el aspecto deseado y se siente bien. Reducir el tamaño del rectángulo interior, de modo

que es poco menos de la mitad de la altura del primer rectángulo y de modo que hay un espacio agradable a cada lado. Cambie los colores de degradado a blanco y establecer el alfa del primer color a 10 y el segundo a 75.

Paso 3 - Hacer que el botón

Ahora es el momento de hacer un botón de los rectángulos que tenemos. En primer lugar tenemos a todo un grupo en la red. Entonces, haga clic derecho y seleccione "Agrupar en" y seleccione "Grid" o Ctrl + G.

A continuación, seleccione "Herramientas" -> "Convertir en control" y seleccione el botón de control. Dar la plantilla de un nombre.

Ahora debería ver el texto del botón aparecerá en el centro del control. Esto también le pondrá en el modo de edición de plantilla. Usted tendrá que o bien haga doble clic en el lienzo o en "Button" elemento en la parte superior del diseñador. Esto es para que usted puede ajustar el tamaño de la fuente y el color del botón para los ajustes deseados.Los he ajustado a 23 y White.

Paso 4 - Hacer que el botón escalable

Ahora debería tener algo que se parece a un botón, sin embargo, si usted trata de escalar los elementos no se quedará en proporción con la altura y la anchura del botón actual.

La forma más sencilla de evitar esto es colocar los elementos en un elemento de diseño que se adapta a su contenido.Me parece la cuadrícula que tiene más sentido para entrar en el modo de edición de plantilla, haga clic en el control y seleccionando "Editar plantilla" -> "Edit Current".

Seleccione la red que agrupa los elementos en los principios de "Objetos y escala de tiempo" barra de herramientas y agregar a ella tres columnas y tres filas. Usted puede hacer esto desde la barra de herramientas de diseño.

Establecer la columna a con 0.025,1 y 0.025 respectivamente estrellas y los altos de fila a 0,15, 0,75 y 1 estrella respectivamente. Esto es muy importante ya que es lo que va a retener las proporciones correspondientes de los elementos.

Coloque el rectángulo de fondo y el presentador contenido de la fila y la columna 0 con tamaño de fila y columna lapso establecido en 3. Coloque el rectángulo vidrioso en la fila 1 columna 1 y ahora establecer los márgenes a 0 vidriosos y su altura y anchura para Auto con la alineación horizontal y vertical colocada a estirarse.

Asegúrese de que el elemento de contenido es una capa detrás del rectángulo vidrioso moviéndolo en la barra de herramientas Objetos y escala de tiempo. Esto es para que el botón conjunto se parecen ser vidrio, incluido el texto.Usted puede probar este es el caso, cambiando el primer plano del botón a una sombra que hará que esta a la vista.

Eso es todo. Ahora debe tener un botón escalable vidrio muy simple.

 

Licencia

Este artículo, junto con el código fuente y los archivos asociados, está licenciado bajo la Licencia Pública General GNU (GPLv3)