Element to Element Binding

Silverlight 3 에서는 UIElement에서 다른 UIElment의 Property 값을 Binding 할 수 있는 기능이 추가 됐습니다.
(WPF에서는 원래 사용되고 있었다고 합니다.)

Element Binding
Element Binding은 다음과 같은 구문으로 사용하실 수 있습니다.

DependencyProperty = "{Binding Value, ElementName=UIElement명}"

Slider의 Value 값을 DependencyProperty에 Binding 하게 됩니다.

Silverlight 2에서는 Element의 Property 값을 다른 Element에서 참조하여 사용하고자 할 때, 비하인드 코드에서 Property값을 참조할 수 있도록 처리를 해 줘야 했습니다.

사용자가 Silder를 움직일 때마다, Slider의 값을 TextBlock에 표시하는 코드를 예제로 만들어 봤습니다.
만일 Silverlight 2라면

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
        <Slider x:Name="mySlider" Minimum="0" Maximum="1" Value="0"/>           
        <TextBlock x:Name="MyTextBox" Height="40"/>
    </StackPanel>
</Grid>

XMAL에서 Silder, TextBlock에 Name 을 지정하고, 비하인드 코드에서 다음과 같이 Slider의 ValueChanged 이벤트를 구현하여 직접 TextBlock 의 Text 값을 변경 하는 코드를 추가해야 가능합니다.

public MainPage()
{
    InitializeComponent(); 

    this.mySlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(mySlider_ValueChanged);
} 

void mySlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    this.MyTextBox.Text = this.mySlider.Value.ToString();
}

하지만, Silverlight3 에서는 Element To Element Binding이 지원되기 때문에 다음과 같이 XAML 코드에서 Element Binding 만 해 준다면, 비하인드 코드에는 한 줄의 코드도 추가하지 않아도 똑같이 구현이 되는 것을 확인 하실 수 있습니다.

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
        <Slider x:Name="mySlider" Minimum="0" Maximum="1" Value="0"/>
        <TextBlock x:Name="MyTextBox" Height="40"
                   Text="{Binding Value, ElementName=mySlider}"/>
    </StackPanel>
</Grid>

또 한가지, 위 코드를 브라우저에서 실행하게 되면 TextBlock이 첫 실행시에도 Text property에 0 이라는 Value 가 찍혀 있는 것을 확인 할 수 있습니다. Element To Element Binding 이 아니였다면, 비하인드 코드에서 페이지 생성자라던가 로드시에 다음과 같은 코드를 삽입했어야 했지만 Element To Element Binding을 이용하게 되면, 비하인드에 어떤 처리도 할 필요가 없게 됩니다.

this.MyTextBox.Text = this.mySlider.Value.ToString();