In this section we will see how we can break our pages into small pieces by the use of User Controls. If you have worked even once on Silverlight you will see that UserControl is the root Element. So whenever a Silverlight application is displayed in a browser then the first thing that a browser does instantiates the Root UserControl of the start page of the Silverlight application. A User Control can have any number of layout containers in it, it has its own code behind and has an entire system that builds an application. This is concept is extended by Silverlight by moving the pieces of the user control and moving them to the individual documents.

• Create a new Silverlight application Expression Blend.  In the UserControl add 4 girds and in each grid add a rectangle and give that rectangle a different fill from the others.

Expression Blend 4 : Grids

• Now right click on the 1^st grid and select Make Into User Control. Build the solution.

Expression Blend 4 : User Control

• We will see that the our application MainPage is still the samebut if we see the Objects and timeline the grid that we converted to User Control is replaced the UserControl. Also we will see and exclamation mark. Once we build our project it goes away.
• Now if we go and change something in the user control we will see that the change is appearing in the MainPage but with and exclamation mark stating that something has changed.
• But you may need to pay attention when you are working with resources and user Controls. Let me tell you what exactly I am talking about. Just Select a TextBlock and drag it onto the Blue Rectangle.

Expression Blend 4 : Text Blocks

• Type some text into the textblock. Come out of the edit mode by pressing ctrl + Enter. Now scroll down to the Text properties of the TextBlock and select the Font as Broadway and Font Size as 20 pt.

Expression Blend 4 : Font Family

• Now click on the property marker next to the Font Family and select Convert to new resource. Name it as MyFont.

Expression Blend 4 : Font Family Resource

• Now let’s go ahead and create another text block in the Green user Control. Now try to use the local resources while the text of the textblock is selected.  We will notice that while we are in edit mode we cannot create or use resources.

Expression Blend 4 : Font Family Resource

• Now let come out of the edit mode and select the local resource MyFont to set the font of the Shopping Cart.

Expression Blend 4 : Font Family Resource

• If we place a textblock on the user control and try to use local Resource MyFont than it is not available because we have saved that MyFont as the local resource in the MainPage document.

Expression Blend 4 : Font Family Resource

• Now lets add another text block to the bottom grid and use the local Resource MyFont.

Expression Blend 4 : Local Resource

• Now let’s make the bottom grid into a user control and now we will see that the Textblock still is using the MyFont resource.

Expression Blend 4 : Local Resource

• Now lets go to the resources tab and expand the UserControl and we will see that the MyFont Resource is present there.

Expression Blend 4 : Local Resource

• Let’s drag MyFont resource to application level so that all the control can use it.

Expression Blend 4 : Application Resource

• Now if we go to the top user control and use the MyFont resource.

Expression Blend 4 : Application Resource

• Let’s say now we have a requirement of changing the font to some other font. That should be easy right. Go to the Resources tab and change the font to Courier New. You will be surprised to see something like below.

Expression Blend 4 : Application Resource

• This is because the at value change the resources might not be updated. So let’s hit ctrl + Shift + B. Still the bottom control is not refreshing.

Expression Blend 4 : Application Resource

• The reason is that when we converted that grid into a User Control it realized that it is referring a resource that it will not have access to when it is converted to a User Control so what it did was created a resource named MyFont in the user Control itself. We can see we navigate to the resource of the userControl2.

Expression Blend 4 : Application Resource

• So let’s delete the resource of the UserControl then we will get a  message like below. So we will select don’t fix and so the UserControl will still be using the MyFont and will refer the application level resource.

Expression Blend 4 : Existing References Found

• Now when you build the application everything should be fine.

The code this post can be found here.

Any questions, comments or feedback is most welcome.

Working with Data in Expression Blend 4

Element to Element Data Binding

In this section we are going to see how we can use data binding in Expression Blend. We will see how we can create sample data sources and how to use them in data binding.

