Simple Data Binding in Blend 3

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 a 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

#1 Bharti on 8.04.2009 at 12:55 AM

Hi Alex,

Nice Tutorial.Impressive Example.

Just Curious about that Rectangle bars.

Did you use perspective 3d for that?

#2 Alex Knight on 8.04.2009 at 9:05 AM

Hi Bharti,

No perspective for the bars, its just a canvas, with 3 rectangles, I just skewed the side and top a little to give the isometric feel to them...

#3 Bharti on 8.04.2009 at 11:11 AM

Thanks for your quick Reply.

#4 Bharti on 8.05.2009 at 3:02 PM

Hi Alex,

I have tried your tutorial.Data binding works properly.But the problem is that when i try to increase the ht of skewed rectangle,it increases in downward direction instead of upward direction in Blend 3.

Do you have any solution for this?

Thanks

Bharti

#5 Alex Knight on 8.05.2009 at 4:10 PM

If you move the center point of the rectangle to the bottom by dragging and dropping the dot in the middle of the rectangle, if that doesn't work try changing its center point in the RenderTransform options in your property menu. Let me know how you go.

Oh and also you could try putting the rectangle inside a contain like a canvas.

#6 Tom Beeby on 8.05.2009 at 5:46 PM

Hey Alex,

nice tutorial!

#7 Bharti on 8.06.2009 at 6:26 AM

Hi Alex,

Thanks for your suggestion.I have tried all the options by changing the center point of rectangle and using rectangle with canvas.But still it is not working :(.

#8 Bharti on 8.07.2009 at 12:07 AM

Hi Alex,

I think i got the solution.

I used grid panel instead of canvas and moved center point downward and it's working.

Thanks for discussion and help.

#9 Sulumits Retsambew on 8.08.2009 at 9:26 PM

Thanks Alex. I got your point.

#10 Italian Translation on 8.11.2009 at 7:31 AM

Thnaks for the turtorial.I was looking for that info nearly 2 days.Can I copy this article on my blog?If so,please mail me,and we can exchange uesful articles in the future.

Regards,

Nick

#11 asis on 8.11.2009 at 10:48 PM

Thanks for the tutorial. can you give me some idea how to create a cutom slider control and how to bind the data.

Thank you

#12 devildev on 8.12.2009 at 7:00 AM

Hi Alex!

I apply Data Binding to "3d rectangle". Then when I move the slider it changes the other way around - the top is in place, while the bottom moves. For all other objects moving up. How to solve this problem?

Sorry for my English

#13 Alex Knight on 8.12.2009 at 10:18 AM

Hi Devildev,

This is probably because the object VerticalAlignment is set to be a certain distance from the top. Under layout there are some options to change the VerticalAlignments of the object, if it is set to top it will always be that distance from the top of your application (or the canvas it sits inside). if you change this to bottom then it should always sit that distance from the bottom and will expand upwards.

If it was aligned to the center, it would expand both directions.

It's a little hard to explain with out showing you some images but I hope this helped.

#14 Alex Knight on 8.12.2009 at 10:22 AM

Hi Asis,

The binding would be the same as in this tutorial and then you can skin your slider control by right clicking it, pointing to Edit Template and clicking Edit a Copy. In here you will see all the elements of your slider. From here you should able to edit each part of the slider to look how you wish.

Editing sliders can be quite tricky because there are a lot of bits and pieces in there to play around with.

Take the HorizontalThumb for example, its a control within your Slider, you can right click that item and edit its template.

Hope this helped.

Thanks

#15 devildev on 8.14.2009 at 4:36 PM

Hi Alex,

I understand that the transition from one state to another (from save to edit or сonversely) is made by using reverse the animation?

#16 Alex Knight on 8.14.2009 at 6:08 PM

Devildev,

Nope, all the animations are created on the fly depending on where the elements are... I have 2 states, the first showing the graph at full size and the second showing the editable items and the smaller graph, all I need to do is tell my app that when I click this button go to that state and take 3 seconds to do it. So Silverlight then calculates what it needs to do within those 3 seconds for each item to be at the new location.

So when you click edit, the application has 3 seconds to show the edit screen... and when you click save it has 3 seconds to re-arrange itself back to the graph screen. No animations required.

Hope this helps

#17 amandus on 8.24.2009 at 6:47 PM

Hi Alex,

is it possible to get the sources for this tutorial?

I think, this would be very helpful to learn something about visual states, resizing and databinding

Thank you!

#18 tom on 9.04.2009 at 1:03 AM

How did you make that 3D chart...? That should be the next tutorial!

#19 English to Italian translation on 9.30.2009 at 5:09 AM

Thanks for all the useful information. You have been a great help.

#20 Jump Higher on 5.05.2010 at 1:52 AM

Is it possible to get the sources for this tutorial?

I think, this would be very helpful to learn something about visual states, resizing and databinding

Thank you!

#21 vinod on 6.01.2010 at 1:55 PM

Hi,

I am working on Dashboard, I am Designer, Newbie to Silverlight, Working on Blend 4 I want to animate chartseries column graph its current state is when data changes fade in and fade out effect its default, I want to animate column graph as hight increase and decrease effect, How to do in blend 4

Leave a Comment