Silverlight – Databinding

When I was learning DataBinding in both .NET 1.0 and .NET 2.0, I quickly discovered that most of what I learned about DataBinding for ASP.NET was useless as I moved to Windows Forms and what I learned about DataBinding for Windows Forms was useless when it came to developing for ASP.NET.

So it really shouldn’t be much of a surprise that DataBinding in Silverlight has little to nothing to do with DataBinding in ASP.NET or Windows Forms.

While there ARE similarities between the three, you’ll do yourself a huge favor if you remember that you aren’t in Kansas anymore and start from scratch.

While the first place to start looking at DataBinding might be at the control level, I think for most of us, the best place to start looking at DataBinding may be the data itself.  To start with, we can’t bind to a database directly.  So that leaves us with binding to something else entirely.  That something else is the DataContext.  Think of the DataContext as the DataSource of Silverlight.  It’s not exact, but it will get us going in our thinking.

The primary difference between the DataSource from our ASP.NET and Windows Forms code and the DataContext of Silverlight is that a DataSource lets us deal with a collection while a DataContext deals with one “Row” at a time.

So to implement the simplest of databinding, all you need is an object with properties that you can bind to.  Let’s go with the good old stand by, Person:

public class Person
{
    public string First
    {
        get;
        set;
    }

    public string Last
    {
        get;
        set;
    }

}

Now, each element in our XAML has a property associated with it called DataContext.  Remember I said this was like the DataSource property?  Well, here’s where it looks similar.  To get a person associated with our GUI, we need to assign the person to the DataContext property of the elements we want to bind.

So given the following XAML:

<UserControl
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="390" Height="382" Background="#FFE1BABA">
    <StackPanel Height="Auto" Width="Auto">
        <TextBlock x:Name="m_textBlockFirst"
                   Height="Auto" Width="Auto" Text=""
                   TextWrapping="Wrap"/>
        <TextBlock x:Name="m_textBlockLast"
                   Height="Auto" Width="Auto" Text=""
                   TextWrapping="Wrap"/>
    </StackPanel>
</UserControl>

We can either bind to each control explicitly:

Person p = new Person();
p.First = "Dave";
p.Last = "Bush";
m_textBlockFirst.DataContext = p;
m_textBlockLast.DataContext = p;

Or we can bind to a top-level element.  In this case we can bind to the UserControl that wraps our controls:

this.DataContext = p;

All that is left is to tell our TextBlock elements what properties in the DataContext to look for when they bind.  We do that with the binding statement.  Just change the TextBlock elements to look like this:

<TextBlock x:Name="m_textBlockFirst"
        Height="Auto" Width="Auto" Text="{Binding First}"
        TextWrapping="Wrap"/>
<TextBlock x:Name="m_textBlockLast"
        Height="Auto" Width="Auto" Text="{Binding Last}"
        TextWrapping="Wrap"/>

What you are probably wondering now is, “How do I bind to data in a database on my server?  How do I wire up First, Previous, Next, and Last buttons?  How do I wire up list boxes and grids?”

All in due time, grasshopper.

Other places talking about Silverlight DataBinding:

Rockford Lhotka – Interesting Silverlight data binding “feature” – But in Silverlight, data binding is perfectly capable of calling this code. Worse, the reflection PropertyInfo object for this property returns true for CanWrite, so this appears as a read-write property to any code. …

SingingEels : Silverlight DataBinding Basics – Silverlight DataBinding Basics. (Nov 22 2008 – 07:39:31 PM by Timothy Khouri) – [print article]. One of the most common uses of “Rich Interactive [web] Applications” is that of manipulating data. Silverlight enables developers to build …

Silverlight: Data-binding Enabled/Disabled Items on ComboBox – Silverlight: Data-binding Enabled/Disabled Items on ComboBox · 30days, Main Content Add comments. If you want to databind some class to the CombBoxBox in Silverlight you can run into a problem if you want to have some items disabled. …

Caleb Jenkins | Developing UX » Silverlight Databinding: Acme … – Silverlight Databinding: Acme Insurance Demo · The Fit in February Developer Challenge gains momentum! Get Fit in February Contest – Win Visual Studio Team Suite MSDN Subscription! …

Nick on Silverlight and WPF : ChangeableObject and ValueConverter … – Whenever I do databinding-intensive apps (both Silverlight & WPF), I find myself writing a fair amount of boilerplate code. If you want change notifications on your class, you need to inherit from INotifyPropertyChanged, …

Related Post

  • Silverlight – Wire up your form for programmingSilverlight – Wire up your form for programming As I mentioned a couple of weeks ago, learning Silverlight is a lot more about relearning some basic assumptions than it is about learning a new language.  We've already looked at the basic layout ...
  • Silverlight – Databinding ListBoxSilverlight – Databinding ListBox A couple of weeks ago I introduced the concept of databinding in Silverlight.  If you missed it you might want to go take a look because this post assumes you know the basics already. You shoul...
  • Silverlight – Databinding to a Web ServiceSilverlight – Databinding to a Web Service In the last several posts, I’ve demonstrated various ways of getting data onto the screen.  What I’ve purposely omitted up until this point is how to update this information. So let’s start ...
  • Silverlight – Navigating DataSilverlight – Navigating Data Last week I demonstrated how to access data from a web service in Silverlight and display it on the page.  Today we are going to continue on with that demo and look at how to navigate through...
  • More on SilverLight Developer InstallationMore on SilverLight Developer Installation If you followed along with the install instructions last week and then went to do some development, you probably noticed that the Visual Studio environment does not allow for WYSIWYG/Drag and Drop...