Como Crear Un Boton Visual

Tutorial: Crear un botón mediante el uso de XAML

.NET Framework 4

Otras versiones

• .NET Framework 4.5

• .NET Framework 3.5

Personas que lo han encontrado útil: 1 de 1 - Valorar este tema

El objetivo de este tutorial es aprender a crear un botón animado para usarlo en una aplicación Windows Presentation Foundation (WPF). Este tutorial utiliza estilos y una plantilla para crear un recurso de botón personalizado que permite la reutilización de código y la separación de la lógica del botón de la declaración del botón. Este tutorial está escrito completamente en Extensible Application Markup Language (XAML).

Importante

Este tutorial sirve como guía en los pasos necesarios para crear la aplicación escribiendo, o copiando y pegando Extensible Application Markup Language (XAML) en Microsoft Visual Studio. Si prefiere aprender a usar una herramienta de diseño (Microsoft Expression Blend) para crear la misma aplicación, vea Tutorial: Crear un botón mediante Microsoft Expression Blend.

La figura siguiente muestra los botones acabados.

Crear botones básicos

________________________________________

Empecemos por crear un nuevo proyecto y agregar unos botones a la ventana.

Para crear un nuevo proyecto de WPF y agregar botones a la ventana

1. Inicie Visual Studio.

2. Cree un nuevo proyecto de WPF: En el menú Archivo, señale a Nuevo y, a continuación, haga clic en Proyecto. Busque la plantilla Aplicación para Windows (WPF) y asigne al proyecto el nombre "AnimatedButton". Esto creará el esqueleto para la aplicación.

3. Agregue los botones predeterminados básicos: la plantilla proporciona todos los archivos que necesita para este tutorial. Abra el archivo Window1.xaml haciendo doble clic en él en el Explorador de soluciones. De forma predeterminada, hay un elemento Grid en Window1.xaml. Quite el elemento Grid y agregue unos botones a la página Extensible Application Markup Language (XAML) escribiendo o copiando y pegando el siguiente código resaltado en Window1.xaml:

Copiar

<Window x:Class="AnimatedButton.Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="AnimatedButton" Height="300" Width="300"

Background="Black">

<!-- Buttons arranged vertically inside a StackPanel. -->

<StackPanel HorizontalAlignment="Left">

<Button>Button 1</Button>

<Button>Button 2</Button>

<Button>Button 3</Button>

</StackPanel>

</Window>

Presione F5 para ejecutar la aplicación; debería ver un conjunto de botones parecido a la ilustración siguiente.

Ahora que ha creado los botones básicos, ha terminado de trabajar en el archivo Window1.xaml. El resto del tutorial se centra en el archivo app.xaml, definiendo estilos y una plantilla para los botones.

Establecer propiedades básicas

________________________________________

A continuación, establezcamos algunas propiedades de estos botones para controlar su aspecto y su diseño. En lugar de establecer individualmente las propiedades de los botones, utilizará recursos para definir las propiedades de botón de toda la aplicación. Los recursos de aplicación son conceptualmente similares a Cascading Style Sheets (CSS) externas para páginas web; sin embargo, los recursos son mucho más eficaces que Cascading Style Sheets (CSS), como verá al final de este tutorial. Para obtener más información sobre los recursos, vea Información general sobre recursos.

Para utilizar estilos para establecer propiedades básicas en los botones

1. Defina un bloque Application.Resources: abra app.xaml y agregue el marcado resaltado siguiente si aún no está allí:

Copiar

<Application x:Class="AnimatedButton.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="Window1.xaml"

>

<Application.Resources>

<!-- Resources for the entire application can be

defined here. -->

</Application.Resources>

</Application>

El ámbito del recurso lo determina dónde se defina el recurso. Definir recursos en Application.Resoureses en el archivo app.xaml permite utilizar el recurso en cualquier parte de la aplicación. Para obtener más información sobre cómo definir el ámbito de los recursos, vea Información general sobre recursos.

2. Cree un estilo y defina los valores de las propiedades básicas con él: agregue el marcado siguiente al bloque Application.Resources. Este marcado crea un objeto Style que se aplica a todos los botones de la aplicación, estableciendo la propiedad Width de los botones en 90 y Margin en 10:

Copiar

<Application.Resources>

<Style TargetType="Button">

<Setter Property="Width" Value="90" />

<Setter Property="Margin" Value="10" />

</Style>

</Application.Resources>

La propiedad TargetType especifica que el estilo se aplica a todos los objetos de tipo Button. Cada Setter establece un valor de la propiedad diferente para el objeto Style. Por tanto, en este punto cada botón de la aplicación tiene un ancho de 90 y un margen de 10. Si presiona F5 para ejecutar la aplicación, verá la siguiente ventana.

Hay mucho más que puede hacer con estilos, incluidas diversas maneras de ajustar con precisión a qué objetos se destinan, especificar valores de propiedad complejos e incluso utilizar estilos como entrada para otros estilos. Para obtener más información, vea Aplicar estilos y plantillas.

3. Establezca un valor de propiedad de estilo en un recurso: los recursos permiten reutilizar fácilmente objetos y valores que se definen con frecuencia. Es especialmente útil definir valores complejos utilizando recursos, para hacer el código más modular. Agregue el marcado resaltado siguiente a app.xaml.

Copiar

<Application.Resources>

<LinearGradientBrush x:Key="GrayBlueGradientBrush"

StartPoint="0,0" EndPoint="1,1">

<GradientStop Color="DarkGray" Offset="0"

...