Click here to Skip to main content
15,905,563 members
Articles / Desktop Programming / XAML

Expression Blend Number Guesser using DataStore

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
31 May 2010Ms-PL5 min read 31.3K   464   7   1
Creating a Number Guesser in Expression Blend with no code using DataStore
Image 1

Expression Blend DataStore - A Powerful Tool For Designers

Live Example

Microsoft Expression Blend 4+ provides a tool called DataStore. It is a very powerful tool for Designers to create functionality in Expression Blend without writing any code. To demonstrate some of its abilities, I created a number guessing program with no code.

DataStore With SketchFlow

If you have Expression Blend Help documentation installed on your computer, this link should take you to the documentation for the <span id="nsrTitle">SetDataStoreValueAction </span>behavior. However,  I still needed Unni Ravindranathan of Microsoft to explain what the primary scenario was for this tool. The basic use is as follows:

Image 2

Create a Login Screen in a SketchFlow project in Expression Blend.

Image 3

Grab a SetDataStoreAction behavior and drop it on the Login button.

Image 4

In the Properties for the behavior, select Click as the EventName and then click the dropdown next to Property (under Common Properties), and select Create New Property...

Image 5

Enter UserName for the Property name and click OK.

Image 6

Then click the Advanced options box next to Value.

Image 7

Select Data Binding...

Image 8

Bind it to the Text of the UserName TextBox.

Image 9

If you click on the Data tab, you can select DataStore and your will see the UserName property you just created. you can click the Edit data store values icon to edit the values.

Image 10

The default value is "Value".

Image 11

You can click on the box to clear out that value. You can also change the value type if needed.

Image 12

Next, create a connected screen.

Image 13

You can then drag the UserName property from the DataStore onto the page of the new screen.

Image 14

Back on the main screen, set the Navigate to, on the Login button, to navigate to the new screen.

Image 15

Ht F5 and run the SketchFlow. You can enter a name in the User Name box and click Login.

Image 16

It will switch to the next screen, and display the name you entered.

This is also helpful in situations where you want to, for example, have a user check a box on one screen ("Put me on the mailing list"), and then set the state on another screen (show the "Enter your email address" box).

A Number Guessing Program

Keep in mind that a SketchFlow application is really just a Silverlight application with some extra features. Therefore, we can use DataStore in a normal Silverlight application.

Image 17

The first thing that I did was create a simple UI (I know, it is the first word in "horrible design", but if I put in too much styling, you might get confused because everything is in the UI in this example).

Image 18

The diagram above shows what is bound to what.

Image 19

I created a Data Store with two properties; Turns (a number) , and Status (a String).

I then completed the application using only SetDataStoreValueAction, and ChangePropertyAction behaviors.

SetDataStoreValueAction Behavior

Image 20

I dropped three SetDataStoreValueAction behaviors on the SubmitButton.

Image 21

The IncreaseTurns behavior causes the Turns value to increase each time the user guesses incorrectly.

Image 22
  • Note the Trigger type is EventTrigger (later we will demonstrate the DataStoreChanged Trigger)
  • The EventName is Click
  • A condition was set by clicking the "+" next to Condition List under Conditions
  • The top comparison value is bound to the value in the AnswerStatus TextBlock
  • Correct is the value that must NotEqual the top comparison value, to enable this behavior
  • The Turns property is selected as the Property to alter
  • The number one is set as the value to set
  • The Increment box is checked to indicate that the value is to be added to any existing value
Image 23

The SetCorrectStatus behavior changes the Status value to Correct when Guess and Number_To_Guess are equal.

Image 24
  • The top comparison value is bound to the Guess TextBox
  • The bottom comparison value is bound to the Number_To_Guess TextBox
  • The Property to alter is set to the Status Property
  • The value to set is set to Correct

(The SetWrongStatus behavior is like the SetCorrectStatus behavior but with reverse logic.)

Image 25

The ResetButton contains two behaviors that both fire when it is clicked.

Image 26

The ResetTurns behavior resets the Turns property.

Image 27

It simply sets the Turns property to 0.

Image 28

The ResetStatus behavior resets the Status property.

Image 29

It sets the Status property to nothing.

ChangedPropertyAction Behavior and the DataStoreChanged Trigger

Image 30

AnswerStatus is simply a TextBlock (a label), yet I added two behaviors to it. The type of behavior is a ChangedPropertyAction behavior.

Actually the behaviors will be triggered by the change in the DataStore property, so they really are not on the AnswerStatus TextBlock. I just put them there because it seemed like a logical way to organize things.

Image 31

After I drop each one on the TextBlock, I select New to change the TriggerType.

Image 32

I select the DataStoreChangedTrigger.

Image 33
  • Status is selected for Property (the property that will fire the behavior)
  • Status is also selected as the top condition (a condition is not to be confused with the property that can trigger the behavior)
  • Correct is set as the value that Status must equal for the behavior to fire
  • The AnswerStatus TextBlock is selected as the element to be altered
  • Foreground is the property on the TextBlock to be altered
  • The Solid color brush is selected, and the color blue is selected

(The WrongStatus behavior is like the CorrectStatus behavior but with reverse logic.)

A More Powerful Expression Blend For Designers (Non-programmers)

The Expression Blend team has been consistently introducing functionality that allows non-programmers the ability to create Silverlight applications. Primarily, this is intended to allow non-programmers the ability to design Silverlight applications using "View Model Style". However, there is no reason to limit the functionality to just that purpose.

XAML is a powerful mark-up language that is capable of producing, incredible visually appealing applications, using advanced, yet, easy to use tooling. I believe that the Expression Blend team is only getting started, and future versions of Expression Blend will allow programmers and non-programmers, to do some truly amazing things.


  • 31st May, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

Written By
Software Developer (Senior)
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of,, and

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

Comments and Discussions

GeneralExcellent, even I followed it!!! Pin
Alan Beasley2-Jun-10 7:53
Alan Beasley2-Jun-10 7:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.