Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Connecting elements with binding

From: Silverlight 5 Essential Training

Video: Connecting elements with binding

One of the most satisfying areas in the Silverlight API is the binding framework. Data binding and its affiliated areas are a huge topic, one that deserves its own title. In this chapter, I will concentrate on show you the fundamentals of data binding. With this demonstration, I will start in Visual Studio in a project called ConnectingElementsWithBinding. I will start by showing you this element-to-element sample. Press F5 to run the application. All the examples on this page are using the fundamental element-to-element binding.

Connecting elements with binding

One of the most satisfying areas in the Silverlight API is the binding framework. Data binding and its affiliated areas are a huge topic, one that deserves its own title. In this chapter, I will concentrate on show you the fundamentals of data binding. With this demonstration, I will start in Visual Studio in a project called ConnectingElementsWithBinding. I will start by showing you this element-to-element sample. Press F5 to run the application. All the examples on this page are using the fundamental element-to-element binding.

This type of binding is between elements on the visual tree. The value from one element is synchronized with another element through the dependency system. You can see here I have a calendar. When I click on the day, the information from the calendar is placed in this text box. This is being done to element-to-element binding and through the dependency system. In this example I am selecting a day. I am seeing the positional number found in this text block. Over here I'm binding the day name to the text block. And then finally in this example as I typed text, I'm binding the length of the string that I'm typing to the text block on the bottom.

Let me show you how to create a binding in Visual Studio. To do that, I am going to open SetupBinding. The user interface in this demo has three text boxes. The first text box is going to serve as the source of the data, and the other two text boxes are going to serve as the targets. So I click the target that I am interested in, this text box, and I come down to my XAML and I type in the property name that I want to be bound. The text property on this text box is going to be bound.

Normally, the way you put text in here is you type a string. With binding, I replace the string with a markup extension called Binding. Now I have to tell the binding engine where my source is. My type of source is going to be an element source, so I will use the ElementName binding, and here I have to provide the name of the source. In my case, it's SourceTB. Next, I have to tell the binding engine which property on the source to bind to.

That is done by setting the path property. I want to bind to the text property. Now you can see by looking in my designer that it is bound to the data and the source. Just to prove it, I will run the application by pressing F5, clicking on the Element To Element tab, and typing some text in this top text box. If I move to the second text box and type text, nothing happens in the first one. That's because the default binding is called a one-way binding. I might want to have a two-way binding.

This is especially useful when you are going from a text box back to a data store. Let me show you how you set up a two-way binding. Return back to my XAML, type a comma, and I will set the Mode property. As you can see there are three modes: OneTime, OneWay, and TwoWay. I am going to choose the TwoWay binding and then run the application again. I type text in the first text box. It looks good. I come down to the second text box.

I start typing, and it doesn't look like the binding is working, but it is; it's just when the trigger condition happens. I need to tab out of the text box or move out of the text box for that data to update. If I would like to have it happen instantaneously, I need to change another property. Back to my XAML. The property I am looking for its called UpdateSourceTrigger. I am going to choose this PropertyChanged, which means the binding is updated as soon as the property changes.

Press F5 one more time. Now you see it's going in both directions. You might have noticed there are lot of other properties to set, for instance, RelativeSource binding, StringFormatting, a FallbackValue, converters, a lot of different parameters. I am going to look at the converter in the next demo. Rather than hand-editing by XAML, I can use Expression Blend or Visual Studio to create the binding for me.

I need to delete this comma here. Choose the third text box. Now I am going to use Visual Studio to set the binding. To do that, I will use the Property window. Come over to the Property window. I will come down here and click the Text property, and you might notice that there is a tiny, little icon here. I am going to click on this icon and choose Apply Data Binding. I get a dialog, and in this dialog I can set up my binding. I am going to do an element-to- element binding, so I will click ElementName here. Visual Studio reads through all of my elements that have names and shows then in this list. I will choose SourceTB as my source. Then I can come down here to the Path section.

That shows me all the eligible sources. I want to use the Text property on the source, and then I will press Enter. You can see it's working, and you can also see down here what was written by Visual Studio. This is a nice solution, and simple to set up. There are times when I might want to run code during the binding process. The most common scenario for this is data conversion. That means the data in the source is not compatible with the data target. Silverlight provides the Converter property on the binding, which makes it easy to add a conversion.

To do that, I need to write a .NET type. I have two converters already in this project: ReverseStringConverter and TextToBooleanConverter. For today's demo, I will look at ReverseStringConverter. To create a converter, you need to implement the IValue converter interface. What that means to me is that I have to write a Convert function and I have to write a ConvertBack function. In my Convert function, I get the incoming value through this parameter here. You notice I also get a number of other parameters, but for this demonstration, we are going to concentrate on this first parameter.

This is the data coming from the text box. So what do I do with that data? I take it and store it in a string variable. I then take the array of chars that's inside that string and store it in a charArray over here. Then I use the built-in Array.Reverse function to reverse to chars, and then I generate a new string out of that and return the string. So let's review. A string comes in from the source. It gets converted and sent back out of the string to the target. Go back to my SetupBinding, click on this third text box again, go down to the text property.

Notice how the symbol is different this time. It has a little yellow cylinder. That represents that it's data bound. I will click here, choose Apply Data Binding, and now I will come down to the Converter section. The Converter section lists all of the available converters that implement IValue converter that are in scope in my project. I want the converter that's in my code, so I'll click here, and I will choose to ReverseStringConverter. To use the converter, it needs to be instantiated. Visual Studio is offering to do that for me with this link here, Create New, so I will do that.

I will choose the default name and the default location and click OK. And as you can see in the text box, the text is reversed. What did Visual Studio on my behalf? Up at the top in my UserControl.Resources, it created an instance of my ReverseStringConverter and then in my binding, it added this property, ConverterEqual, and then it's choosing a static resource lookup to find that instance of the converter. I mentioned earlier that you can also use Expression Blend to create your binding.

I will show you how to do that now. I am inside Expression Blend and I have opened the same project. I am in the page called BindingInBlend. This has an image with a few borders around it and a couple of slider controls at the bottom. What I want to implement here is a desaturation filter on this picture. I am going to use on of the built-in effects in Blend to do this. So I will go to my Assets pane. I will scroll down to the Effect section. These are pixel shader effects. I will choose this first one, Bloom-Desaturated, and drag it and drop it on my picture.

That looks nice. The key thing here is that Microsoft implemented this effect and they added dependency properties. You can see these properties over here on this side. These are bindable properties. So I can bind the BaseIntensity and the BaseSaturation level. To do that, I click on this little rectangle here called the Property peg. I will click on this and choose DataBinding. Notice the yellow color there? That is very important; keep that in mind. I will click DataBinding and then I am going to bind to an element.

The element that I want is this first slider, and then the property that I want to bind to is down at the bottom, the Value property. And then I will click OK. Remember that yellow color? The property peg is now yellow and so is the border around this BaseIntensity. That tells me at a glance that this is a bound property. Let me add the BaseSaturation binding. Go through the same steps, and I am ready to run the application.

I will press F5, click here on the binding in Blend, and as the user drags the sliders, they can change the desaturations levels. That's nice. I really love the data binding in Silverlight. This movie has shown some of the element-to element binding features. In the next movie, you will see how to bind elements to business data.

Show transcript

This video is part of

Image for Silverlight 5 Essential Training
Silverlight 5 Essential Training

106 video lessons · 5399 viewers

Walt Ritscher
Author

 
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      53s
    2. Using the exercise files
      48s
  2. 35m 0s
    1. Overview of Silverlight
      3m 29s
    2. Setting up a developer computer
      2m 46s
    3. Installing the Silverlight Toolkit
      2m 21s
    4. Exploring the toolkit samples
      2m 35s
    5. Using Visual Studio 2010 to create a Silverlight project
      5m 10s
    6. Using Expression Blend to create a Silverlight project
      3m 13s
    7. Getting to know the Visual Studio interface
      8m 15s
    8. Working in the Expression Blend interface
      7m 11s
  3. 29m 46s
    1. Understanding the Visual Studio project structure
      3m 38s
    2. Creating a Silverlight page
      3m 17s
    3. Compiling your first application
      5m 0s
    4. Using other assemblies in an application
      5m 45s
    5. Deploying a Silverlight application
      3m 43s
    6. Understanding the startup process for an application
      3m 13s
    7. Understanding how users get Silverlight on their computers
      5m 10s
  4. 16m 59s
    1. Exploring the relationship between XAML and .NET
      3m 57s
    2. Using C#
      7m 16s
    3. Exploring the code-behind file
      5m 46s
  5. 43m 22s
    1. Working with XAML elements and Property attributes
      4m 56s
    2. Investigating XAML namespaces
      7m 31s
    3. Converting XAML properties with TypeConverters
      5m 1s
    4. Working with Property elements
      4m 24s
    5. Assigning runtime data with XAML markup extensions
      4m 21s
    6. Digging into the dependency property system
      6m 12s
    7. Creating a custom dependency property
      4m 42s
    8. Understanding attached properties
      6m 15s
  6. 9m 35s
    1. Debugging your code
      5m 17s
    2. Special Silverlight debugging techniques
      4m 18s
  7. 36m 0s
    1. Understanding layout
      4m 55s
    2. Using DockPanel and WrapPanel
      4m 2s
    3. Exploring sophisticated layouts with the Grid
      6m 40s
    4. Absolute positioning with the Canvas panel
      5m 20s
    5. Scrolling content with the ScrollViewer
      3m 28s
    6. Adjusting content alignment, margins, and sizing
      5m 6s
    7. Using the TabControl
      2m 17s
    8. Manipulating elements with transforms
      4m 12s
  8. 20m 32s
    1. Painting the user interface (UI) with SolidColorBrush
      6m 7s
    2. Getting colorful with gradient brushes
      3m 15s
    3. Decorating elements with ImageBrush
      4m 56s
    4. Creating effects with VideoBrush
      6m 14s
  9. 25m 42s
    1. Understanding routed events
      3m 12s
    2. Wiring up event handlers in Silverlight
      6m 4s
    3. Understanding event bubbling
      4m 39s
    4. Exploring mouse events
      7m 43s
    5. Exploring keyboard events
      4m 4s
  10. 32m 31s
    1. Displaying text on the screen
      3m 24s
    2. Gathering text input from the user
      5m 30s
    3. Showing complex text with RichTextBox
      6m 7s
    4. Understanding text overflow and text linking
      3m 14s
    5. Searching content with the AutoComplete type-ahead control
      6m 45s
    6. Using and embedding Silverlight fonts
      7m 31s
  11. 26m 47s
    1. Understanding content controls
      5m 7s
    2. Understanding button controls
      6m 16s
    3. Using the BusyIndicator
      4m 40s
    4. Showing tooltips
      4m 34s
    5. Changing content size with ViewBox
      1m 39s
    6. Exploring more controls
      4m 31s
  12. 55m 36s
    1. Connecting elements with binding
      9m 54s
    2. Using business data in a binding
      9m 21s
    3. Listing data with ItemsControls
      6m 39s
    4. Digging into the DataGrid
      8m 28s
    5. Using the DataForm
      3m 49s
    6. Storing data on the client
      7m 10s
    7. Debugging XAML bindings
      5m 41s
    8. Charting data
      4m 34s
  13. 24m 36s
    1. Creating an Out-of-Browser (OOB) application
      6m 16s
    2. Controlling aspects of an OOB application
      2m 49s
    3. Alerting the user with notification windows
      7m 13s
    4. Hosting HTML content in Silverlight applications
      8m 18s
  14. 30m 2s
    1. Exploring Silverlight trust levels
      3m 51s
    2. Creating an elevated trust application
      5m 57s
    3. Reaping the benefits of XAP signing
      6m 5s
    4. Making cross-domain calls
      5m 1s
    5. Getting started with COM Interop using the Speech API
      4m 21s
    6. Using COM Interop to interact with Microsoft Office
      4m 47s
  15. 16m 33s
    1. Showing child windows
      3m 48s
    2. Using a child window as a dialog window
      5m 7s
    3. Creating native windows
      2m 53s
    4. Maximizing a window with full screen mode
      4m 45s
  16. 13m 20s
    1. Dynamically loading UI content with user controls
      4m 46s
    2. Using the Navigation Framework
      8m 34s
  17. 9m 28s
    1. Using resource files
      3m 53s
    2. Using images in an application
      5m 35s
  18. 16m 32s
    1. Playing audio
      4m 27s
    2. Playing sound effects
      5m 4s
    3. Viewing video content with MediaElement
      4m 58s
    4. Changing video playback speed with TrickPlay
      2m 3s
  19. 14m 40s
    1. Capturing video with a web camera
      4m 16s
    2. Working with a microphone
      3m 47s
    3. Creating print output
      6m 37s
  20. 22m 35s
    1. Understanding Silverlight animations
      4m 35s
    2. Creating animations
      7m 52s
    3. Controlling animations
      4m 18s
    4. Simulating physics with animation easings
      5m 50s
  21. 27m 47s
    1. Placing XAML resources within a FrameworkElement
      6m 47s
    2. Centralizing settings in styles
      4m 8s
    3. Creating an alternate control UI with ControlTemplates
      6m 29s
    4. Dressing up your data with DataTemplates
      4m 33s
    5. Explaining the VisualStateManager: a simple way to manage control states
      5m 50s
  22. 10m 55s
    1. Handling global errors in a Silverlight application
      5m 46s
    2. Showing an application loading screen
      5m 9s
  23. 10m 48s
    1. Integrating with XNA
      7m 40s
    2. Exploring data analysis with PivotViewer
      3m 8s
  24. 1m 6s
    1. Goodbye
      1m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Silverlight 5 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.