Posts Tagged ‘ Silverlight ’

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.

A %d blogueros les gusta esto: