Cómo: Crear una aplicación de WPF en C#

  • Artículo

Actualización: noviembre 2007

El propósito de este tema es mostrar cómo crear una aplicación sencilla de Windows Presentation Foundation (WPF) y familiarizarse con el entorno de desarrollo integrado (IDE) de Visual C# Express. Al igual que las aplicaciones de formularios Windows Forms, las aplicaciones WPF se pueden diseñar arrastrando controles desde el Cuadro de herramientas hasta una superficie de diseño. Además de tener un diseñador, una ventana Propiedades y un Cuadro de herramientas, el IDE de proyectos WPF posee una ventana que contiene XAML. XAML es el acrónimo de Extensible Application Markup Language (Lenguaje de marcado de aplicaciones extensible), que se utiliza para crear una interfaz de usuario. La ilustración siguiente muestra la ubicación del editor de XAML.

Editor XAML

Este ejemplo muestra cómo crear su propia aplicación para dibujar imágenes.

En esta sección, aprenderá cómo:

  • Crear una aplicación de WPF.

  • Alternar entre la vista Código y la vista Diseñador.

  • Cambiar las propiedades de la ventana de WPF.

  • Usar el editor XAML.

  • Agregar un control System.Windows.Controls.InkCanvas.

  • Agregar un control System.Windows.Controls.Button.

  • Crear controladores de eventos para controles.

Para ver una demostración en vídeo, visite Video How to: Create a C# WPF Application.

Para crear una aplicación de WPF

  1. En el menú Archivo, haga clic en Nuevo proyecto.

    Aparecerá el cuadro de diálogo Nuevo proyecto. En este cuadro de diálogo se muestra la lista de los diferentes tipos de aplicación predeterminados que puede crear Visual C# Express.

  2. Haga clic en Aplicación WPF.

  3. Cambie el nombre de la aplicación a Panel de entrada manuscrita.

  4. Haga clic en Aceptar.

    Visual C# Express crea una nueva carpeta para el proyecto con el nombre del título del proyecto y, a continuación, muestra el nuevo formulario WPF titulado Window1 en la vista Diseñador. Puede cambiar en cualquier momento a la vista Código haciendo clic con el botón secundario del mouse en la superficie del diseñador o en la ventana de código y seleccionando Ver código. De manera predeterminada, el editor XAML aparece bajo el diseñador. Para ver el marcado XAML en modo de pantalla completa, haga clic con el botón secundario en la superficie del diseñador y haga clic en Ver XAML.

    La ventana de WPF que se ve en la vista Diseñador es una representación visual de la ventana que se abrirá al iniciar la aplicación. En la vista Diseñador, puede arrastrar diversos controles desde el Cuadro de herramientas hasta la ventana WPF. Después de haber colocado un control a la ventana de WPF, Visual C# crea automáticamente código que hará que el control se sitúe apropiadamente cuando se ejecute el programa.

  5. Si la ventana Propiedades no está visible, en el menú Ver haga clic en la VentanaPropiedades. Esta ventana muestra las propiedades de la ventana de WPF o el control seleccionado, y en ella se pueden cambiar los valores existentes.

  6. Cambie el tamaño de la ventana de WPF estableciendo la propiedad Height en 550 y la propiedad Width en 370 desde la ventana Propiedades.

  7. Cambie el título de la ventana de WPF a Panel de entrada manuscrita.

  8. Cambie la propiedad Background de la ventana de WPF al color marrón; para ello, haga clic en Brown en el cuadro desplegable y, a continuación, presione Entrar.

    Nota:

    Si lo prefiere, puede modificar directamente el marcado XAML agregando un atributo Background y estableciendo su valor en Background="Brown".

  9. Para abrir el Cuadro de herramientas, haga clic en el menú Vista y, a continuación, en el Cuadro de herramientas.

  10. Haga clic con el botón secundario en el Cuadro de herramientas y, después, haga clic en Elegir elementos.

    Se abrirá el cuadro de diálogo Elegir elementos del cuadro de herramientas.

  11. En la ficha Componentes WPF del cuadro de diálogo Elegir elementos del cuadro de herramientas, desplácese hacia abajo hasta InkCanvas y selecciónelo para activar la casilla.

  12. Haga clic en Aceptar para agregar el control InkCanvas al Cuadro de herramientas.

  13. Arrastre un control InkCanvas desde el Cuadro de herramientas a la ventana de WPF.

  14. Establezca las siguientes propiedades del control InkCanvas en la ventana Propiedades:

    Propiedad

    Valor

    Width

    Auto

    Height

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    Margin

    9, 9, 9, 68

  15. Cambie el color del control InkCanvas a amarillo estableciendo su propiedad Background en LightYellow.

    El color de fondo del control InkCanvas aparecerá como amarillo claro en tiempo de ejecución.

  16. Arrastre dos controles Button a la ventana de WPF debajo de InkCanvas. Coloque button1 a la izquierda y button2 a la derecha.

  17. Seleccione button1 y cambie el marcado XAML en la vista XAML como se muestra en el marcado siguiente. Este marcado establece el texto en Clear.

    <Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="button1" VerticalAlignment="Bottom"
    Width="75">Clear</Button>

  18. Seleccione button2 y cambie el marcado XAML como se muestra en el marcado siguiente. Este marcado establece el texto en Close.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="button2" VerticalAlignment="Bottom" Width="75"
    Click="ButtonCloseClicked">Close</Button>

    La aplicación de WPF debería parecerse a la aplicación de entrada manuscrita de la ilustración siguiente.

    Aplicación de entrada manuscrita de WPF

Para crear controladores de eventos

  1. Haga doble clic en Borrar y, a continuación, agregue el código siguiente al controlador de eventos Click generado:

        this.inkCanvas1.Strokes.Clear();

  2. Vuelva a la vista Diseñador; para ello, haga clic con el botón secundario en el editor de código y, a continuación, haga clic en Diseñador.

  3. Haga doble clic en Cerrar y, a continuación, agregue el código siguiente al controlador de eventos Click generado:

        this.Close();

  4. Presione F5 para ejecutar el proyecto.

  5. Cuando la aplicación se abra, dibuje una imagen en el control InkCanvas. Si comete un error, puede hacer clic en Borrar para volver a empezar.

  6. Haga clic en Cerrar para cerrar la aplicación.

Vea también

Tareas

Cómo: Crear un nuevo proyecto de aplicación de WPF

Cómo: Crear una aplicación de consola de C#

Cómo: Crear una aplicación de formularios Windows Forms en C#

Otros recursos

Crear la primera aplicación de Visual C#