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

Artículo
10/07/2008

Actualización: noviembre 2007

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

Realizará las tareas siguientes:

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 XAML (Lenguaje de marcado de aplicaciones extensible). Para obtener más información, vea XAML. En la ilustración siguiente se muestra la apariencia que tendrá la aplicación.

Nota:
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, dependiendo de los valores de configuración o de edición activos. Para cambiar la configuración, elija Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

Visual Studio 2008.

Crear el proyecto

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

Para crear el proyecto

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.

Window1.xaml se abrirá en el WPF Designer.
En la vista Diseño, seleccione la ventana. Para obtener más información, vea Cómo: Seleccionar y mover elementos en la superficie de diseño.
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

Seleccione el control Grid raíz en la ventana.
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.
Agregue una segunda columna a la cuadrícula.

Agregar controles al diseño

Una vez definido el diseño, puede rellenarlo con controles. Basta con hacer clic en el control deseado en el Cuadro de herramientas y arrastrarlo hasta la superficie de diseño.

Para agregar controles al diseño

Desde el Cuadro de herramientas, arrastre un control TreeView a la primera celda de la cuadrícula. Cambie el tamaño del control si es preciso.
En el Cuadro de herramientas, arrastre un control ListView a la celda que ocupa la primera fila y segunda columna de la cuadrícula. Cambie el tamaño del control si es preciso.
En el Cuadro de herramientas, arrastre un control ListView a la celda que ocupa la segunda fila y segunda columna de la cuadrícula. Cambie el tamaño del control si es preciso.

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

Seleccione el control TreeView.
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.
Seleccione los dos controles ListView.
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.
En la ventana Esquema del documento, expanda el nodo ColumnDefinitions de la cuadrícula. Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.
Seleccione el primer elemento ColumnDefinition.
En la ventana Propiedades, establezca la propiedad Width en *.
En la ventana Esquema del documento, seleccione el segundo elemento ColumnDefinition.
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.
En la ventana Esquema del documento, expanda el nodo RowDefinitions de la cuadrícula.
Seleccione el primer elemento RowDefinition.
En la ventana Propiedades, establezca la propiedad Height en *.
En la ventana Esquema del documento, seleccione el segundo elemento RowDefinition.
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.
Genere y ejecute el proyecto.
Cambie el tamaño de la ventana para ver el ajuste dinámico del tamaño de los controles TreeView y ListView.

Propiedad	Valor
Grid.ColumnSpan	1
Grid.RowSpan	2
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

Propiedad	Valor
Grid.ColumnSpan	1
Grid.RowSpan	1
Height	Auto
HorizontalAlignment	Stretch
Margin	0,0,0,0
VerticalAlignment	Stretch
Width	Auto

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

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

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

Abra Window1.xaml en WPF Designer.
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"
```

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>

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

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>

     <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

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

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

Genere y ejecute el proyecto.
Expanda el elemento Folders para abrir la carpeta raíz. 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, 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

Compartir a través de