Laboratorio UPC WPF

Gua del alumno
22 de Setiembre al 24 de Setiembre
Semana 6
Curso
Fundamentos de Datos e Informacin
Logro de la sesin
Al finalizar las sesin, debers crear de proyectos WPF en C# que

hagan uso de la clase List, como estructura de datos para almacenar
informacin
Para alcanzar el logro de la sesin te proponemos desarrollar las siguientes actividades:
Tarea a realizar
Plazo
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 das.
Actividad de ejercitacin
2
Realizar la actividad planteada para

esta sesin. Debers descargar el
archivo con las indicaciones del
ejercicio a realizar
2 das
Gua para la Creacin de un

Proyecto usando WPF
Creando la primera solucin para Windows en Visual Studio .NET, C# usando Windows Presentation
Fundation (WPF).
1. Creamos un proyecto usando la opcin Aplicacin WPF, a la cual llamaremos AgendaWPF.
Visual Studio creara los siguientes archivos en el proyecto
App.xaml: Archivo de configuracin de la aplicacin.

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 grficas.
En WPF se busca llevar a cabo una separacin entre la forma en que luce la aplicacin y la lgica
empleada para controlar dicha aplicacin. 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 extensin de nombre de
archivo .xaml. Con l podemos definir y especificar caractersticas 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 jerrquicas 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:
using
using
using
using
using
Nombre
Apellido Paterno
Apellido Materno
Fecha de nacimiento
Direccin, Calle
Direccin, Nmero
System;
System.Collections.Generic;
System.Linq;
System.Text;
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
Direccin, Cdigo Postal

