wpf cómo crear un botón de cristal escalable en blend
TRANSCRIPT
![Page 1: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/1.jpg)
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.
![Page 2: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/2.jpg)
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
![Page 3: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/3.jpg)
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.
![Page 4: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/4.jpg)
A continuación, seleccione "Herramientas" -> "Convertir en control" y seleccione el botón de control. Dar la plantilla de un nombre.
![Page 5: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/5.jpg)
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.
![Page 6: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/6.jpg)
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".
![Page 7: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/7.jpg)
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.
![Page 8: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/8.jpg)
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.
![Page 9: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/9.jpg)
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.
![Page 10: WPF Cómo crear un botón de cristal escalable en Blend](https://reader036.vdocuments.site/reader036/viewer/2022081508/5572142e497959fc0b93f33e/html5/thumbnails/10.jpg)
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)