Crear y usar propiedades en Silverlight

Este es uno de esos temas básicos al momento de programar en cualquier ambiente .NET, la elaboración y uso de propiedades es indispensable para poder interactuar entre elementos.

Por ahora asumiendo que eres nuevo no solo en Silverlight, sino en la parte de programación, te cuento que cualquier objeto queda particularmente definido por medio de sus propiedades y eventos, en Expression Blend, si seleccionas un botón, sus propiedades se verían como algo así.

En el caso de Visual Studio, sería algo como esto.

Vamos a crear por ahora cuatro tipos de propiedades, una de tipo string, una de tipo ImageSource, una de tipo MainPage y la última de tipo double y que dependiendo de su valor nos regrese un texto.

Comienza creando una solución, después de haberla creado, crea una carpeta (nómbrala como quieras) y ahí crea un nuevo UserControl (igual llámalo como quieras), el resultado debe ser algo así.

En ese UserControl nuevo, reemplaza el código con este XAML.

<UserControl
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"
x:Class="Propiedades.ControlSeparado"
d:DesignWidth="640" d:DesignHeight="480" Width="350" Height="100">
 
<Grid x:Name="LayoutRoot">
<Image x:Name="imgControl" Margin="8,8,0,8" HorizontalAlignment="Left" Width="127"/>
<TextBlock x:Name="txtTitulo" Height="20" Margin="139,8,8,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="White" FontSize="14.667"/>
<TextBlock x:Name="txtValor" Margin="139,32,8,48" TextWrapping="Wrap" Text="TextBlock" Foreground="White" FontSize="14.667" TextAlignment="Right"/>
<Button x:Name="btnAnimacion" Content="Animación" HorizontalAlignment="Right" Height="25" Margin="0,0,8,8" VerticalAlignment="Bottom" Width="98"/>
</Grid>
</UserControl>

Ahora viene la parte interesante de esto, como puedes ver, tenemos diferentes controles, los cuales responderán de acuerdo a como establecemos nuestras propiedades.

Primero comienza con crear las variables que utilizaremos.

private string titulo;
private ImageSource imagen;
private double valor;
private bool banderaRectangulo = false;

Las variables nos permitirán almacenar un valor, mediante ellas, podremos direccionar ese valor hacía otros elementos, por ejemplo usa la primera que vez

public string Titulo
{
get { return titulo; }
set { titulo = value; txtTitulo.Text = titulo; }
}

TIP: Si estás trabajando en VS2010, selecciona la variable, presiona Ctrl + R + E y te aparecerá una ventana de «Encapsular campo», solo acepta dos veces y creará por tí la propiedad con todo y paso de valores a la variable.

De esta forma el valor pasado a la propiedad es directamente dirigido al texto del TextBlock, has lo mismo con la propiedad de tipo ImageSource

public ImageSource Imagen
{
get { return imagen; }
set { imagen = value; imgControl.Source = imagen; }
}

Si compilar tu aplicación y en Expression Blend te vas a tu pestaña de Assets, ahora podrás ver tu elemento recién creado al buscarlo por su nombre.

Solo arrastra y suelta ese control en tu MainPage y listo! Lo tienes ahí disponible, ahora ve a tu menú de propiedades y podrás notar que ahí en la pestaña de Miscellaneous están todas las propiedades que le acabas de crear.

Podrás notar que al cambiar las propiedades aquí, cambiarán los valores de los elementos que modificaste. Ahora podremos continuar con las otras dos propiedades que dejamos pendientes.

La primera es la de tipo double, a esta dependiendo el valor numérico que le metamos, vamos a meterle un valor de tipo texto que muestre “alto”, “medio” o “bajo”, dependiendo del número, para ello has lo siguiente.

public double Valor
{
get { return valor; }
set
{
valor = value;
if (valor > 0 && valor < 10)
txtValor.Text = "Bajo";
else if (valor >= 10 && valor < 20)
txtValor.Text = "Medio";
else
txtValor.Text = "Alto";
}
}

Construye tu aplicación, y ahora en el MainPage, al asignar un número a la propiedad “Valor” esta ajustará el texto de acuerdo a lo que especifiques. Por último, vamos a la propiedad que nos queda, la del tipo MainPage.

public MainPage master { get; set; }

TIP: Si estás usando Visual Studio 2010, escribe «prop», así podrás seleccionar un code snippet que te permite  crear una propiedad con solo presionar dos veces el tabulador, preestablecidamente será de tipo «int», pero ya tu la podrás cambiar al modo que quieras, de cualquier forma te ahorra muchas teclas presionadas.

Esta la usarás para poder obtener acceso a los métodos, animaciones y controles que estén dentro de esta clase, para mostrarlo necesitas poner un rectángulo simple en tu página principal.

<Rectangle x:Name="ctrlPagina" HorizontalAlignment="Right" Height="104" Margin="0,0,111,122" Stroke="White" VerticalAlignment="Bottom" Width="199">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF006DFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

Es importante que le pongas un nombre a ese control, para poder “manejarlo” desde otro lado, ahora en tu control separado vete al manejador del evento click del botón, y desde ahí lo podrás hacer visible o invisible.

private void btnAnimacion_Click(object sender, System.Windows.RoutedEventArgs e)
{
if (!banderaRectangulo)
master.ctrlPagina.Visibility = System.Windows.Visibility.Collapsed;
else
master.ctrlPagina.Visibility = System.Windows.Visibility.Visible;
 
banderaRectangulo = !banderaRectangulo;
}

Si corres tu aplicación aquí te aparecerá un error de referencia nula, esto se debe a que por medio del evento clic del botón, ya le dijiste al control de tipo Rectángulo que está en tu propiedad de tipo MainPage que es lo que debe hacer, pero no has creado la instancia que relacione a la propiedad con el objeto en cuestión.

Simplemente ve a tu code behind de tu MainPage y escribe lo siguiente en el constructor de tu MainPage.

public MainPage()
{
InitializeComponent();
ctrlSeparado.master = this;
}

Así de sencillo podrás eliminar el error y acceder a todo lo que MainPage tiene.

Y listo!!! De esta forma es como puedes crear controles de usuario con propiedades específicas, para evitarte así la molestia de tener que crear código redundante.

Descarga aquí el código fuente del ejemplo.