Direccin, Colonia
Direccin, Estado
Direccin, Pas
Telfono
{
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 cdigo:
using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.IO;
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)
{
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)
{
c =>
c.Nombre == nombre
).ToList();
}
List<Contacto> ListarXApellidoPaterno(string apellidoPaterno)
{
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 pginas de formularios

Agregar Pgina
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
NavigationWindow
Representa una ventana que admite la navegacin de contenido
(de pginas).
Y observamos que:
TAG Grid es suprimido.
TAG Window es cambiado por NavigationWindow. Por tal, la ventana principal solo ser un
contenedor de pginas.
La propiedad SourceInitialized le indica a la ventana cual ser la Pgina de Inicio.
Las propiedades Loaded y Closing son propiedades de Eventos, cuando se carga y cuando se cierra la
forma respectivamente.
7. Vamos al cdigo MainWindow.xaml.cs
Click derecho Ver Cdigo
Se adicionar en el cdigo:
Crear un objeto para poder instanciar la clase Directorio.
Al mtodo del evento Loaded se debe instanciar un nuevo objeto de la clase Directorio y a usar el
mtodo 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 de
que los contactos aadidos o modificados persistan en la computadora. Los cambios que hagamos en
el Directorio solo se harn en memoria y se guardaran en disco al cerrar el sistema.
Y al mtodo del evento Closing se usa el mtodo GuardarArchivo() de la clase Directorio.
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Windows;
System.Windows.Controls;
System.Windows.Data;
System.Windows.Documents;
System.Windows.Input;
System.Windows.Media;
System.Windows.Media.Imaging;
System.Windows.Navigation;
System.Windows.Shapes;
AgendaWPF.Clases;
namespace AgendaWPF
{
/// <summary>
/// Lgica de interaccin 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 Imgenes
Y agregamos la imagen de fondo que hemos elegido en la ruta adecuada
Carpeta Imgenes Agregar Elemento Existente fondoAgenda.jpg
9. Para la pgina PInicio.xaml

Es la primera pgina que llamamos en la ventana MainWindow.xaml.
Extensiones de marcado
Las extensiones de marcado suelen comportarse como un tipo de "mtodo 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 extensin de marcado
XAML. El cdigo 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 extensin de marcado y tambin se encierran entre llaves.
Normalmente, una extensin de marcado evaluada proporciona el valor devuelto de un objeto.
El lenguaje XAML de Windows admite por ejemplo la extensin 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 ejecucin.
Eventos
XAML es un lenguaje declarativo para objetos y sus propiedades, pero tambin 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 funcin de controlador de
eventos que definas en el cdigo.
Por ejemplo la clase Button admite un evento denominado Click. Puedes escribir un controlador
para Click que ejecute un cdigo que debe invocarse despus 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 mtodo de tu controlador.
Es necesario programar el mtodo denominado metodo_Click definido en el archivo de cdigo
subyacente de la pgina XAML.
Los paneles
Los paneles son utilizados como herramienta principal para el diseo de la interfaz grfica de una
aplicacin. Por medio de ellos podemos colocar los diferentes controles en las posiciones en que
sean necesarios para la interfaces.
GridPanel
Es el panel ms 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 ttulo de la ventana

La propiedad Height nos sirve para indicar cul es la altura de la ventana y, Width se usa
para indicar el ancho de esta.
Debemos indicar cuntos renglones y columnas vamos a utilizar y con qu
caractersticas.
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 cuestin, 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.
Se modifica el cdigo xaml, modificando el aspecto de la pgina
Se define el Titulo de la pgina (Title) y el mtodo para el evento de carga (Loaded), as como la
indicacin que el tamao de la ventana solo es para tiempo de diseo: mc:Ignorable=d
d:DesignHeight=437 d:DesignWidth=406.
El Tag Grid sirve para que las ventanas de WPF acomoden sus controles de manera adecuada y
acomodar los botones y el grid de datos.
o Se define 3 filas invisibles en la ventana que nos ayudaran a alinear los controles de botones.
La primera fila (superior) es de 57 pixeles y no cambia, la segunda fila es como minimo de 220
pixeles y puede crecer, la tercera fila es de 160 pixeles y puede crecer.
o Se definen tambien 2 columnas de guia. La primera columna es de 302 pixeles y puede crecer.
La segunda columna es de 89 pixeles y no cambia.
o Se indica que el Grid ocupe toda la ventana y cargue la imagen de fondo y que esta en la
carpeta Imagenes, ademas de que le bajamos la intensidad para que no interfiera con la
informacin que mostramos (Opacity=.20).
Se define el grid de datos.
o Le indicamos que no autogenere las columnas (AutoGenerateColumns=False)
o El grid se llama gridDatos (Name=gridDatos)
o El grid de datos ocupa 3 filas de las guas (Grid.RowSpan=3)
o Las celdas guas tiene un margen (Margin=5,5,5,12), es de solo lectura (IsReadOnly=True)
o Solo se muestra las lineas de las columnas (GridLinesVisibility=Vertical)
o Se usa un diferente color en cada registro del grid de datos
(AlternatingRowBackground=#FFDEDBDB).
o Como al grid de datos no le indicamos en que fila y columna gua esta, entonces toma la
primera columna y el primer rengln.
o Como le indicamos al grid que no autogenere las columnas, tenemos que definirlas:
ID. Columna enlazada a la propiedad Id de la clase Contacto.
Nombre. Columna enlazada a la propiedad Nombre.
Apellido Paterno. Columna enlazada a la propiedad ApellidoPaterno.
Apellido Materno. Columna enlazada a la propiedad ApellidoMaterno.
Fecha Nacimiento. Columna enlazada a la propiedad FechaNacimiento.
Calle. Columna enlazada a la propiedad Calle.
Nmero. Columna enlazada a la propiedad Nmero.
Cdigo Postal. Columna enlazada a la propiedad CodigoPostal.
Colonia. Columna enlazada a la propiedad Colonia.
Estado. Columna enlazada a la propiedad Estado.
Pas. Columna enlazada a la propiedad Pais.
Telefonos. Columna enlazada a la propiedad Telefono.
o Para realizar el enlace de columnas ocupamos la propiedad Binding={Binding Path=Campo}.
o Se define los botones en la ventana
Se usa las propiedades Grid.Column y Grid.Row para indicarle en que celda gua
quedara el botn.
La propiedad HorizontalAlignment=Stretch le indica que ocupara todo el ancho de
la celda gua.
<Page x:Class="AgendaWPF.PInicio"
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"
Title="Contactos - Inicio" Loaded="Page_Loaded"
d:DesignHeight="437" d:DesignWidth="406" >
<Grid>
<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="Nmero" Binding="{Binding Path=Numero}"/>
<DataGridTextColumn Header="Cdigo Postal"
Binding="{Binding Path=CodigoPostal}" />
<DataGridTextColumn Header="Colonia" Binding="{Binding Path=Colonia}"/>
<DataGridTextColumn Header="Estado" Binding="{Binding Path=Estado}"/>
<DataGridTextColumn Header="Pas" Binding="{Binding Path=Pais}"/>
<DataGridTextColumn Header="Telfonos" 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"
Click="btnBorrar_Click" />
<Button Content="Limpiar" Height="23"
HorizontalAlignment="Stretch" Margin="5,92,5,0" Name="btnLimpiar"
Click="btnLimpiar_Click" />
</Grid>
</Page>
Se dar la funcionalidad editando el cdigo en PInicio.xaml.cs
El mtodo Page_Loaded mandamos a llamar al procedimiento que llena el grid de datos LlenaGrid().
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
Cada botn de la Pgina tiene su respectivo mtodo CLIC que definen su comportamiento. Los botones
Agregar, Modificar y Borrar mandan a llamar a otras Pginas que realizan sus respectivas tareas. El
botn Limpiar ejecuta su tarea en el mismo mtodo del evento y actualiza el grid de datos.
System;
System.Linq;
System.Text;
System.Windows;
AgendaWPF.Clases;
namespace AgendaWPF
{
/// <summary>
/// Lgica de interaccin para PInicio.xaml
/// </summary>
public partial class PInicio : Page
{
public PInicio()
{
}
{
}
/// 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.
// 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
// 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 pgina PAgregar.xaml

Modifica el aspecto de la pgina de captura. Se observa como el TAG Grid es el que se encarga de ordenar de
manera adecuada los controles.
Se modifica el cdigo PAgregar.xaml
En esta pgina se encuentran varios controles de tipo Label y TextBox que servirn para capturar cada
uno de los campos requeridos para la clase Contacto.
El Botn Aceptar realiza el guardado del Contacto al Directorio.
<Page x:Class="AgendaWPF.PAgregar"
mc:Ignorable="d"
d:DesignHeight="464" d:DesignWidth="498"
Title="Lista Contactos - Agregar" Loaded="Page_Loaded">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<Grid.Background>
</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"
<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0"
<Label Content="Apellido Materno:" Name="lblApellidoMaterno"
VerticalAlignment="Center" />
<TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0"
<Label Content="Fecha Nacimiento:" Name="lblFechaNacimiento"
<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0"
<Label Content="Calle:" Name="lblCalle"
Grid.Column="2" Grid.Row="6" VerticalAlignment="Center"/>
<TextBox Name="txtbCalle" Margin="3,0,3,0"
<Label Content="Nmero:" Name="lblNumero"
<TextBox Name="txtbNumero" Margin="3,0,3,0"
HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
<Label Content="Cdigo Postal:" Name="lblCodigoPostal"
Grid.Column="2" Grid.Row="8" VerticalAlignment="Center" />
<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="Pas:" Name="lblPais"
<TextBox Name="txtbPais" Margin="3,0,3,0"
<Label Content="Telfonos:" Name="lblTelefonos"
<TextBox Name="txtbTelefonos" Margin="3,0,3,0"
<Button Content="Agregar" Name="btnAgregar"
HorizontalAlignment="Right" VerticalAlignment="Center"
Width="100" Click="btnAgregar_Click" />
</Grid>
</ScrollViewer>
</Page>
Se modifica el cdigo PAgregar.xaml.cs, con la funcionalidad de la pgina.

El mtodo del evento Clic del botn 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. Despus es agregarla a la lista de Contactos usando el
mtodo Agregar() de la clase Directorio.
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Windows;
AgendaWPF.Clases;
namespace AgendaWPF
{
/// <summary>
/// Lgica de interaccin para PAgregar.xaml
/// </summary>
public partial class PAgregar : Page
{
public PAgregar()
{
}
{
}
/// Constructor
{
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();
}
{
}
}
/// 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 tipo
Contacto.
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 pgina PModificar.xaml

El cual muestra el Contacto seleccionado y le permite al usuario cambiar ciertos datos. Es la pgina para
modificar un Contacto es muy similar a PAgregar.xaml
Se modifica el cdigo PModificar.xaml, da el aspecto a la Pgina.
<Page x:Class="AgendaWPF.PModificar"
mc:Ignorable="d"
Title="Lista Contactos - Agregar" Loaded="Page_Loaded">
<Grid>
<Grid.Background>
</ImageBrush>
</Grid.Background>
<Label Content="Lista de Contactos. Modificar" Name="lblTitulo"
<TextBox Name="txtbNombre" Margin="3,0,3,0"
Grid.Column="3" Grid.Row="2" Height="23"
<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0"
<TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0"
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"
<TextBox Name="txtbColonia" Margin="3,0,3,0"
<TextBox Name="txtbEstado" Margin="3,0,3,0"
<TextBox Name="txtbPais" Margin="3,0,3,0"
<TextBox Name="txtbTelefonos" Margin="3,0,3,0"
<Button Content="Modificar" Name="btnModificar"
Width="100" Click="btnModificar_Click" />
</Grid>
</ScrollViewer>
</Page>
Se modifica el cdigo PModificar.xaml.cs, con la funcionalidad de la Pgina de Modificacin. El cual muestra

el Contacto seleccionado y le permite al usuario cambiar ciertos datos.
using
using
using
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Windows;
AgendaWPF.Clases;
namespace AgendaWPF
{
/// <summary>
/// Lgica de interaccin para PModificar.xaml

/// </summary>
public partial class PModificar : Page
{
public PModificar()
{
}
{
}
/// Obtiene y establece el Contacto que esta seleccionado en PInicio.xaml y que va a
ser 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.
{
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);
}
}
{

}
}
/// Metodo que limpia los controles de edicion.
{
try
{
txtbNombre.Clear();
txtbCalle.Clear();
txtbNumero.Clear();
txtbEstado.Clear();
txtbPais.Clear();
}
{
}
}
/// 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
}
{
}
}
}
}
12. Para la pgina PBorrar.xaml
Es la pgina para borrar, muy similar a los anteriores, solo que tiene los controles de edicin como Solo Lectura,
puesto que solo le mostraran al Usuario que Contacto desea borrar.
Esta pgina primero muestra los datos del Contacto a borrar al Usuario. El botn Borrar es el que procede a
borrar el Contacto y usa el mtodo Borrar() de la clase Directorio.
Se modifica el cdigo PBorrar.xaml
<Page x:Class="AgendaWPF.PBorrar"
mc:Ignorable="d"
Title="Lista Contactos - Borrar" Loaded="Page_Loaded">
<Grid>
<Grid.Background>
</ImageBrush>
</Grid.Background>
<Label Content="Lista de Contactos. Borrar" Name="lblTitulo"
<TextBox Name="txtbNombre" Height="23" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbApellidoPaterno" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbApellidoMaterno" Margin="3,0,3,0" IsReadOnly="True"

HorizontalAlignment="Left" VerticalAlignment="Center"/>
<DatePicker Name="txtbFechaNacimiento" Margin="3,0,3,0" IsEnabled="False"
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"
<TextBox Name="txtbCodigoPostal" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbColonia" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbEstado" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbPais" Margin="3,0,3,0" IsReadOnly="True"
<TextBox Name="txtbTelefonos" Margin="3,0,3,0" IsReadOnly="True"
<Button Content="Borrar" Name="btnBorrar"
Width="100" Click="btnBorrar_Click" />
</Grid>
</ScrollViewer>
</Page>
Se modifica el cdigo PBorrar.xaml.cs, con funcionalidad a la pgina para borrar.

using
using
using
using
using
using
using
using
using
using
System;
System.Linq;
System.Text;
System.Windows;
using
using
using
using
using
AgendaWPF.Clases;
namespace AgendaWPF
{
/// <summary>
/// Lgica de interaccin para PBorrar.xaml
/// </summary>
public partial class PBorrar : Page
{
public PBorrar()
{
}
{
}
/// 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
{
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();
txtbCalle.Clear();
txtbNumero.Clear();
txtbEstado.Clear();
txtbPais.Clear();
}
{
}
}
/// 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
}
}
}

Laboratorio UPC WPF

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Laboratorio UPC WPF

Hochgeladen von

Copyright:

Verfügbare Formate

Gua del alumno

Fundamentos de Datos e Informacin

Al finalizar las sesin, debers crear de proyectos WPF en C# que

Para alcanzar el logro de la sesin te proponemos desarrollar las siguientes actividades:

Revisar el material sobre listas que se

Realizar la actividad planteada para

Gua para la Creacin de un

Visual Studio creara los siguientes archivos en el proyecto

App.xaml: Archivo de configuracin de la aplicacin.

Direccin, Cdigo Postal

public Guid Agregar(string nombre, string apellidoPaterno,

5. Agregamos 4 pginas de formularios

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

Cambiamos su contenido tal y como se muestra

9. Para la pgina PInicio.xaml

La propiedad Title se emplea para colocar el ttulo de la ventana

Se modifica el cdigo xaml, modificando el aspecto de la pgina

Se dar la funcionalidad editando el cdigo en PInicio.xaml.cs

// Le pasamos la lista de contactos.

10. Para la pgina PAgregar.xaml

Se modifica el cdigo PAgregar.xaml.cs, con la funcionalidad de la pgina.

11. Para la pgina PModificar.xaml

Se modifica el cdigo PModificar.xaml.cs, con la funcionalidad de la Pgina de Modificacin. El cual muestra

/// Lgica de interaccin para PModificar.xaml

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

12. Para la pgina PBorrar.xaml

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

Se modifica el cdigo PBorrar.xaml.cs, con funcionalidad a la pgina para borrar.

Das könnte Ihnen auch gefallen