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.

Nota

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.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010.

Creación del proyecto

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.

Crear el diseño

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.

Agregar controles al diseño

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.

Establecer las propiedades relacionadas con el diseño

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.

   

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.

   

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.

Crear un origen de datos

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.

   Imports System
   Imports System.IO
   Imports System.Linq
   Imports System.Collections.Generic
   Imports System.Collections.ObjectModel
   Imports System.Text
   
   Public Class Folder
       Private _folder As DirectoryInfo
       Private _subFolders As ObservableCollection(Of Folder)
       Private _files As ObservableCollection(Of FileInfo)
   
       Public Sub New() 
           Me.FullPath = "c:\"
   
       End Sub 'New
   
   
       Public ReadOnly Property Name() As String 
           Get
               Return Me._folder.Name
           End Get
       End Property
   
   
       Public Property FullPath() As String 
           Get
               Return Me._folder.FullName
           End Get
   
           Set
               If Directory.Exists(value) Then
                   Me._folder = New DirectoryInfo(value)
               Else
                   Throw New ArgumentException("must exist", "fullPath")
               End If
           End Set
       End Property
   
       ReadOnly Property Files() As ObservableCollection(Of FileInfo)
           Get
               If Me._files Is Nothing Then
                   Me._files = New ObservableCollection(Of FileInfo)
   
                   Dim fi As FileInfo() = Me._folder.GetFiles()
   
                   Dim i As Integer
                   For i = 0 To fi.Length - 1
                       Me._files.Add(fi(i))
                   Next i
               End If
   
               Return Me._files
           End Get
       End Property
   
       ReadOnly Property SubFolders() As ObservableCollection(Of Folder)
   
           Get
               If Me._subFolders Is Nothing Then
                   Try
   
                   Me._subFolders = New ObservableCollection(Of Folder)
   
                       Dim di As DirectoryInfo() = Me._folder.GetDirectories()
   
                       Dim i As Integer
                       For i = 0 To di.Length - 1
                           Dim newFolder As New Folder()
                           newFolder.FullPath = di(i).FullName
                           Me._subFolders.Add(newFolder)
                       Next i
                   Catch ex As Exception
   
                       System.Diagnostics.Trace.WriteLine(ex.Message)
   
                   End Try
               End If
   
               Return Me._subFolders
           End Get
       End Property
   End Class
   

   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;
               }
           }
       }
   }
   

Conectarse a un origen de datos

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>
   

Enlazar las propiedades de los controles

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.

Pasos siguientes

• 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.

Vea también

Tareas

Cómo: Usar los eventos asociados

Tutorial: Depurar controles personalizados de WPF en tiempo de diseño

Conceptos

Vista dividida: Ver la superficie de diseño de WPF y XAML al mismo tiempo

Navegar en la jerarquía de elementos de un documento de WPF

Otros recursos

Trabajar con controles en WPF Designer

Historial de cambios

Fecha	Historial	Motivo
Diciembre de 2010	Se ha agregado un vínculo a WPF Simple Application Walkthrough Hands on Lab.	Mejora de la información.