Silverlight 3 - Element Data Binding

Una de las mejoras que ofrece Silverlight 3 es el enlace entre elementos, lo que nos permite de manera sencilla enlazar valores  de las propiedades entre distintos elementos. Esta funcionalidad ya se encontraba en WPF, pero es un agregado en la nueva versión de Silverlight.

Con esta funcionalidad, no necesitamos de código o clase intermedia para actualizar propiedades de algunos elementos que dependen del valor de una propiedad de otro elemento.

Las propiedad fundamental para usarlo es ElementName de la clase Binding.

Utilizando una imagen, vamos a tener tres slides para ir rotándola utilizando la nueva funcionalidad de perspectiva, sin escribir una línea en el code-behind y utilizando solamente XAML.

Primero vamos a crear la imagen que vamos a rotar.

<Border CornerRadius="5"

        BorderBrush="DarkGray"

        BorderThickness="2"

        Background="White"

        HorizontalAlignment="Center"

        VerticalAlignment="Center">

    <Grid Margin="10" Width="100" Height="100">

        <Image Source="/images/silverlight.jpg"></Image>

    </Grid>

    <Border.Projection>

        <PlaneProjection x:Name="Projection"

                         CenterOfRotationX="0.5"

                         CenterOfRotationY="0.5"

                         CenterOfRotationZ="0.5" />

    </Border.Projection>

</Border>

Ahora viene la parte interesante, donde vamos a crear los slides y le vamos a asociar la propiedad que vamos a cambiar.

<TextBlock Text="Proyección X"/>

<Slider Minimum="-360"

        Maximum="360"

        Margin="5"

        Value="{Binding RotationX, Mode=TwoWay, 

                ElementName=Projection}"

        SmallChange="1" />

<TextBox Text="{Binding RotationX, Mode=OneWay, 

                ElementName=Projection}" />

<TextBlock Text="Proyección Y"/>

<Slider Minimum="-360"

        Maximum="360"

        Margin="5"

        Value="{Binding RotationY, Mode=TwoWay, 

                ElementName=Projection}"

        SmallChange="1" />

<TextBox Text="{Binding RotationY, Mode=OneWay, 

                ElementName=Projection}" />

<TextBlock Text="Proyección Z"/>

<Slider Minimum="-360"

        Maximum="360"

        Margin="5"

        Value="{Binding RotationZ, Mode=TwoWay, 

                ElementName=Projection}"

        SmallChange="1" />                

<TextBox Text="{Binding RotationZ, Mode=TwoWay, 

                ElementName=Projection}" />

Al definir la propiedad Mode en TwoWay, estamos diciendo que si cambia el Slider o si se modifica la propiedad Projection desde otro lugar, se actualicen los dos elemento, permitiendo tener sincronizados los dos objetos.

Vemos que agregué unos TextBox que indican el valor que tiene la proyección de la imagen. Al estar la propiedad Mode en OneWay, si cambiamos el valor de los TextBox de los ejes X o Y, no varía la proyección, porque solamente muestra el valor de la propiedad Rotation. En cambio el TextBox del eje Z, esta definido como TwoWay, si cambiamos este valor se actualizan tanto el Slider como Projection.

Pueden descargar el proyecto aquí.