Data Binding entre controles

Silverlight Add comments

El hecho de establecer los datos en los formularios de forma declarativa, es una forma de obtener un codigo limpio. Si bien es verdad que intentar definir toda la interfaz declarativamente puede conllevar complicaciones en el desarrollo, una vez que se consigue uno se queda satisfecho. Una pena que no dispongamos en Silverlight 3 de los comandos que si podemos encontrar en WPF, los cuales nos permitirían establecer el control de eventos sin hacer uso del codebehind.

Un punto interesante del Data Binding, es la posibilidad de establecer el valor de las propiedades de los controles en función de los valores de otras propiedades de otros controles.

Como ejemplo veamos como las cajas de texto buscan su valor en función del objeto seleccionado en un combobox, y como podemos establecer el tamaño de fuente de los TextBoxes mediante un control Slider.

XML:
  1. <StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Top">
  2.         <Border Background="#D3DAED" CornerRadius="3" Margin="2" Padding="2" BorderThickness="1" BorderBrush="#A9AFCC" Width="200"  Height="40" VerticalAlignment="Top">
  3.             <StackPanel Orientation="Horizontal">
  4.                 <TextBlock Text="Modelo" Height="30" Width="80" VerticalAlignment="Center"/>
  5.                 <ComboBox x:Name="cbModelo" Height="30" Width="100"  VerticalAlignment="Center"
  6.                   ItemsSource="{Binding Path=Coches}"                                   
  7.                   DisplayMemberPath="Modelo"
  8.                   />
  9.             </StackPanel>
  10.         </Border>
  11.         <Border Background="#D3DAED" CornerRadius="3" Margin="2" BorderThickness="1"
  12.                 BorderBrush="#A9AFCC" Width="200" VerticalAlignment="Top">
  13.             <StackPanel Orientation="Vertical"  Margin="10,2" HorizontalAlignment="Left">
  14.                 <!-- La propiedad Text de los TextBoxes es obtenida
  15.                      del objeto seleccionado en el combobox -->
  16.                 <TextBlock Text="{Binding SelectedItem.Marca, ElementName=cbModelo}" 
  17.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>
  18.                 <TextBlock Text="{Binding SelectedItem.Cilindrada, ElementName=cbModelo}"
  19.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>
  20.                 <TextBlock Text="{Binding SelectedItem.Combustible, ElementName=cbModelo}"
  21.                            Height="40" Width="180" FontSize="{Binding Value, ElementName=sliderSize}"/>                               
  22.             </StackPanel>           
  23.         </Border>       
  24.     </StackPanel>
  25.     <Border Background="#D3DAED" CornerRadius="3" Margin="2" Padding="2" BorderThickness="1"
  26.                 BorderBrush="#A9AFCC" Width="400" Height="40" VerticalAlignment="Top" HorizontalAlignment="Left">
  27.         <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="2">
  28.             <TextBlock Text="Tamaño de Fuente" Height="30" Width="120" VerticalAlignment="Center" />
  29.             <!-- La Propiedad Value del control Slider se puede establcer mediante una caja de texto-->
  30.             <Slider x:Name="sliderSize" Minimum="10" Maximum="34" Value="{Binding Text,
  31.                         ElementName=txtFont, Mode=TwoWay}" SmallChange="1" LargeChange="1"
  32.                         Width="100" VerticalAlignment="Center"></Slider>
  33.             <!-- El valor de la caja de texto es obtenida de la propiedad Value del control Slider-->
  34.             <TextBox x:Name="txtFont" Text="{Binding Value, ElementName=sliderSize}"
  35.                          Height="30" Width="40" VerticalAlignment="Center" />
  36.         </StackPanel>
  37.     </Border>
  38.     </StackPanel>
  39.  

Si nos fijamos en el XAML, observaremos que en el Binding de las propiedades añadimos una nueva etiqueta ElementName, etiqueta que  especifica el objeto origen del cual vamos a obtener el valor. El valor será el que proporcione la propiedad de ese objeto y que establecemos en el Binding. Por ejemplo, para las cajas de texto que muestran la información del objeto Coche, indicamos que el objeto origen es el combo box, y que el valor a mostrar es una propiedad del objeto seleccionado.

Text="{Binding SelectedItem.Cilindrada, ElementName=cbModelo}"

Veamos el ejemplo en funcionamiento:

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Acceder

Switch to our mobile site