Data binding is a functionality that both Silverlight and WPF have that helps us set the property of an element to an external data source. That data source can be xml if we are using WPF and can be any CLR object if we are using Silverlight or WPF. It could also be a sample data source. When we apply data binding to an element then that element does not get its value directly but it has to go to some other location for getting its value. This other location can be another element or a database or an xml.

• Let’s have a look at the element to element data binding. Open Expression blend 4 and create a new Silverlight Project.
• Now go to the tools pallet and select rectangle.

Expression Blend 4 : Rectangle

• Now create a rectangle by pressing the left button of the mouse and dragging it on the artboard.

Expression Blend 4 : Rectangle

• Now go to the properties of the rectangle and set the horizontal alignment to stretch and left and right margins to 0.

Expression Blend 4 : Rectangle Properties

• Let’s go back to the tools pane and grab a slider and drop it on the artboard.

Expression Blend 4 : Slider

• If you have a look at the properties of the slider you would see values like Maximum (The maximum value of the slider), Minimum (the minimum value of a slider), SmallChange (the value that will change when user has focused the slider and uses the up and down arrow key to change the value of the slider), LargeChange (the value that will change when do a mouse click at any location on the slider track). Let’s set these properties as shown below.

Expression Blend 4 : Slider Properties

• Now let’s setup the data binding. There are two ways to set the data binding: one way or two way. In one way data binding only one property can change the other but not vice versa. In two way data binding both the properties can change each other. In this case we want only one way binding so that the width of the rectangle can change on the change in the slider. So let’s select the rectangle and go to the width property and click on the property marker next to it.

Expression Blend 4 : Rectangle Property Marker

• And select element property binding.

Expression Blend 4 : Element Property Binding

• Now our cursor has been moved to the object picker mode so we need to point to the element with which we want to do the property binding. In this case we will move our cursor to the slider and click on the slider.

Expression Blend 4 : Element Property Binding

• Once we will click on the slider we will get an option select which property of the slider we want to bind to and we will select value.

Expression Blend 4 : Element Property Binding

• The moment we do this we see that the width of the rectangle is changed and the Width property has a yellow rectangle around it showing that this property is getting its value from some other location.

Expression Blend 4 : Element Property Binding

• Now we can run the application and see that the width of the rectangle will change as we change the slider value.

Expression Blend 4 : Element Property Binding

Two Way Data Binding

In this section we will see how we can create two way data binding. Along with the Slider we will provide a textbox to modify the width of the rectangle.

• Let’s drag out a textbox on to the artboard.

Expression Blend 4 : Element Property Binding Two Way

• Now go to the text property of the textbox and click on the property marker and select Element Property Binding.

Expression Blend 4 : Element Property Binding Two Way

• Select the slider control again and select its value property again as we did in the case of the rectangle. Also we will select the TwoWay Binding so that both the controls i.e. TextBox and Slider can change each other’s value.

Expression Blend 4 : Element Property Binding Two Way

• Now we can run the application and change the value of the slider or textbox and we will see that the width of the rectangle is changing and the other control’s value is also updated.

Data Binding with Data Sources

In this section we will see how we can use data binding with data sources. Data sources can either be xml or any other CLR object. As we know that xml works only with WPF so for this demo we will have to use data binding with sample data. When we work on an actual project we have CLR objects in which data is stored and they definitely follow some schema. So we can build up sample data in Blend to represent that sample data. So let’s get started.

• Create a new project in Blend. Navigate to the data tab in the right panel. If the data tab is not visible then goto the window menu of blend and select data.

Expression Blend 4 : Data

• Click on the Create Data Source.

Expression Blend 4 : Create Data Source

• And select New Sample Data. You will also see option to create Sample data using XML or Class. If we have those then we can use them. When we select any of those two options then blend will not exactly use those but take them as a basis for generating sample data.

Expression Blend 4 : Add new Sample Data

• Give the Sample Data Source some name and select the define in as project. We do want to enable sample data when application is running so keep It checked.

Expression Blend 4 : Add new Sample Data

• When we click ok we will see that the data source appears in the data tab at project level and we have a collection with properties in it.

Expression Blend 4 : Sample Data

• We can also see that in the Projects that a new folder is added named SampleData. When we expand it we see that there is a xaml in it which will store all the data and an xsd which is the schema.

Expression Blend 4 : Sample Data Folder

• If we open the MyAddresses.xaml, we will see that we have some items already added in the data source. We modify their values or add new items.

Expression Blend 4 : Sample Data xaml

• Let’s go back to the data tab and click on Edit Sample Values as shown in the image below.

Expression Blend 4 : Edit Sample Data

• We will see something like below. We can edit the values or the types of these properties.

Expression Blend 4 : Edit Sample Data

• Let’s rename the properties as shown below. Also lets change the specification of the Address property as shown below.

Expression Blend 4 : Edit Sample Data Property Type and Format

• Also similarly change the Format of name to Name. When we do that if you go back to Edit Values we will see that the data is has been populated according to the format selected.

Expression Blend 4 : Edit Sample Values

• Let’s add email, phone number  and CustomColor properties.Also modify the format accordingly

Expression Blend 4 : Edit Sample Values Format

• And we will see data something like below.

Expression Blend 4 : Add Properties in Sample Values

• Now let’s start using this data that we have created. Drag and drop the Collection onto the artboard.

Expression Blend 4 : Create Databound ListBox

• And a listbox will be automatically created. And each entry will show all the fields. Also the yellow rectangle around the datasource shows data binding.

Expression Blend 4 : Create Databound ListBox

• Let’s improve the look of the List Box by the use of Data Template. Right Click the ListBox and Go to Edit Additional Template à Edit Generated Items (ItemTemplate) à Edit Current

Expression Blend 4 : Edit Generated Items

• We would something like this. Let’s delete the Color textblock as we do not want to display the color in this way. When we delete that textblock you would see that that textblock is deleted from each item and that’s the way templates work.

Expression Blend 4 : ListBox DataTemplate

• Now let’s select the listbox from the breadcrumb bar and stretch it.

Expression Blend 4 : ListBox DataTemplate

• Now let’s go back to the template and change the  orientation of the stackpanel to horizontal from vertical. And then build the solution. We will see something like below.

Expression Blend 4 : StackPanel Orientation

• Lets give specific width to all the textblocks and we will see a clean layout.

Expression Blend 4 : StackPanel Orientation

• Let’s delete all the textblocks except the Name TextBlock. Then let’s go back and select the listbox and reduce its width.

Expression Blend 4 : DataContext

• Now go to the data tab and select the view mode to details view.

Expression Blend 4 : DataContext

• Now let’s drag the Name field on to the art board. We will see that a grid is created along with textblock as its child. Now whenever we select the item in the listbox we will see that the content of the textblock in the grid is changing. This happens because the grid that got created has a concept called Data Context. The grid has its data context set to the list box. So as soon as an item is selected in listbox then the the value changes in the grid as the items in the grid have already specified what item of the listbox they want to display. We can other fields as well in the grid and see that their value change as the selection of the listbox changed.

Expression Blend 4 : DataContext

• When we run the application we will see something like below.

Expression Blend 4 : Run App with Sample Data

• Lets go to the grid à Background à Property marker à Data Binding. We will a window like below.

Expression Blend 4 : Data Binding Background

• Select Customcolor string and the background of the grid is bound to the color string of the selected item. The value conversion is going on in the background.

Expression Blend 4 : Data Binding Background

• When we run the application we see something like below.

Expression Blend 4 : Data Binding Background

The code for this post can be found here.

Any questions, comments or feedback are welcome.

Control Customization

The whole idea behind WPF architecture was that the presentation layer is completely separate from the functionality. This means a button may look like an image or a circle but still have all the functionality of a button.

Custom Controls

• Create a new project named CustomControls

• Before we start customizing a control let’s talk about style and template as this will be required for control customization.
  • Styles – A style is a resource that contains a set of property setters. To see how this works lets create a rectangle on to the design surface. Right click on the rectangle and select Edit Style à Create Empty.

• Give the style a name and select its location and click on okay

1. The left breadcrumb shows the Layout Root. As we are working with a rectangle we see a rectangle here
2. The next breadcrumb shows us that we are working with Style. This is represented by an icon that looks like a painter’s palette.
3. The scope that we are working on has changed to RectangleStyle and the name of the style is RectangleStyle1.
4. We see only one element as of now which is the style.
5. All asset creation tools have greyed out as when we work in a style we are restricted to the property of that element which is a rectangle in this case.

• Now let us set some the properties of the rectangle which we will be able to see in the style later on. The properties that are changed are highlighted as red.

• Now let us switch to the XAML of the style and we could see a set of setters as a part of the style of the rectangle which contains the name of the property of the rectangle and its value. Also it has a target type which would specify as to which Element type to target to. You can also see how the rectangle refers the style.

• Now just click on the Rectangle in the Breadcrum bar to go back to the Root Document.

• When we right click on the rectangle,we would see option to Edit the current style of the rectangle or edit a copy that style or create a completely new style or apply resource which can be any other style already created.

• Now just create a rectangle onto the design surface and you would see that the Fill is not set for the rectangle the way it is when create a rectangle by default the reason is that blend expects you apply a style to this rectangle as the last rectangle you were working with had a style. So just right click the rectangle and go to Apply resource and select RectangleStyle1.

• Now close your document and open it again and create a rectangle and you would see that the rectangle Fill is set by Blend to default White. Even when you apply the style this white Fill is still there, this is because this fill is set on the rectangle level along with the style and hence overrides the style Fill whereas all the other properties are inherited from style.

• Now just click on the property marker next to the Fill property of the rectangle and select reset and you would be able to the Green Fill of the rectangle again.

• Templates– The limitation of styles is that style can set properties on the element you are working with. This means that if you are working with a rectangle you can apply that style only on a rectangle. Whereas the template property is on the control which sets the entire Visual Tree. All of the visual states and entire stuff that makes the control.
  • Let’s create a button on the panel. When I right click it instead of the edit style option I have Edit template option in which I see option of Edit a copy which will create a copy of the existing default template of the Button and give us to edit and a Create Empty will create a new empty template for us to edit.

• Now when click on Edit a Copy you would see a dialog box like below asking to give a name to the style, its asking to create a style and not a template because you can only apply a style to a control and the template is a part of the style. You can also see the option of apply to all. This option will actually create the style with no name nad apply to all the button in its scope.

1. We are working with the template within the style within the button. You can have a look at the xaml and see that the style has a target type set as button and the setter property template has visual states, border, grid, rectangle, etc which the complete visual tree of the button and will decide how the button looks and behaves.
2. You can see the Button Visual Tree here.

• Now just right and delete all the elements inside the grid so that we can create the visual of our button from scratch. And then press ctrl + 9 to zoom into the grid we are working on.

• Now add an ellipse and set the alignments to stretch and margins to 0

• Now Go to the assets library and add a couple of rigs to the corners of ellipse. Also now add a textblock on the ellipse and rotate it and make the text as button. Now run the application and you would be able to the button.

• Now go over to the states and we would see how the button looks at various states like mouse over and mouse pressed, which is the same as of now as we have not added any effects. Now let’s change what the button does on mouse over and Pressed. Just select MouseOver in the states and change the color of one of the rings and then select Pressed state and change the color of the other ring. Now run the application and see if the effects work at runtime as well.

• Now let’s add some transition speed. Now select Mouse Over and change the textblock foreground to white and ellipse fill to black and also change the Default Transition speed from 0s to 3s and when we run the application we will see that all the animation states  transition very smoothly.

