I know most designers like to stick with creating the graphics and leaving all the coding to developers, but Data Binding is so simple and could come in very handy for you one day.
Text to text binding
Text to text binding is a good place to start because it’s the most basic type of binding. It allows you to type in a text field and then display that text somewhere else, event multiple locations.
The first step is to create a TextBox (call this item Input_Text) anda TextBlock (which is updated when the content of the TextBox changes).
Select your TextBlock and find the “Content” property in your properties panel. Click the tiny square next to it and select “Data Binding.”
A dialogue box appears with 3 tabs across the top. Select the “Element Property” tab.
Now you should see all the items on that current page. On the left panel navigate to the Input_Text item and select it. The right panel displays the properties available for Input_Text. Scroll down and select “Text: (String).” Then click OK.
Collapse the properties panel to see the data bound text in action!
Next up: Slider control to object height
In this demo , I bound a slider control so I can easily edit the height of the graph items. First let’s look at how to bind a slider to a rectangle’s height.
Click the Assets tab in the top left corner (if you have the standard work space setup), and find the slider control. If you don’t use the standard work space setup, click the Assets library button at the bottom of your tool bar on the left..
Place a slider control on the page. The size doesn’t matter, because we will set the values of each end of the slider and Silverlight will calculate the rest.
Next create a rectangle on the screen. You will bind your slider control to this rectangle later.
Now switch to the XAML view for the page.
Find your slider. It will probably look something like this:
<Slider Height="42" HorizontalAlignment="Right" Margin="0,0,-13,30" VerticalAlignment="Bottom" Width="135"/>
We’ll add a few elements to this, but first let’s start by naming it “control_slider.” Either edit it at the top of the properties tab or via XAML by adding x:Name="control_slider"
Now add a Maximum and Minimum value for the slider:Maximum=”125” Minimum=”15”
Because we are applying this to a rectangle’s height, think of these values as pixels.
Next, add the starting value. This will dictate where the slider is positioned when the application is loaded.
Value=”50”
You can edit all of these items in the properties panel under “common properties.”
Now the XAML for your slider control should look something like this:
<Slider x:Name="control_slider" Height="21" Maximum="125" Minimum="15" Value="125" HorizontalAlignment="Left" Width="135" IsEnabled="False" Canvas.Left="203" Canvas.Top="152"/>
To bind your slider control to the rectangle:
Select your rectangle and find the height property. Click the small square next to it and select “Data Binding.”
Then Select the “Element Properties” tab and find your slider control in the left panel. On the right panel, select the “Value: (Double)” item and click OK.
Collapse the properties panel and try out your slider!
Some other tips and hints with Data Binding
Change the mode: When you bind an element to something, the element will look like this:
Text="{Binding Text, ElementName=textBox, Mode=OneWay}"
By changing the mode from OneWay to TwoWay, you can edit either the TextBox or the TextBlock , and both will display the change.
Note: this means both items have to be able to take input, for example, 2 text boxes.
Try binding to other items: Instead of binding to a simple rectangle, try binding to a canvas and placing multiple items inside, like I have with my isometric graph items.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
