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

Expression Blend and Silverlight

I am Jonathan Cartwright, a user centered design enthusiast and software engineer by trade.  I am starting this blog to provide some details on how developers can use Expression Blend to help them layout and bind data to controls.  I feel that by using blend to perform as much as possible frees up a developer and development team can focus on building interactivity.

In this blog I intend to describe how Blend users can data bind various controls in Silverlight and the Silverlight toolkit.  My hope is that by providing this information in a tutorial format developers and designers will be better equipped to use all the power of Blend.

Table of Contents for Blend Data Binding Posts