Windows Phone Data Binding between Elements using the Designer

published on: 2/17/2012 | Views: N/A | Tags: Beginners

by Waleed Arafa Al-Zoghby

In this article I'm going to talk about "Data Binding" between elements. I will use "Slider" & "TextBox" elements to clarify the idea.

Suppose that you have 2 elements a slider and a TextBox; and you want to bind the value of slider to the text property of textbox element so you will have a binding source: "Slider" and Binding target: "TextBox" .... it's easy....! Add an event handler "ValueChanged" of slider element and write one line of code like ' TextBox1.Text = Slider1.Value.ToString(); '... it's a traditional method to bind! But I want to demonstrate a feature supported by Silverlight for Windows Phone without adding an event handler.

We will create a new Windows Phone application and drag & drop a slider and TextBox elements on the current page like on the screenshot below. Next, select the TextBox and then "Apply Data Binding." from the Properties Window:

Next, select "Slider" as a binding source from the popup window:

After that select the property of the binding source(in our case "Value") and the type of the binding:

If you select "one-way" ... when you change the value of the slider, the textbox value will be changed. Otherwise, if you select "two-way" ... when you change the value of any element the other one will be affected as well.

Note: take a look at the binding of the Text property of the textbox element

 <TextBox Height="72" HorizontalAlignment="Left" Margin="146,463,0,0" Name="textBox1" VerticalAlignment="Top" Width="156" TextAlignment="Center" Text="{Binding Path=Value, Mode=TwoWay, ElementName=slider1}" />