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" />

...