• Now let’s add a new transition. Click on the Arrow+ in mouse over and we could see the transitions we could use. Select the 1^st option.

• We can also set the transition effects.

• Now you can add new button and apply this style we have created.

• Now if you set the background on the button it will not be applied to the button because it is taking its values from the template. Now we need to modify the template

So that the value is picked up from the control. So go ahead and edit the current template and select the ellipse. Now go to the property marker of the fill and select Template Binding à Background

• When we change that the value will be coming from the parent and not the template as we have template binded the control to parent. Now if we go to the Mouse Over transition we will see that background color is not changed. So we need to decide as to do we want to template bind it to parent of Control Template.
• Let’s Template Bind the Text of the TextBlock to Button Content. So select the TextBlock in the template and goto Common Propertiesà Text and click on the PropertyMarker and select Content as button being the Content Control we need to bind to the Content of the Button. But this work fine only till our content of the button is text.

• So we have any other content then we should use content presenter for it. So add one to the template and align it to center and reset all the margins and rotate it the way you want.

Any Comments, feedback or suggestions are most welcome.

Resources in Expression Blend

We will be using Microsoft Expression Blend 4 for this tutorial.

Resources are integral part of WPF and Silverlight. A resource in nothing but a name and value pair. Say for ex  - If I talk to a 2^nd grade student and say my phone’s color is #FF000000, he would not understand what’s that that but when I say my phone’s color is black, he might or might not know what I am talking about.

This is the concept used by Microsoft behind using resources. This enables us to think in terms of names and labels as opposed to talking about the values. Let see this working in Expression Blend.

• Create a new project in Expression Blend and name in Resources.

• Create a rectangle on to the design surface.

• Go to the properties tab and select the color green. Now when you work for any clients or customer designing applications for them they would have specification of color coding standards they want you to follow. Resources follow the same trend so that you can name your resource and use it at multiple places by just referring its name. We will see how that happens a little later.

 Click on the PropertyMarker as shown in the Image and select ConvertToNewResource. Every property in Blend has a property marker that means we can convert all the property in blend into a resource.   

• Just name the property as MyGreen and click ok.

• Now as would notice a couple of things have changed. Instead of the ColorPicker now we see Color resources and the also the list of resources available. Also as you can see the MyGreen is highlighted It is the Color that I am using currently.

• Now just create a Ellipse and by default you would see that the color selected is the MyGreen color as Blend figures out that MyGreen is the color I am working and probably that’s the color I need.

• Now Select the Fill as Gradient Brush

• Now go to the Property Marker for the Gradient Brush and Go To local resource and select MyGreen. As you see are using MyGreen as both a SolidColor and a Gradient Color. The Color is the same but we are using it at different places.

• Now go to the resources tab at the top and expand that user control and you would see that the MyGreen resource is available in the UserControl Scope.

• Now if we change the color here we are able to change the color at all the controls using this resource. So using resource you don’t have to go to each and every control and change the color.

• Now go back to selection tool and select the Ellipse. Now go to the Fill property marker of the Ellipse and select ConvertToNewResource.

• Name it as BlackToMyGreen.

• Now we see a Local Brush resource is available. You should know that a color is just is a 24bit value that probably represents some transparent color in the spectrum but a brush can be a single color or a set color or something else.

• Now let’s go back to the Resources tab and expand the UserControl again and change the MyGreen to some other value. Now you would see that not only MyGreen has changed but also the BlackToMyGreen has also changed, so this implies that resources can use other resources as well.

Scope of Resources in Expression Blend

Now let’s talk about Scope of resources. Scope of a resource simply means where are we going to look when we are getting a concept. Let’s talk about a 2^nd grader to whom we say my phone is black. Now he might know what is black, if that’s the case he is going immediately know what color you are talking about. Let’s say he doesn’t know what is black so he’s going ask his parents. Maybe his parents are able to answer it or they then go to their parents and ask what does black mean? This is exactly what scope means. You can define a concept at any level – object level, on a parent, on a document, in an application or a resource dictionary. Now when we say MyGreen then Silverlight or WPF will be able to figure out what is MyGreen. 

Let’s see this with the help of an example: 

• Delete the rectangle and grid in the application we are working on and draw 2 identical Grids as shown below:

• Now select the left grid and go to its properties. And select the background as Green.

• You can click on the shortcut key and convert a color to resource.

• And we will name it Grass and we will define it in the grid instead of the usercontrol. 

• Now give a background to the other grid and create a new color resource in that grid named as Grass.

• Clear the brush on both the grids using the shortcut below: 

• Create a rectangle in one of the two grids. And using the color resources make the Fill of the rectangle as Grass. 

• Now using the selection tool drop the rectangle from one grid to another by keeping the alt key pressed. 

• What you see now is that the rectangle is using the local Resource Grass. Whenever an element is trying to figure out the meaning of the defined resources, it first looks into its own defined resources, then its parent resources and if it still is not able to find it will look further up till the root of the UserControl. And if still it is not able to find it there it will look for it in the application resources. But if a resource is defined at multiple levels then the closest one is adopted by the element. i.e. the resource is defined at a parent level as well as the application level then one the parent returns the meaning of the resource then the element stops looking and uses the same.

• Let’s take another rectangle and drop it on the panel and this rectangle also uses the Fill as Grass but is not able to find it. That’s because the Rectangle does not know what Grass is, it asks LayoutRoot but LayoutRoot also does not know what Grass is, then it asks the UserControl which still does not know what grass is. So the unresolved resource gives us a blank fill.

• Let’s go ahead and give it a SolidColorBrush and set the alpha value of it to 100 as whenever we get an unresolved resource blend gives it a transparent white brush. 

• Now convert this to resource and select it to save at the application level.

• Let’s go the resources tab and we see that Grass is defined as different color for different levels.

Resource Dictionary in Expression Blend

Let’s again talk about our 2^nd grader who went to his parents to ask what is black, who in turn ask their parent as to what is black. Say their parent also does not know what is black so what they would do is grab one of the reference guides or resource dictionary and look for black color, if that resource dictionary does not have an answer for blue then they will check in other available resource dictionaries. In this case a Resource Dictionary is a single xaml file that contains key value pairs in it.

Let’s have a look at this with the help of an example:

• Create a new solution in Blend named ResourceDictionaries and create a rectangle in it.

• Convert that into a resource. But we will define it in a new ResourceDictionary.

• As Soon as we do that a new xaml is added to the project. The reason for giving description of MyGreen here instead of the application level is the same as printing all the information in the book in the 2^nd grader example. We can very easily transfer this dictionary to a different application.

• Let’s just create a couple of more dictionaries. Right click the project and select Add new item and select Resource Dictionary and click ok.

• Now we go the rectangle and change the fill color and save it into the resource dictionary 2. Change the color again and save it to the resource dictionary 3.

• Now Delete the rectangle and just drag and drop a new one. What you will see is that this rectangle’s fill is yellow i.e. the color from the last resource dictionary. This happens because Blend creates a merged dictionary. So when a resource is found in a resource dictionary the element will look for any other occurrences of the same resource in all the resource dictionaries and will override the previous values with the new one. Below is how the resource dictionaries look like.

• We can add or remove reference to a resource dictionary using the interface below.

• And when we do the colors will follow a fallback mechanism.

I would like to state here that as of now i.e. Silverlight 4 all the resources are static resource and will take the value at the time instantiation. Where as in WPF we do have Dynamic Resources and at runtime everything will update.

Please find the source sode for the soultions at location below:

http://i.minus.com/1337680217/iM-3YUH7dLJB6ELGpiplpQ/dbuofcNvmgf7Uz.zip

http://i.minus.com/1337680215/Uq65IIajg7rV01b2c715dQ/dbvtJW3hnSasrW.zip 

Any comments, feedbacks or question are most welcome.