12/9/10

Comunicar controles de usuario en silverlight

Quiero que quede huella de cómo comunicar 2 Controles de usuario (User control) en un proyecto en Silverlight utilizando Visual Studio 2010 y C#

Primero quiero tener un control de usuario que lea una cadena de texto, esta cadena de texto debe enviarse a un segundo control de usuario que la muestre en un Textbox.

Tal vez no tenga un uso práctico pero es sencillo para que quede clara la forma de enviar objetos entre controles de usuario.

Empecemos agregando 2 controles de tipo Border en el MainPage contendrán los controles de usuario

---Código XAML del MainPage----
< UserControl x:Class="SilverlightApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >

    < Grid x:Name="LayoutRoot" Background="White" >
        < Border BorderBrush="Silver" BorderThickness="1" Height="152" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="400" / >
        < Border BorderBrush="Silver" BorderThickness="1" Height="150" HorizontalAlignment="Left" Margin="0,150,0,0" Name="border2" VerticalAlignment="Top" Width="400" />
    < / Grid >
< / UserControl >
---Fin del Código XAML del MainPage----

Ahora creemos el primer control de usuario que contendrá un TextBox donde escribiremos la cadena que se enviará sl control de usuario 2. También le pondremos un botón para enviar la cadena al segundo control de usuario después de escribirla.
 

---Código XAML del Control de usuario 1----
< UserControl x:Class="SilverlightApplication2.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >
   
    < Grid x:Name="LayoutRoot" Background="White" >
        < TextBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtbxCadena" VerticalAlignment="Top" Width="120" / >
        < Button Content="Enviar" Height="23" HorizontalAlignment="Left" Margin="34,41,0,0" Name="btnEnviar" VerticalAlignment="Top" Width="75" Click="btnEnviar_Click" / >
    < / Grid >
< / UserControl >
---Fin del Código XAML del Control de usuario 1----
 

Ahora crearemos un segundo control de usuario que contendrá un TextBlock que mostrará la cadena recibida por el primero control de usuario.

--- Código XAML del Control de usuario 2----

< UserControl x:Class="SilverlightApplication2.UserControl2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >
   
    < Grid x:Name="LayoutRoot" Background="White" >
        < TextBlock Height="22" HorizontalAlignment="Left" Margin="12,12,0,0" Name="txtblockCadenaRec" Text="Aun no me llega nada" VerticalAlignment="Top" Width="293" / >
    < / Grid >
< / UserControl >
---Fin del Código XAML del Control de usuario 2----

Hasta aquí tenemos los XAML de los 2 controles de usuario y del MainPage, ahora a programar.

Primero en el Control de usuario 1 (donde tenemos el textBox y el Botón) debemos crear un delegado encargado de disparar un evento y debemos declarar el evento que se debe disparar.


----Código C# del primer control de usuario----
public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
        public delegate void delegadoEnviaCadena(string cadena); /*
es el delegado que se encarga de disparar el evento. Le decimos que el evento se llama delegadoEnviaCadena y recibe una cadena*/
        public event delegadoEnviaCadena enviaCadena;/*Es el evento que se va a disparar. Declaramos el evento del delegado, el evento se llama enviaCadena sin embargo el código de este evento no está en este control de usuario, este evento se desarrolla en el MainPage*/

        private void btnEnviar_Click(object sender, RoutedEventArgs e)
        {
            enviaCadena(txtbxCadena.Text); /*El evento enviaCadena se dispara enviándole el texto escrito, pero el código de lo que hace está en el MainPage.xaml.cs*/
        }  
    }
----Fin del código C# del primer control de usuario-----

 

Con el código anterior declaramos un delegado y un evento que se va a disparar cuando se da clic sobre el botón y envía la cadena.
 

Ahora falta escribir el código del evento que se dispara cuando hacen clic en el botón.

-----Código C# del MainPage-------
public partial class MainPage : UserControl
    {
        UserControl1 uc1; //declaramos el control de usuario 1
        UserControl2 uc2; //declaramos el control de usuario 2
        public MainPage()
        {
            InitializeComponent();
            uc1 = new UserControl1(); //creamos el control de usuario 1
            border1.Child = uc1;     //se lo asignamos al border 1
            uc2 = new UserControl2();  //creamos el control de usuario 2
            border2.Child = uc2;       //se lo asignamos al border 2
            this.uc1.enviaCadena += new UserControl1.delegadoEnviaCadena(recibeMainYEnviaCtrolUser2); /*Le asigna al evento enviaCadena el método recibeMainYEnviaCtrolUser2 con los mismos parámetros*/
        }

        void recibeMainYEnviaCtrolUser2(string cadena)
        {
            uc2.recibeCadena(cadena);  /*le envía la cadena al control de usuario 2 que debe tener un método que reciba los parámetros que deseamos enviarle*/
        }
    }

-----Fin del código C# del MainPage-------

 

Finalmente en el Control de usuario 2 debemos declarar el método que reciba el parámetro que nos envían del primer control de usuario.

----Código C# del segundo control de usuario-----


public partial class UserControl2 : UserControl
    {
        public UserControl2()
        {
            InitializeComponent();
        }

        public void recibeCadena(String cadena)/* el método que recibe el parámetro que nos envían del primer control de usuario*/
        {
            txtblockCadenaRec.Text = cadena;
        }

    }

----Fin del código C# del segundo control de usuario-----

 

En este ejemplo se envía una cadena, pero se puede enviar cualquier objeto, únicamente hay que cambiar la palabra string por el tipo del objeto y listo.

No hay comentarios: