Binding simple controls (Textbox, TextBlock, Button, etc)

In this post I will be describing how to bind data to simple controls.  The controls I will discuss are the Textbox, TextBlock, and Button controls however this technique can be used to bind data to other controls.  I will also discuss the use of sample data sources in Microsoft Blend. 

In Silverlight there are 3 types of data binding in silverlight.  They can take the form of one-way, two-way, or one-time.  One-way data binding allows the data bound control to be automatically updated when the property that is bound is changed.  This automatic updating is made possible by implementing the INotifyPropertyChanged.  In two-way data binding the data context can be updated when it is changed and when the user interface is changed it can be sent back to the database to update. 

Blend allows designers to build and bind data sources to controls during design time that can be modified or overridden at runtime.  Binding can be done against CLR objects, sample and live data sources, and custom expressions. In this tutorial we will use CLR Objects for our data binding.  In later more complex tutorials we will use other types of data binding.

Simple controls – Textbox

We will now do a short tutorial demonstrating how to use Blend to do one-way data binding of the String CLR object to a Textbox.  We could just as easily bind to a custom object but we will leave that for the next tutorial.

  1. To get started run Microsoft Expression Blend and create a new Silverlight Application.
    If you have not used Blend before then you will notice that it only creates the Silverlight project unlike Visual Studio which also creates a web site or application to host the silverlight .xap file.  When you run your new application from Blend, it will create a test page to host your silverlight application so you can decide where and how to host it later.
  2. Add a textbox to the LayoutRoot in the MainPage.xaml
    You can do this one of several ways.  You could type in the xaml to create the textbox, but since I am trying to show you how to use some of the GUI aspects of Blend I will show you how to drag-and-drop a textbox onto the LayoutRoot.
    1. Go to the assets panel
      you can do this by clicking on the assets toolbox button (shown here) AssetsImage or the assets tab (shown here)topLeftTabs
    2. In the search box type Textbox
      You will end up with this on your screen.
      TextBoxAssets
    3. Drag the Textbox asset onto the design surface
      You can make it any size you want, put it any where you want and event change the font, color, font size and other attributes.

DataBinding the controlimage

  1. Scroll down to the Common Properties section on the Properties Tab
     
  2. Click the New Button beside DataContext
  3. Check the Show System Assemblies checkbox
    Since we want to data bind to a System.String CLR object we need to select that object.  It is a System Assembly so this checkbox allows us to see it.
  4. Select String and Click OK
    To make it easy to find System.String your can start to type String into the search box and it will filter the results.  Later we will see that this filtering also works on our custom CLR objects.
  5. To Bind to our new property Click the square next to the Text property in the Common Properties section.

Now the textbox is bound to the the string object.  This is not a particularly interesting data binding but it is a data binding. In the next tutorial we will bind to a custom CLR object.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s