Para ver el artículo en inglés, active la casilla Inglés. También puede ver el texto en inglés en una ventana emergente si pasa el puntero del mouse por el texto.
Traducción
Inglés
Esta documentación está archivada y no tiene mantenimiento.

Tutorial: Generar una aplicación de WPF sencilla con WPF Designer

En este tutorial se muestra cómo generar una aplicación de Windows Presentation Foundation (WPF) sencilla con WPF Designer.

En este tutorial realizará las siguientes tareas:

  • Crear el proyecto.

  • Crear el diseño.

  • Agregar controles al diseño.

  • Establecer las propiedades relacionadas con el diseño.

  • Crear un origen de datos.

  • Conectar con un origen de datos.

  • Enlazar las propiedades de los controles.

Cuando haya finalizado, tendrá una aplicación que le permitirá examinar el sistema de archivos. La interfaz de usuario de la aplicación se implementará en lenguaje XAML. Para obtener más información, vea XAML en WPF. En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.

Vista de árbol y vistas de lista de FolderExplorer
NotaNota

Encontrará una versión de los laboratorios de prácticas de este tutorial que se ejecuta en Visual Studio 2010 en el sitio WPF Simple Application Walkthrough Hands on Lab.

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

El primer paso consiste en crear el proyecto para la aplicación.

Para crear el proyecto

  1. Cree un nuevo proyecto de aplicación de WPF en Visual Basic o en Visual C# denominado FolderExplorer. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

    MainWindow.xaml se abrirá en WPF Designer.

  2. En la Vista de diseño, seleccione la ventana. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.

  3. En la ventana Propiedades, establezca el valor de la propiedad Title en Folder Explorer.

El diseño define cómo se organizan los controles en la ventana principal de la aplicación. En los pasos siguientes se muestra cómo construir los elementos de diseño que contendrán los controles de la aplicación.

Para crear el diseño

  1. Seleccione el control Grid raíz en la ventana.

  2. Agregue una segunda fila a la cuadrícula. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

  3. Agregue una segunda columna a la cuadrícula.

Una vez definido el diseño, puede rellenarlo con controles.

Para agregar controles al diseño

  1. Desde el Cuadro de herramientas, arrastre un control TreeView a la primera celda de la cuadrícula.

  2. En el Cuadro de herramientas, arrastre un control ListView a la celda que ocupa la primera fila y segunda columna de la cuadrícula.

  3. En el Cuadro de herramientas, arrastre un control ListView a la celda que ocupa la segunda fila y segunda columna de la cuadrícula.

En los pasos siguientes se muestra cómo establecer las propiedades de los controles relacionadas con el diseño. Al establecer las propiedades de cada control, el diseño va pareciéndose cada vez más a la aplicación final.

Para establecer las propiedades relacionadas con el diseño

  1. Seleccione el control TreeView.

  2. En la ventana Propiedades, establezca las propiedades siguientes tal y como se indica.

    Propiedad

    Valor

    Grid.ColumnSpan

    1

    Grid.RowSpan

    2

    Height

    Auto

    HorizontalAlignment

    Stretch

    Margin

    0,0,0,0

    VerticalAlignment

    Stretch

    Width

    Auto

    El control TreeView cambia de tamaño para ajustarse a la primera columna de la cuadrícula y abarcar las dos filas de esta última.

  3. Seleccione los dos controles ListView.

  4. En la ventana Propiedades, establezca las propiedades siguientes tal y como se indica.

    Propiedad

    Valor

    Grid.ColumnSpan

    1

    Grid.RowSpan

    1

    Height

    Auto

    HorizontalAlignment

    Stretch

    Margin

    0,0,0,0

    VerticalAlignment

    Stretch

    Width

    Auto

    Los controles ListView cambian de tamaño para ajustarse a sus celdas respectivas de la cuadrícula.

    Diseño de la Vista de diseño
  5. Abra la ventana Esquema del documento. Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.

  6. Expanda el nodo ColumnDefinitions de la cuadrícula.

  7. Seleccione el primer elemento ColumnDefinition.

    Ventana Esquema del documento
  8. En la ventana Propiedades, establezca la propiedad Width en *.

  9. En la ventana Esquema del documento, seleccione el segundo elemento ColumnDefinition.

  10. En la ventana Propiedades, establezca la propiedad Width en 2*.

    Se ajustará el tamaño de las columnas de modo que la primera ocupe la tercera parte del ancho de la ventana y la segunda, dos tercios.

  11. En la ventana Esquema del documento, expanda el nodo RowDefinitions de la cuadrícula.

  12. Seleccione el primer elemento RowDefinition.

  13. En la ventana Propiedades, establezca la propiedad Height en *.

  14. En la ventana Esquema del documento, seleccione el segundo elemento RowDefinition.

  15. En la ventana Propiedades, establezca la propiedad Height en *.

    Se ajustará el tamaño de las filas de modo que ocupen la mitad del alto de la ventana.

  16. Compile y ejecute la solución.

  17. Cambie el tamaño de la ventana para ver el ajuste dinámico del tamaño de los controles TreeView y ListView.

El origen de datos para la aplicación FolderExplorer es una clase denominada Folder. Esta clase proporciona un modelo simple de sistema de archivos. Cada instancia de Folder tiene una colección SubFolders y una colección Files.

Para crear un origen de datos

  1. Agregue una nueva clase denominada Folder al proyecto FolderExplorer. Para obtener más información, vea Cómo: Agregar nuevos elementos de proyecto.

  2. Reemplace el contenido del archivo de código fuente Folder con el código siguiente.

    
    using System;
    using System.IO;
    using System.Linq;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Text;
    
    namespace FolderExplorer
    {
        public class Folder
        {
            private DirectoryInfo _folder;
            private ObservableCollection<Folder> _subFolders;
            private ObservableCollection<FileInfo> _files;
    
            public Folder()
            {
                this.FullPath = @"c:\";
            }
    
            public string Name
            {
                get
                {
                    return this._folder.Name;
                }
            }
    
            public string FullPath
            {
                get
                {
                    return this._folder.FullName;
                }
    
                set
                {
                    if (Directory.Exists(value))
                    {
                        this._folder = new DirectoryInfo(value);
                    }
                    else
                    {
                        throw new ArgumentException("must exist", "fullPath");
                    }
                }
            }
    
            public ObservableCollection<FileInfo> Files
            {
                get
                {
                    if (this._files == null)
                    {
                        this._files = new ObservableCollection<FileInfo>();
    
                        FileInfo[] fi = this._folder.GetFiles();
    
                        for (int i = 0; i < fi.Length; i++)
                        {
                            this._files.Add(fi[i]);
                        }
                    }
    
                    return this._files;
                }
            }
    
            public ObservableCollection<Folder> SubFolders
            {
                get
                {
                    if (this._subFolders == null)
                    {
                        this._subFolders = new ObservableCollection<Folder>();
    
                        DirectoryInfo[] di = this._folder.GetDirectories();
    
                        for (int i = 0; i < di.Length; i++)
                        {
                            Folder newFolder = new Folder();
                            newFolder.FullPath = di[i].FullName;
                            this._subFolders.Add(newFolder);
                        }
                    }
    
                    return this._subFolders;
                }
            }
        }
    }
    
    
    

Los controles de WPF se conectan a los orígenes de datos mediante enlaces de datos. En el procedimiento siguiente se muestra cómo declarar un objeto ObjectDataProvider y enlazarse a él.

Para conectarse a un origen de datos

  1. Abra MainWindow.xaml en WPF Designer. 

  2. En la vista XAML, inserte el XAML siguiente en la etiqueta <Window>, con las demás asignaciones de xmlns. Para obtener más información, vea Cómo: Importar un espacio de nombres a XAML.

    xmlns:my="clr-namespace:FolderExplorer"
    
  3. Inserte el XAML siguiente después de la etiqueta de apertura <Window> y antes de la etiqueta de apertura <Grid>.

    
    	<Window.Resources>
    
    		<ObjectDataProvider x:Key="RootFolderDataProvider" >
    			<ObjectDataProvider.ObjectInstance>
    				<my:Folder FullPath="c:\"/>
    			</ObjectDataProvider.ObjectInstance>
    		</ObjectDataProvider>
    
    		<HierarchicalDataTemplate 
    		    DataType    = "{x:Type my:Folder}"
                ItemsSource = "{Binding Path=SubFolders}">
    		    <TextBlock Text="{Binding Path=Name}" />
    		</HierarchicalDataTemplate>
    
    	</Window.Resources>
    
    
    
    
  4. Reemplace la etiqueta <TreeView> con el XAML siguiente.

    
    		<TreeView Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="0,0,0,0" Name="treeView1" >
    			<TreeViewItem ItemsSource="{Binding Path=SubFolders, Source={StaticResource RootFolderDataProvider}}" Header="Folders"  />
    		</TreeView>
    
    
    

Puede enlazar las propiedades de un control a otro, lo que permite actualizarlas de manera automática.

Para enlazar las propiedades de los controles

  1. En la vista XAML, reemplace las dos etiquetas <ListView> con el XAML siguiente.

    
    		<ListView Name="listView1" 
    		ItemsSource="{Binding Path=SelectedItem.SubFolders, ElementName=treeView1, Mode=OneWay}" 
    		Grid.Column="1" 
    		Grid.RowSpan="1" />
    		
    		<ListView Name="listView2" 
    		ItemsSource="{Binding Path=SelectedItem.Files, ElementName=treeView1, Mode=OneWay}" 
    		Grid.Column="1" 
    		Grid.Row="1" />
    
    
    
  2. Compile y ejecute la solución.

  3. Expanda el elemento Carpetas para ver las carpetas de la unidad C:.

  4. Experimente haciendo clic en las subcarpetas y observando el contenido de los dos controles ListView.

    Las subcarpetas se muestran en el control ListView superior y los archivos se muestran en el control ListView inferior.

  • Actualmente, la aplicación FolderExplorer se muestra con los estilos predeterminados. Puede aplicar sus propios estilos para cambiar el aspecto de la aplicación y su comportamiento.

  • Visual Studio también proporciona numerosas herramientas para depurar la aplicación de WPF. Para obtener más información, vea Tutorial: Depurar controles personalizados de WPF en tiempo de diseño.

date

Historial

Motivo

Diciembre de 2010

Se ha agregado un vínculo a WPF Simple Application Walkthrough Hands on Lab.

Mejora de la información.

Mostrar: