Expression Blend 4 : User Controls

 

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

Expression Blend 4 : Grids

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

 

Expression Blend 4 : User Control

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

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

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

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

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

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

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

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

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

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

Expression Blend 4 : Application Resource

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

 

Expression Blend 4 : Application 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

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

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

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *