Silverlight 3 Beta 1: Enlace con RelativeSource

Silverlight 3 Beta 1: Enlace con RelativeSource

Hace algunos días escribí acerca del Enlace entre Elementos, una de las nuevas características presentes en Silverlight 3 Beta 1 (tomadas de su hermano mayor WPF).  Para complementar ese artículo he decidido hablar por separado de RelativeSource: una propiedad que podemos encontrar en el markup extension Binding.  Esta propiedad en Silverlight soporta dos valores tal y como se describen a continuación:

Self

Cuando establecemos un Binding con RelativeSource=Self estamos indicando que el origen del enlace es el mismo elemento en donde lo estamos estableciendo.  El siguiente fragmento de código explica mejor este concepto:

<Slider x:Name="slider" Width="250" Height="20" Value="100" Minimum="0" Maximum="250" />

            <Ellipse x:Name="elipse" Width="{Binding ElementName=slider, Path=Value}"

                     Height="{Binding Path=Width, RelativeSource={RelativeSource Self}}"

                     Fill="Purple" />

En este ejemplo tenemos una Ellipse un Slider.  La propiedad Width de la Ellipse está enlazada con la propiedad Value del Slider, justo como lo vimos en este artículo.  Aquí el punto interesante es ver cómo la propiedad Height está enlazada a la propiedad Width de el elemento mismo.  Esto es logrado estableciendo la propiedad RelativeSource a Self, a través del markup extension {RelativeSource}.

TemplatedParent

El otro valor que podemos establecer en RelativeSource es TemplatedParent.  Esta opción indica que el valor lo tomará del control en donde estemos aplicando la plantilla en cuestión, por lo tanto esta opción solo es válida dentro de la declaración de una Platilla.  El siguiente código muestra la declaración de una nueva plantilla para un Botón, llamada ‘miEstilo’.  Dentro de esta Plantilla se declara un TextBlock el cual pone en su propiedad Text el valor de la propiedad Height del control en donde se está aplicando la Plantilla (botón ‘btn’):

<Style x:Name="miEstilo" TargetType="Button">

            <Setter Property="Width" Value="150" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate>

                        <Border BorderBrush="Red" BorderThickness="5">

                            <StackPanel>

                                <!--RelativeSource:  TemplatedParent-->

                                <TextBlock Text="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}" />

                                <ContentPresenter HorizontalAlignment="Center" />

                            </StackPanel>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

....

<Button x:Name="btn" Height="70" VerticalAlignment="Top"

                    Content="Botón con Template" Style="{StaticResource miEstilo}" />

Cabe mencionar que esta opción es similar a utlizar {TemplateBinding} dentro de la Plantilla.

Resumen

Las nuevas características de Enlace presentes en Silverlight 3 Beta 1 extienden la funcionalidad y abren nuevas oportunidades para el desarrollo de aplicaciones con esta plataforma.

Para ver una aplicación en vivo que demuestra los conceptos expuestos pueden revisarla aquí (el plugin de Silverlight 3 Beta 1 es requerido).