Colección de datos con Silverlight y C#

Este es un ejemplo sencillo realizado sobre C# y utilizando la interfaz de Silverlight, el objetivo es cargar información en una colección y mostrarla en un DataGrid.

Para iniciar crearemos un nuevo proyecto tipo Aplicación de Silverlight.

Para este ejemplo creamos un formulario:

Dos TextBox (txtNombres, txtUsuario), un control PasswordBox (txtPass) un control DataPicker (dptNacimiento) y un botón (btnGuardar). Además agregaremos un control DataGrid (grdUsuarios).

El código XAML de nuestro formulario sería el siguiente:

<Grid x:Name=»LayoutRoot» Background=»White»>

        <ScrollViewer Height=»Auto» Width=»Auto»>

            <Canvas>

                <TextBox Canvas.Left=»155″ Canvas.Top=»25″ Height=»23″ Name=»txtNombres» Width=»150″ TabIndex=»0″ />

                <TextBox Canvas.Left=»155″ Canvas.Top=»54″ Height=»23″ Name=»txtUsuario» Width=»150″ TabIndex=»1″ />

                <PasswordBox Canvas.Left=»155″ Canvas.Top=»83″ Height=»23″ Name=»txtPass» Width=»150″ TabIndex=»2″ />

                <control:DatePicker Canvas.Left=»155″ Canvas.Top=»112″ Height=»23″ Name=»dtpNacimiento» Width=»150″ TabIndex=»3″ />

                <Button Canvas.Left=»300″ Canvas.Top=»149″ Content=»Registrar» Height=»23″ Name=»btnGuardar» Width=»75″ Click=»btnGuardar_Click» />

                <sdk:DataGrid AutoGenerateColumns=»True» Canvas.Left=»6″ Canvas.Top=»198″ Height=»Auto» Name=»grdUsuarios» Width=»Auto» />

                <TextBlock Canvas.Left=»29″ Canvas.Top=»25″ Height=»28″ Name=»label1″ Width=»120″ Text=»Nombres Completos:» />

                <TextBlock Canvas.Left=»29″ Canvas.Top=»54″ Height=»28″ Name=»label2″ Width=»120″ Text=»Nombre Usuario:» />

                <TextBlock Canvas.Left=»29″ Canvas.Top=»83″ Height=»28″ Name=»label3″ Width=»120″ Text=»Password:» />

                <TextBlock Canvas.Left=»29″ Canvas.Top=»112″ Height=»28″ Name=»label4″ Width=»120″ Text=»Fecha Nacimiento:» />

            </Canvas>           

        </ScrollViewer>

</Grid>

Para que nos funcione sin inconvenientes el DataGrid y el DatePicker debemos agregar dos referencias dentro de nuestro código XAML:

xmlns:sdk=»clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data»

        xmlns:control=»clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls»

Por otra parte crearemos la clase Usuarios (Usuarios.cs) con la que podamos trabajar una colección de objetos.

public class Usuarios : Collection<Usuarios>

{
   public String Nombres { get; set; }

    public String Usuario { get; set;}

    public String Pass { get; set; }

    public DateTime Nacimiento { get; set;}

    public DateTimeIngreso { get; set;}

}

Al final en el evento clic del botón agregamos el código que nos permite llenar nuestra colección y lista en el DataGrid los datos que vamos agregando.

//Creamos una lista de nuestra clase Usuarios

List<Usuarios>
lUsr = new List<Usuarios>();

 private void btnGuardar_Click(object sender, RoutedEventArgs e)

{

       //Limpiamos el datagrid

      grdUsuarios.ItemsSource = null;      

       //Creamos el objeto oUsr (instancia de nuestra clase Usuarios)

      Usuarios oUsr = new Usuarios(); 

       //Asignamos los valores correspondientes al objeto que hemos creado

      oUsr.Nombres = txtNombres.Text;

      oUsr.Usuario = txtUsuario.Text;

      oUsr.Pass = txtPass.Password;

      oUsr.Nacimiento = Convert.ToDateTime(dtpNacimiento.Text);

      oUsr.Ingreso = DateTime.Now; 

       //Agregamos el nuevo objeto a nuestra colección

      lUsr.Add(oUsr); 

       //Cargamos el DataGrid con la colección de datos

      grdUsuarios.ItemsSource = lUsr;

 }

Al ejecutarlo podremos observar que por cada dato que ingresamos va apareciendo en nuestro DataGrid:

Esto no reemplaza el almacenamiento de los datos, pero es un ejercicio que nos ayuda a comprender un poco el manejo y la construcción de colecciones integrándolo a Silverlight.

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Blog de WordPress.com.

Subir ↑

A %d blogueros les gusta esto: