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.

 

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

 

• 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.

 

• 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.

 

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

 

• 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.

 

 

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

 

• 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.

 

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

 

• 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.

 

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

 

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

 

• Now if we go to the top user control and use the MyFont 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.

 

• 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.

 

• 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.

 

• 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.

 

• 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.