laboratorio upc wpf

7/26/2019 Laboratorio UPC WPF

http://slidepdf.com/reader/full/laboratorio-upc-wpf 1/30

Guía del alumno

Semana 6 22 de Setiembre al 24 de Setiembre

Curso : Fundamentos de Datos e Información

Logro de la sesión : Al finalizar las sesión, deberás crear de proyectos WPF en C# que

hagan uso de la clase List, como estructura de datos para almacenar

información

Para alcanzar el logro de la sesión te proponemos desarrollar las siguientes actividades:

Tarea a realizar Plazo

1

Autoestudio

Revisar el material sobre listas que se

encuentra en el Aula Virtual bajo el

mismo nombre.

Revisar el Video de Listas en C# que se

encuentra en el Aula Virtual.

Revisar el material sobre WPF que se

encuentra en el Aula Virtual bajo el

mismo nombre.

2 días.

2

Actividad de ejercitación

Realizar la actividad planteada para

esta sesión. Deberás descargar el

archivo con las indicaciones del

ejercicio a realizar 2 días



Guía para la Creación de un

Proyecto usando WPF

Creando la primera solución para Windows en Visual Studio .NET, C# usando Windows Presentation

Fundation (WPF).

1. Creamos un proyecto usando la opción Aplicación WPF, a la cual llamaremos AgendaWPF.

Visual Studio creara los siguientes archivos en el proyecto

App.xaml: Archivo de configuración de la aplicación.

MainWindow.xaml: Archivo de la primera ventana Winform en WPF.

WPF presenta una nueva forma en la que podemos crear interfaces de usuario para nuestras

aplicaciones gráficas.

En WPF se busca llevar a cabo una separación entre la forma en que luce la aplicación y la lógica

empleada para controlar dicha aplicación. Para lograrlo, se hace uso de XAML.

¿Qué es XAML?

XAML nos permite definir la interfaz de usuario.

XAML está basado en XML y es un lenguaje declarativo, tiene la extensión de nombre de

archivo .xaml. Con él podemos definir y especificar características para clases con una sintaxis

basada en XML. Este nos permite hacer cosas como declarar variables o definir propiedades de

objetos, utilizando una estructura de lenguaje que muestra las relaciones jerárquicas entre

varios objetos.



2. Ahora, creemos una nueva carpeta dentro del proyecto y la llamaremos Clases (Clic derecho en el

proyecto Add New Folder, para que tengamos la siguiente estructura:

3. Dentro de la carpeta Clases Insertaremos una nueva Clase que llamaremos Contacto. Esta Clase

implementa una estructura para un Contacto que requiere los siguientes datos como atributos:

Nombre

Apellido Paterno

Apellido Materno

Fecha de nacimiento

Dirección, Calle

Dirección, Número

Dirección, Código Postal

Dirección, Colonia

Dirección, Estado

Dirección, País

Teléfono

using System;

using System.Collections.Generic;using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace AgendaWPF.Clases{

public class Contacto

{private Guid _id;

public Guid Id

{

get { return _id; }

set { _id = value; }}

private string _nombre;

public string Nombre

{

get { return _nombre; }

set { _nombre = value; }

}

private string _apellidoPaterno;

public string ApellidoPaterno

{

get { return _apellidoPaterno; }

set { _apellidoPaterno = value; }

}

private string _apellidoMaterno;

public string ApellidoMaterno



{

get { return _apellidoMaterno; }

set { _apellidoMaterno = value; }

}

/// Como DateTime no puede ser NULL de manera natural

/// lo definimos NULLABLE con la instruccion DateTime?

private DateTime? _fechaNacimiento;

public DateTime? FechaNacimiento

{get { return _fechaNacimiento; }

set { _fechaNacimiento = value; }

}

private string _calle;

public string Calle

{get { return _calle; }

set { _calle = value; }

}

private string _numero;

public string Numero

{get { return _numero; }

set { _numero = value; }

}

private string _codigoPostal;

public string CodigoPostal

{

get { return _codigoPostal; }

set { _codigoPostal = value; }

}

private string _colonia;

public string Colonia{

get { return _colonia; }

set { _colonia = value; }

}

private string _estado;

public string Estado

{

get { return _estado; }

set { _estado = value; }

}

private string _pais;

public string Pais

{

get { return _pais; }set { _pais = value; }

}

private string _telefono;

public string Telefono

{

get { return _telefono; }set { _telefono = value; }

}

public Contacto(){

Id = Guid.Empty;

Nombre = "";

ApellidoPaterno = "";

ApellidoMaterno = "";



FechaNacimiento = null;

Calle = "";

Numero = "";

CodigoPostal = "";

Colonia = "";

Estado = "";

Pais = "";

Telefono = "";

}

public Contacto(string nombre,

string apellidoPaterno,

string apellidoMaterno,

DateTime? fechaNacimiento,

string calle,

string numero,

string codigoPostal,string colonia,

string estado,

string pais,

string telefono)

{

Id = Guid.NewGuid();

Nombre = nombre;ApellidoPaterno = apellidoPaterno;

ApellidoMaterno = apellidoMaterno;

FechaNacimiento = fechaNacimiento;Calle = calle;

Numero = numero;

CodigoPostal = codigoPostal;

Colonia = colonia;

Estado = estado;

Pais = pais;

Telefono = telefono;

}

}

}

4. Agreguemos una nueva Clase a la carpeta Clases que llamaremos Directorio.cs, clase que manejará

la lista de contactos. Seguiremos con el siguiente código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;


using System.IO;using System.Xml.Serialization;

namespace AgendaWPF.Clases

{

public class Directorio

{

private List<Contacto> _listaContactos = null;

public Directorio()

{

_listaContactos = new List<Contacto>();}

public Guid Agregar(Contacto contacto)

{

_listaContactos.Add(contacto);

return contacto.Id;

}



public Guid Agregar(string nombre, string apellidoPaterno,

string apellidoMaterno, DateTime? fechaNacimiento, string calle,

string numero, string codigoPostal, string colonia, string estado,

string pais, string telefono)

{

Contacto cont = new Contacto(nombre, apellidoPaterno,

apellidoMaterno, fechaNacimiento, calle, numero,

codigoPostal, colonia, estado,

pais, telefono);_listaContactos.Add(cont);

return cont.Id;

}

public Contacto Obtener(int pos)

{

return _listaContactos[pos];}

public Contacto Obtener(Guid id)

{

return _listaContactos.Where(

c =>

c.Id == id).FirstOrDefault();

}

public Contacto Obtener(string nombre)

{


c =>

c.Nombre == nombre

).FirstOrDefault();

}

public Contacto Obtener(string nombre, string apellidos)

{return _listaContactos.Where(

c =>

c.Nombre == nombre &&

c.ApellidoPaterno + " " + c.ApellidoMaterno == apellidos

).FirstOrDefault();

}

public Contacto Actualizar(Contacto contacto)

{

Contacto cont = _listaContactos.Where(

c =>

c.Id == contacto.Id

).FirstOrDefault();

if (cont != null && cont.Id != Guid.Empty)

{

cont = contacto;}

return cont;

}

public Contacto Actualizar(Guid id, string nombre, string apellidoPaterno,

string apellidoMaterno, DateTime? fechaNacimiento, string calle,

string numero, string codigoPostal, string colonia, string estado,string pais, string telefono)

{

Contacto cont = _listaContactos.Where(

c =>c.Id == id

).FirstOrDefault();

if (cont != null && cont.Id != Guid.Empty)

{

cont.Nombre = nombre;



cont.ApellidoPaterno = apellidoPaterno;

cont.ApellidoMaterno = apellidoMaterno;

cont.FechaNacimiento = fechaNacimiento;

cont.Calle = calle;

cont.Numero = numero;

cont.CodigoPostal = codigoPostal;

cont.Colonia = colonia;

cont.Estado = estado;

cont.Pais = pais;

cont.Telefono = telefono;}

return cont;

}

public bool Borrar(int pos)

{

if (pos < _listaContactos.Count){

_listaContactos.RemoveAt(pos);

return true;

}

return false;

}

public bool Borrar(Guid id)

{_listaContactos.Remove(_listaContactos.Where(

c =>

c.Id == id

).FirstOrDefault());

return true;

}

public bool Borrar(Contacto contacto)

{_listaContactos.Remove(_listaContactos.Where(

c =>

c.Id == contacto.Id

).FirstOrDefault());

return true;

}

public List<Contacto> Listar()

{

return _listaContactos;

}

List<Contacto> ListarXNombre(string nombre)

{

return _listaContactos.Where(c =>

c.Nombre == nombre

).ToList();}

List<Contacto> ListarXApellidoPaterno(string apellidoPaterno)

{return _listaContactos.Where(

c =>

c.ApellidoPaterno == apellidoPaterno

).ToList();}

List<Contacto> ListarXApellidoMaterno(string apellidoMaterno)

{




c =>

c.ApellidoMaterno == apellidoMaterno

).ToList();

}

List<Contacto> ListarXPais(string pais)

{


c =>

c.Pais == pais).ToList();

}

List<Contacto> ListarXColonia(string colonia)

{


c =>c.Colonia == colonia

).ToList();

}

public void CargarArchivo(string archivo)

{

if (File.Exists(archivo)){

using (var sr = new StreamReader(archivo))

{var l = new XmlSerializer(typeof(List<Contacto>));

_listaContactos = (List<Contacto>)l.Deserialize(sr);

}

}

}

public void GuardarArchivo(string archivo)

{

using (var sw = new StreamWriter(archivo)){

var g = new XmlSerializer(typeof(List<Contacto>));

g.Serialize(sw, _listaContactos);

}

}

public void Limpiar()

{

_listaContactos.Clear();

}

}

}

5. Agregamos 4 páginas de formularios

Agregar Página



PInicio.xaml

PAgregar.xaml

PModificar.xaml

PBorrar.xaml

6. Al archivo MainWindow.xaml le cambiamos el contenido:



Cambiamos su contenido tal y como se muestra

Y observamos que:

TAG Grid es suprimido. TAG Window es cambiado por NavigationWindow. Por tal, la ventana principal solo será un

contenedor de páginas.

La propiedad SourceInitialized le indica a la ventana cual será la Página de Inicio.

Las propiedades Loaded y Closing son propiedades de Eventos, cuando se carga y cuando se cierra la

forma respectivamente.

7. Vamos al código MainWindow.xaml.cs

Click derecho Ver Código

NavigationWindow

Representa una ventana que admite la navegación de contenido

(de páginas).



Se adicionará en el código:

Crear un objeto para poder instanciar la clase Directorio.

Al método del evento Loaded se debe instanciar un nuevo objeto de la clase Directorio y a usar el

método CargarArchivo() de la clase. Esto se hace una sola vez, puesto que el evento Loaded solo se

ejecuta al cargarse la ventana por primera vez. El hecho de Cargar el archivo es para asegurarnos deque los contactos añadidos o modificados persistan en la computadora. Los cambios que hagamos en

el Directorio solo se harán en memoria y se guardaran en disco al cerrar el sistema.

Y al método del evento Closing se usa el método GuardarArchivo() de la clase Directorio.

using System;


using System.Linq;

using System.Text;


using System.Windows;

using System.Windows.Controls;using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;using AgendaWPF.Clases;

namespace AgendaWPF{

/// <summary>

/// Lógica de interacción para MainWindow.xaml

/// </summary> public partial class MainWindow : NavigationWindow

{

public MainWindow()

{



InitializeComponent();

}

private Directorio _directorio;

public Directorio ListaContactos

{

get { return _directorio; }

set { _directorio = value; }

}

/* Evento para cuando se carga la Forma.

* En esta parte se instancia la clase directorio y se carga el archivo de datos.*/

private void NavigationWindow_Loaded(object sender, RoutedEventArgs e)

{

_directorio = new Directorio();

_directorio.CargarArchivo(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments) +

"\\DatosDirCont.xml");

}

/* Evento para cuando se cierra la forma y por tal el sistema entonces

* se procede a guardar en el archivo los cambios que hayamos hecho en el directorio

*/

private void NavigationWindow_Closing(object sender,

System.ComponentModel.CancelEventArgs e){

_directorio.GuardarArchivo(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments) +

"\\DatosDirCont.xml");

}

}

}

8. Crearemos una Carpeta Imagenes dentro del proyecto y adicionamos una imagen de fondo

Proyecto AgendaWPF Agregar Carpeta Imágenes

Y agregamos la imagen de fondo que hemos elegido en la ruta adecuada

Carpeta Imágenes Agregar Elemento Existente fondoAgenda.jpg



9. Para la página PInicio.xaml

Es la primera página que llamamos en la ventana MainWindow.xaml.

Extensiones de marcado

Las extensiones de marcado suelen comportarse como un tipo de "método abreviado" que permite

a un archivo XAML tener acceso a un valor.

En la sintaxis de los atributos XAML, las llaves "{" y "}" indican el uso de una extensión de marcado

XAML. El código dentro las llaves, proporciona un objeto o un resultado de comportamiento

alternativo que el analizador de XAML necesita. Las extensiones de marcado pueden tener

argumentos, que siguen el nombre de extensión de marcado y también se encierran entre llaves.

Normalmente, una extensión de marcado evaluada proporciona el valor devuelto de un objeto.

El lenguaje XAML de Windows admite por ejemplo la extensión de marcado llamada Binding. Binding

admite el enlace de datos, que aplaza el valor de una propiedad hasta que se interpreta en un

contexto de datos que solo existe en tiempo de ejecución.

http://msdn.microsoft.com/es-es/library/hh758283.aspx






Se modifica el código xaml, modificando el aspecto de la página

Eventos

XAML es un lenguaje declarativo para objetos y sus propiedades, pero también incluye una sintaxis

para adjuntar controladores de eventos a los objetos del marcado.

El nombre del evento se especifica como un nombre de atributo en el objeto donde se controla el

evento. Para el valor de atributo, debes especificar el nombre de una función de controlador de

eventos que definas en el código.

Por ejemplo la clase Button admite un evento denominado Click. Puedes escribir un controlador

para Click que ejecute un código que debe invocarse después de que el usuario haga clic en

el Button. En XAML, Click se especifica como un atributo en el Button. Para el valor del atributo,

proporciona una cadena que sea el nombre de método de tu controlador.

Es necesario programar el método denominado metodo_Click definido en el archivo de código

subyacente de la página XAML.

Los paneles

Los paneles son utilizados como herramienta principal para el diseño de la interfaz gráfica de una

aplicación. Por medio de ellos podemos colocar los diferentes controles en las posiciones en que

sean necesarios para la interfaces.

GridPanel

Es el panel más sencillo, conocido como Grid, que funciona como una matriz o malla en la que

tenemos celdas. Una vez definida la cantidad de renglones y columnas, procedemos a indicar el

contenido de cada celda y, de esta forma, ensamblamos la interfaz de usuario.

La propiedad Title se emplea para colocar el título de la ventana

La propiedad Height nos sirve para indicar cuál es la altura de la ventana y, Width se usa

para indicar el ancho de esta.

Debemos indicar cuántos renglones y columnas vamos a utilizar y con qué

características.

o Para definir los renglones, recurrimos a la propiedad RowDefinition. Si

deseamos tener tres renglones, definimos tres objetos de tipo RowDefinition.

o Para definir las columnas, son definidas por medio de la propiedad

ColumnDefinition

o La clase Border se usa para dibujar ya sea el fondo de un elemento o un marco

alrededor de él. La propiedad Background se usa para indicar el color del fondo.

o Se indica las coordenadas de la celda en cuestión, medidas a partir de la esquina

o TextBlock, coloca un texto en la interfaz. Con la propiedad Text, ponemos el

texto correspondiente.

Las celdas empiezan a contarse a partir del cero; por ejemplo, la celda superior izquierda se

encuentra en Row 0 con Column 0.



<Grid.RowDefinitions>

<RowDefinition Height="57" />

<RowDefinition Height="220*" />

<RowDefinition Height="160*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="302*" />

<ColumnDefinition Width="89" />

</Grid.ColumnDefinitions>

<Grid.Background>

<ImageBrush Opacity=".20" ImageSource="Imagenes/fondoAgenda.jpg">

</ImageBrush>

</Grid.Background>

<DataGrid AutoGenerateColumns="False" Name="gridDatos" Grid.RowSpan="3" Margin="5,5,5,12" IsReadOnly="True"

GridLinesVisibility="Vertical" AlternatingRowBackground="#FFDEDBDB">

<DataGrid.Columns>

<DataGridTextColumn Header="ID" IsReadOnly="False" Visibility="Hidden"

Binding="{Binding Path=Id}" />

<DataGridTextColumn Header="Nombre" IsReadOnly="True"

Binding="{Binding Path=Nombre}" /> <DataGridTextColumn Header="Apellido Paterno"

Binding="{Binding Path=ApellidoPaterno}" />

<DataGridTextColumn Header="Apellido Materno" Binding="{Binding Path=ApellidoMaterno}" />

<DataGridTextColumn Header="Fecha Nacimiento"

Binding="{Binding Path=FechaNacimiento,

StringFormat='{}{0:dd/MM/yyyy}'}" />

<DataGridTextColumn Header="Calle" Binding="{Binding Path=Calle}"/>

<DataGridTextColumn Header="Número" Binding="{Binding Path=Numero}"/>

<DataGridTextColumn Header="Código Postal"

Binding="{Binding Path=CodigoPostal}" />

<DataGridTextColumn Header="Colonia" Binding="{Binding Path=Colonia}"/>

<DataGridTextColumn Header="Estado" Binding="{Binding Path=Estado}"/> <DataGridTextColumn Header="País" Binding="{Binding Path=Pais}"/>

<DataGridTextColumn Header="Teléfonos" Binding="{Binding Path=Telefono}" />

</DataGrid.Columns>

</DataGrid>

<Button Content="Agregar" Grid.Column="1" Height="23"

HorizontalAlignment="Stretch" Name="btnAgregar"

VerticalAlignment="Top" Grid.Row="1" Margin="5,5,5,0"

Click="btnAgregar_Click" />

<Button Content="Modificar" Height="23"

HorizontalAlignment="Stretch" Margin="5,34,5,0" Name="btnModificar"

VerticalAlignment="Top" Grid.Column="1" Grid.Row="1"

ToolTip="Modifica el registro seleccionado" Click="btnModificar_Click" />

<Button Content="Borrar" Height="23"

HorizontalAlignment="Stretch" Margin="5,63,5,0" Name="btnBorrar"

ToolTip="Borra el registro seleccionado" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1"

Click="btnBorrar_Click" />

<Button Content="Limpiar" Height="23" HorizontalAlignment="Stretch" Margin="5,92,5,0" Name="btnLimpiar"

VerticalAlignment="Top" Grid.Column="1" Grid.Row="2"

Click="btnLimpiar_Click" />

</Grid>

</Page>

Se dará la funcionalidad editando el código en PInicio.xaml.cs

El método Page_Loaded mandamos a llamar al procedimiento que llena el grid de datos LlenaGrid().



Cada botón de la Página tiene su respectivo método CLIC que definen su comportamiento. Los botones

Agregar, Modificar y Borrar mandan a llamar a otras Páginas que realizan sus respectivas tareas. El

botón Limpiar ejecuta su tarea en el mismo método del evento y actualiza el grid de datos.

using System;


using System.Linq;using System.Text;



using System.Windows.Controls;

using System.Windows.Data;



using System.Windows.Media;using System.Windows.Media.Imaging;


using System.Windows.Shapes;

using AgendaWPF.Clases;

namespace AgendaWPF

{

/// <summary>

/// Lógica de interacción para PInicio.xaml

/// </summary> public partial class PInicio : Page

{

public PInicio()

{


}


public Directorio ListaContactos{



}

/// Metodo para el evento Loaded y en el cual inicializaremos la ventana

private void Page_Loaded(object sender, RoutedEventArgs e)

{LlenaGrid();

}

/// Metodo para llenar el grid de datos.

private void LlenaGrid(){

// Usamos la propiedad publica ListaContactos de la ventana principal

// MainWindow para obtener el directorio

_directorio = ((MainWindow)this.Parent).ListaContactos;

// Le indicamos que gridDatos no autogenera columnas

gridDatos.AutoGenerateColumns = false;

// Le indicamos que gridDatos obtendra sus datos.

// Usamos el metodo Listar de la clase Directorio

// para obtener la lista de contactos y se la pasamos al grid de datos.

gridDatos.ItemsSource = _directorio.Listar();

}

/// Metodo para el evento CLIC del boton Agregar

private void btnAgregar_Click(object sender, RoutedEventArgs e)

{

// Creamos una instancia de la Pagina PAgregar

PAgregar p = new PAgregar();



// Le pasamos la lista de contactos.

p.ListaContactos = _directorio;

// Le indicamos al navegador que vaya a esta nueva pagina,

// en cual tenemos controles para agregar un nuevo contacto.

this.NavigationService.Navigate(p);

}

/// Metodo para el evento Clic del boton Modificar.

private void btnModificar_Click(object sender, RoutedEventArgs e){

// Creamos una instancia de la Pagina PModificar que usaremos

// para modificar el Contacto.

PModificar p = new PModificar();

// Aseguramos que hayamos seleccionado un Contacto del grid de datos.

if (gridDatos.SelectedIndex < 0)MessageBox.Show("Seleccione un registro para editar", this.Title,

MessageBoxButton.OK, MessageBoxImage.Information);

else

{

// Obtenemos el contacto seleccionado del grid de datos.

// Observe como realizamos el CAST de SelectedItem a la Clase Contacto.

// Y se la pasamos a la Propiedad ContactoSel de la Pagina PModificar. p.ContactoSel = (Contacto)gridDatos.SelectedItem;

// Le pasamos la lista de contactos.

p.ListaContactos = _directorio;// Le indicamos al navegador que vaya a esta nueva pagina,

// en cual tenemos controles para modificar el contacto.


}

}

/// Metodo para el evento CLIC del boton Borrar

private void btnBorrar_Click(object sender, RoutedEventArgs e)

{

// Creamos una instancia de la Pagina PBorrar. PBorrar p = new PBorrar();

// Nos aseguramos que este seleccionado el registro que queremos borrar.

if (gridDatos.SelectedIndex < 0)

MessageBox.Show("Seleccione un registro para borrar", this.Title,


else

{

// Obtenemos el Contacto seleccionado en el grid de datos.

p.ContactoSel = (Contacto)gridDatos.SelectedItem;

// Pasemos la lista de contactos a la Pagina PBorrar

p.ListaContactos = _directorio;

// Le indicamos al navegador que vaya a esta nueva pagina,

// en cual tenemos controles para modificar el contacto.


}}

/// Metodo para el evento CLIC del boton Limpiar private void btnLimpiar_Click(object sender, RoutedEventArgs e)

{

// Preguntamos al Usuario si desea limpiar el directorio

if (MessageBox.Show("Limpiar la Lista?", this.Title, MessageBoxButton.YesNo,MessageBoxImage.Question, MessageBoxResult.No) == MessageBoxResult.Yes)

{

// Usamos el metodo Limpiar() de la clase Directorio para borrar todos los

contactos. _directorio.Limpiar();

// Actualizamos los datos del grid de datos.

CollectionViewSource.GetDefaultView(gridDatos.ItemsSource).Refresh();

}

}



}

}

10. Para la página PAgregar.xaml

Modifica el aspecto de la página de captura. Se observa como el TAG Grid es el que se encarga de ordenar de

manera adecuada los controles.

Se modifica el código PAgregar.xaml

En esta página se encuentran varios controles de tipo Label y TextBox que servirán para capturar cada

uno de los campos requeridos para la clase Contacto.

El Botón Aceptar realiza el guardado del Contacto al Directorio.

<Page x:Class="AgendaWPF.PAgregar" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d" d:DesignHeight="464" d:DesignWidth="498"

Title="Lista Contactos - Agregar" Loaded="Page_Loaded"> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

<Grid>

<Grid.ColumnDefinitions> <ColumnDefinition Width="30" />


<ColumnDefinition Width="Auto" />



<ColumnDefinition Width="*" />



<RowDefinition Height="54" /> <RowDefinition Height="10" />

<RowDefinition Height="Auto" />











<RowDefinition Height="10" /> <RowDefinition Height="Auto" />

<RowDefinition Height="*" />


<Grid.Background> <ImageBrush Opacity=".20" ImageSource="Imagenes/fondoAgenda.jpg">

</ImageBrush>

</Grid.Background> <Label Content="Lista de Contactos. Agregar" Name="lblTitulo"

Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"

HorizontalAlignment="Stretch" VerticalAlignment="Bottom"

FontWeight="Bold" FontSize="24" /> <Label Content="Nombre:" Name="lblNombre"

Grid.Column="2" Grid.Row="2"

HorizontalAlignment="Left" VerticalAlignment="Center" /> <TextBox Name="txtbNombre" Height="23" Margin="3,0,3,0"


HorizontalAlignment="Stretch" VerticalAlignment="Center" />

<Label Content="Apellido Paterno:" Name="lblApellidoPaterno"




HorizontalAlignment="Left" VerticalAlignment="Center" />

<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0"



<Label Content="Apellido Materno:" Name="lblApellidoMaterno"


VerticalAlignment="Center" />

<TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0"

Grid.Column="3" Grid.Row="4" HorizontalAlignment="Stretch" VerticalAlignment="Center" />

<Label Content="Fecha Nacimiento:" Name="lblFechaNacimiento"



<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0"


HorizontalAlignment="Left" VerticalAlignment="Center" /> <Label Content="Calle:" Name="lblCalle"

Grid.Column="2" Grid.Row="6" VerticalAlignment="Center"/>

<TextBox Name="txtbCalle" Margin="3,0,3,0"



<Label Content="Número:" Name="lblNumero"

Grid.Column="2" Grid.Row="7" VerticalAlignment="Center" />

<TextBox Name="txtbNumero" Margin="3,0,3,0"

Grid.Column="3" Grid.Row="7" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>

<Label Content="Código Postal:" Name="lblCodigoPostal"


<TextBox Name="txtbCodigoPostal" Margin="3,0,3,0"



<Label Content="Colonia:" Name="lblColonia"


<TextBox Name="txtbColonia" Margin="3,0,3,0"


<Label Content="Estado:" Name="lblEstado"


<TextBox Name="txtbEstado" Margin="3,0,3,0"



<Label Content="País:" Name="lblPais"


<TextBox Name="txtbPais" Margin="3,0,3,0"



<Label Content="Teléfonos:" Name="lblTelefonos"



<TextBox Name="txtbTelefonos" Margin="3,0,3,0"


<Button Content="Agregar" Name="btnAgregar"

Grid.Column="3" Grid.Row="14" HorizontalAlignment="Right" VerticalAlignment="Center"

Width="100" Click="btnAgregar_Click" />

</Grid>

</ScrollViewer>

</Page>

Se modifica el código PAgregar.xaml.cs, con la funcionalidad de la página.

El método del evento Clic del botón Agregar btnAgregar_Click() es donde se realiza la tarea de agregar

el Contacto capturado por el usuario. Lo primero es crear un nuevo objeto de tipo Contacto que servirá



para colocar los datos que captura el usuario. Después es agregarla a la lista de Contactos usando el

método Agregar() de la clase Directorio.

using System;


using System.Linq;

using System.Text;



using System.Windows.Controls;using System.Windows.Data;








namespace AgendaWPF

{

/// <summary>

/// Lógica de interacción para PAgregar.xaml

/// </summary>

public partial class PAgregar : Page

{

public PAgregar(){


}



{get { return _directorio; }


}

/// Constructor

private void Page_Loaded(object sender, RoutedEventArgs e)

{

try

{

// Mandamos a llamar el metodo que limpia los controles de edicion. LimpiaControles();

// Nos posicionamos en el primero control de edicion, el del Nombre del

Contacto

txtbNombre.Focus();

}

catch (Exception ex){

MessageBox.Show(ex.ToString(), "Error: " + this.Title, MessageBoxButton.OK,

MessageBoxImage.Error);

}

}

/// Metodo que Limpia los controles de edicion.

private void LimpiaControles()

{

try

{

// Usamos el metodo Clear() de los Controles para quitarle todo el texto.

txtbNombre.Clear();txtbApellidoPaterno.Clear();

txtbApellidoMaterno.Clear();

txtbFechaNacimiento.Text = "";

txtbCalle.Clear();

txtbNumero.Clear();



txtbCodigoPostal.Clear();

txtbColonia.Clear();

txtbEstado.Clear();

txtbPais.Clear();

txtbTelefonos.Clear();

}

catch (Exception ex)

{


MessageBoxImage.Error);}

}

/// Metodo para el evento CLIC del boton Agregar

private void btnAgregar_Click(object sender, RoutedEventArgs e)

{

try {

// Creamos un objeto para instanciar la clase Contacto

Contacto c = new Contacto();

// Usamos NewGuid() para crear una nuevo ID unico para el contacto.

c.Id = Guid.NewGuid();

// Ponemos todos los datos que capturo el usuario en el objeto de tipoContacto.

c.Nombre = txtbNombre.Text.Trim();

c.ApellidoPaterno = txtbApellidoPaterno.Text.Trim();c.ApellidoMaterno = txtbApellidoMaterno.Text.Trim();

c.FechaNacimiento = txtbFechaNacimiento.SelectedDate;

c.Calle = txtbCalle.Text.Trim();

c.Numero = txtbNumero.Text.Trim();

c.CodigoPostal = txtbCodigoPostal.Text.Trim();

c.Colonia = txtbColonia.Text.Trim();

c.Estado = txtbEstado.Text.Trim();

c.Pais = txtbPais.Text.Trim();

c.Telefono = txtbTelefonos.Text.Trim();

// Agregamos el objeto Contacto al directorio de Contactos.

_directorio.Agregar(c);

// Le mandamos un mensaje de Aceptacion al usuario

MessageBox.Show((Window)this.Parent, "Contacto Agregado", this.Title,


// Regresamos a la ventana anterior, que es PInicio.xaml

this.NavigationService.GoBack();

}


{



}

}

}

}

11. Para la página PModificar.xaml

El cual muestra el Contacto seleccionado y le permite al usuario cambiar ciertos datos. Es la página para

modificar un Contacto es muy similar a PAgregar.xaml

Se modifica el código PModificar.xaml, da el aspecto a la Página.

<Page x:Class="AgendaWPF.PModificar"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"





mc:Ignorable="d"

d:DesignHeight="464" d:DesignWidth="498"

Title="Lista Contactos - Agregar" Loaded="Page_Loaded">

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

<Grid>



<ColumnDefinition Width="5" /> <ColumnDefinition Width="Auto" />






<RowDefinition Height="54" /> <RowDefinition Height="10" />






<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />






<RowDefinition Height="*" />


<Grid.Background>

<ImageBrush Opacity=".20" ImageSource="Imagenes/fondoAgenda.jpg">

</ImageBrush>

</Grid.Background> <Label Content="Lista de Contactos. Modificar" Name="lblTitulo"

Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"

HorizontalAlignment="Stretch" VerticalAlignment="Bottom"

FontWeight="Bold" FontSize="24" />

<Label Content="Nombre:" Name="lblNombre"



<TextBox Name="txtbNombre" Margin="3,0,3,0"

Grid.Column="3" Grid.Row="2" Height="23"


<Label Content="Apellido Paterno:" Name="lblApellidoPaterno"



<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0"


HorizontalAlignment="Stretch" VerticalAlignment="Center" /> <Label Content="Apellido Materno:" Name="lblApellidoMaterno"


VerticalAlignment="Center" /> <TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0"



<Label Content="Fecha Nacimiento:" Name="lblFechaNacimiento" Grid.Column="2" Grid.Row="5"

HorizontalAlignment="Left" VerticalAlignment="Center"/>

<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0"

Grid.Column="3" Grid.Row="5" HorizontalAlignment="Left" VerticalAlignment="Center" />

<Label Content="Calle:" Name="lblCalle"


VerticalAlignment="Center"/>

<TextBox Name="txtbCalle" Margin="3,0,3,0"








<TextBox Name="txtbNumero" Margin="3,0,3,0"





<TextBox Name="txtbCodigoPostal" Margin="3,0,3,0"


HorizontalAlignment="Stretch" VerticalAlignment="Center"/>

<Label Content="Colonia:" Name="lblColonia"


VerticalAlignment="Center" /> <TextBox Name="txtbColonia" Margin="3,0,3,0"






<TextBox Name="txtbEstado" Margin="3,0,3,0" Grid.Column="3" Grid.Row="10"


<Label Content="País:" Name="lblPais" Grid.Column="2" Grid.Row="11" VerticalAlignment="Center" />

<TextBox Name="txtbPais" Margin="3,0,3,0"





<TextBox Name="txtbTelefonos" Margin="3,0,3,0"



<Button Content="Modificar" Name="btnModificar" Grid.Column="3" Grid.Row="14"

HorizontalAlignment="Right" VerticalAlignment="Center"

Width="100" Click="btnModificar_Click" />

</Grid>

</ScrollViewer>

</Page>

Se modifica el código PModificar.xaml.cs, con la funcionalidad de la Página de Modificación. El cual muestra

el Contacto seleccionado y le permite al usuario cambiar ciertos datos.

using System;using System.Collections.Generic;

using System.Linq;

using System.Text;



using System.Windows.Controls;





using System.Windows.Media.Imaging;using System.Windows.Navigation;



namespace AgendaWPF

{

/// <summary>



/// Lógica de interacción para PModificar.xaml

/// </summary>

public partial class PModificar : Page

{

public PModificar()

{


}

private Directorio _directorio;public Directorio ListaContactos

{



}

/// Obtiene y establece el Contacto que esta seleccionado en PInicio.xaml y que va aser editado.

private Contacto _contacto;

public Contacto ContactoSel

{

get { return _contacto; }

set { _contacto = value; }

}

/// Metodo para el evento Loaded en el cual llenaremos los controles de edicion con

/// los datos del Contacto seleccionado. private void Page_Loaded(object sender, RoutedEventArgs e)

{

try

{

// Nos aseguramos que el Contacto en edicion contenga datos

// para editar. Verificamos que no sea NULL (no exista) y el ID del

// contacto sea diferente de Vacio.

if (_contacto != null && _contacto.Id != Guid.Empty)

{

// Como el Contacto es valido. Limpiamos los controles de edicion. LimpiaControles();

// Llenamos cada uno de los controles con la informacion correspondiente

// del contacto en Edicion

txtbNombre.Text = _contacto.Nombre;

txtbApellidoPaterno.Text = _contacto.ApellidoPaterno;

txtbApellidoMaterno.Text = _contacto.ApellidoMaterno;

if (_contacto.FechaNacimiento != null)

{

txtbFechaNacimiento.Text =

((DateTime)_contacto.FechaNacimiento).ToString();

}

txtbCalle.Text = _contacto.Calle;

txtbNumero.Text = _contacto.Numero;

txtbCodigoPostal.Text = _contacto.CodigoPostal;

txtbColonia.Text = _contacto.Colonia;txtbEstado.Text = _contacto.Estado;

txtbPais.Text = _contacto.Pais;

txtbTelefonos.Text = _contacto.Telefono;

txtbNombre.Focus();

}

else {

MessageBox.Show((Window)this.Parent, "Error: Contacto Vacio", this.Title,

MessageBoxButton.OK, MessageBoxImage.Error);

this.NavigationService.GoBack();}

}


{





}

}

/// Metodo que limpia los controles de edicion.


{

try

{txtbNombre.Clear();

txtbApellidoPaterno.Clear();



txtbCalle.Clear();

txtbNumero.Clear();

txtbCodigoPostal.Clear();txtbEstado.Clear();

txtbPais.Clear();


}


{

MessageBox.Show(ex.ToString(), "Error: " + this.Title, MessageBoxButton.OK,MessageBoxImage.Error);

}

}

/// Metodo del evento CLIC del boton Modifiar.

private void btnModificar_Click(object sender, RoutedEventArgs e)

{

try

{

// Pasamos los datos de los controles de edicion al Contacto en edicion

_contacto.Nombre = txtbNombre.Text.Trim();

_contacto.ApellidoPaterno = txtbApellidoPaterno.Text.Trim();

_contacto.ApellidoMaterno = txtbApellidoMaterno.Text.Trim();_contacto.FechaNacimiento = txtbFechaNacimiento.SelectedDate;

_contacto.Calle = txtbCalle.Text.Trim();

_contacto.Numero = txtbNumero.Text.Trim();

_contacto.CodigoPostal = txtbCodigoPostal.Text.Trim();

_contacto.Colonia = txtbColonia.Text.Trim();

_contacto.Estado = txtbEstado.Text.Trim();

_contacto.Pais = txtbPais.Text.Trim();

_contacto.Telefono = txtbTelefonos.Text.Trim();

// Usamoe el metodo Actualizar() de la clase Directorio para guardar

// los cambios del Contacto en edicion

_directorio.Actualizar(_contacto);

// Avisamos al usuario

MessageBox.Show((Window)this.Parent, "Contacto Actualizado", this.Title,


// Regresamos una pagina y es PInicio.xaml this.NavigationService.GoBack();

}

catch (Exception ex){



}}

}

}

12. Para la página PBorrar.xaml



Es la página para borrar, muy similar a los anteriores, solo que tiene los controles de edición como Solo Lectura,

puesto que solo le mostraran al Usuario que Contacto desea borrar.

Esta página primero muestra los datos del Contacto a borrar al Usuario. El botón Borrar es el que procede a

borrar el Contacto y usa el método Borrar() de la clase Directorio.

Se modifica el código PBorrar.xaml

<Page x:Class="AgendaWPF.PBorrar"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"



mc:Ignorable="d"

d:DesignHeight="464" d:DesignWidth="498"

Title="Lista Contactos - Borrar" Loaded="Page_Loaded"> <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">

<Grid>




<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="300" /> <ColumnDefinition Width="30" />
















<RowDefinition Height="Auto" /> <RowDefinition Height="*" />


<Grid.Background> <ImageBrush Opacity=".20" ImageSource="Imagenes/fondoAgenda.jpg">

</ImageBrush>

</Grid.Background>

<Label Content="Lista de Contactos. Borrar" Name="lblTitulo"

Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"

FontWeight="Bold" FontSize="24" /> <Label Content="Nombre:" Name="lblNombre"



<TextBox Name="txtbNombre" Height="23" Margin="3,0,3,0" IsReadOnly="True"



<Label Content="Apellido Paterno:" Name="lblApellidoPaterno" Grid.Column="2" Grid.Row="3"


<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0" IsReadOnly="True"

Grid.Column="3" Grid.Row="3" HorizontalAlignment="Stretch"


<Label Content="Apellido Materno:" Name="lblApellidoMaterno"





<TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0" IsReadOnly="True"



<Label Content="Fecha Nacimiento:" Name="lblFechaNacimiento"


HorizontalAlignment="Left" VerticalAlignment="Center"/>

<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0" IsEnabled="False"



<Label Content="Calle:" Name="lblCalle" Grid.Column="2" Grid.Row="6" VerticalAlignment="Center"/>

<TextBox Name="txtbCalle" Margin="3,0,3,0" IsReadOnly="True"





<TextBox Name="txtbNumero" Margin="3,0,3,0" IsReadOnly="True" Grid.Column="3" Grid.Row="7"




<TextBox Name="txtbCodigoPostal" Margin="3,0,3,0" IsReadOnly="True"


HorizontalAlignment="Stretch" VerticalAlignment="Center" /> <Label Content="Colonia:" Name="lblColonia"


<TextBox Name="txtbColonia" Margin="3,0,3,0" IsReadOnly="True" Grid.Column="3" Grid.Row="9"




<TextBox Name="txtbEstado" Margin="3,0,3,0" IsReadOnly="True"



<Label Content="País:" Name="lblPais"


<TextBox Name="txtbPais" Margin="3,0,3,0" IsReadOnly="True" Grid.Column="3" Grid.Row="11"





<TextBox Name="txtbTelefonos" Margin="3,0,3,0" IsReadOnly="True"



<Button Content="Borrar" Name="btnBorrar"


HorizontalAlignment="Right" VerticalAlignment="Center"

Width="100" Click="btnBorrar_Click" />

</Grid>

</ScrollViewer>

</Page>

Se modifica el código PBorrar.xaml.cs, con funcionalidad a la página para borrar.

using System;using System.Collections.Generic;

using System.Linq;using System.Text;


using System.Windows;using System.Windows.Controls;











namespace AgendaWPF

{

/// <summary> /// Lógica de interacción para PBorrar.xaml

/// </summary>

public partial class PBorrar : Page

{

public PBorrar()

{

InitializeComponent();}



{


set { _directorio = value; }}

/// Establece y obtiene el contacto en ser borrado y esta /// seleccionado en el grid de datos de PInicio.xaml

private Contacto _contacto;

public Contacto ContactoSel

{

get { return _contacto; }

set { _contacto = value; }

}

/// Metodo para el evento Loaded de la pagina

private void Page_Loaded(object sender, RoutedEventArgs e){

try

{

// Verificamos que el contacto que se le paso a esta pagina

// tiene algun dato para mostrar

if (_contacto != null && _contacto.Id != Guid.Empty)

{

// Limpiamos los controles de edicion

LimpiaControles();

// Mostramos los datos del Contacto en los controles de edicion.

txtbNombre.Text = _contacto.Nombre;

txtbApellidoPaterno.Text = _contacto.ApellidoPaterno;

txtbApellidoMaterno.Text = _contacto.ApellidoMaterno;

if (_contacto.FechaNacimiento != null)

{

txtbFechaNacimiento.Text =((DateTime)_contacto.FechaNacimiento).ToString();

}

txtbCalle.Text = _contacto.Calle;txtbNumero.Text = _contacto.Numero;

txtbCodigoPostal.Text = _contacto.CodigoPostal;

txtbColonia.Text = _contacto.Colonia;

txtbEstado.Text = _contacto.Estado;txtbPais.Text = _contacto.Pais;

txtbTelefonos.Text = _contacto.Telefono;

txtbNombre.Focus();}

else

{

MessageBox.Show((Window)this.Parent, "Error: Contacto Vacio", this.Title,

MessageBoxButton.OK, MessageBoxImage.Error);




}

}


{



}

}

/// Metodo que limpia los controles de edicion


{

try

{

txtbNombre.Clear();txtbApellidoPaterno.Clear();



txtbCalle.Clear();

txtbNumero.Clear();

txtbCodigoPostal.Clear();

txtbEstado.Clear();txtbPais.Clear();


}catch (Exception ex)

{



}

}

/// Metodo del evento CLIC del boton Borrar

private void btnBorrar_Click(object sender, RoutedEventArgs e)

{// Usamos el metodo Borrar() de la clase Directorio para borrar el Contacto.

_directorio.Borrar(_contacto);

// Avisamos al usuario

MessageBox.Show((Window)this.Parent, "Contacto Borrado", this.Title,


// Regresamos una pagina en el navegador, y esta es PInicio.xaml


}

}

}