Friday, 2 December 2011

Lesson 5: Working with user controls

You have already seen and used some of the available controls like TextBlock, Button etc in Silverlight . Well, you can create your own controls also, making use of the existing controls. Such controls are also referrred to as User controls.

There may be many reasons to use our own controls, like extending functionality of the control. In this lesson, we will see the following.

1. Creating a simple user control.
2. Adding additional functionality to the user control.
3. Using the user control in our application.

Step 1.  Creating a simple user control.

1. Create a new Silverlight application in Expression Blend and Go to the Project pane on the right.
    Name it Lesson5.
2. Right click on the Lesson5  ->  Add a new Item

3. Now select  User Control  and name it MyButton.xaml

4.  In the toolbar to the left, select the Grid control and double click it.

5. Stretch the grid to fit the screen, and change the color of the grid .  To change the color, click the second tab highlighted below and drag your mouse on the colors .   

6. To view the xaml, click on this icon present beside the properties pane.
Press V to get the selection tool.
Now Resize the d.DesignWidth  and d.DesignHeight to 450 and 50 respectively

6.  Drag a button and a textbox (right click the textblock icon to get the options)

Press V to get the selection tool.
and arrange the control as shown below

7.  Select the textbox and edit the name of the textbox in the top right corner, as shown in  the picture.
     similarly , chage the name of button to btnSubmit.

8. Remove the content of the textbox, and change the content of button to Submit.

Step 2: Adding functionality to the user control

1.  Now select the button, and click on the events icon in the properties pane and type an event handler name beside Click event.

2. Double click on event handler name to generate the event handler stub.

3.         Now add a public variable to the class.     public string name;
              We will take the text from the textbox and  assign it to the variable name.
              So inside the button click event handlet, add the following code.
              name = txtbox1.Text;   

4. Build the project once by pressing Ctrl + Shift + B . and go to MainPage.xaml.
       The user control will now be available in the toolbox to the left.
      ( Click the expand link , and go to the project category inside it. )

5.  You can now drag the control onto your grid .  In fact, you can drag multiple copies of the control.
  Add a name to the controls in the top right corner, as mentioned earlier in step 7.  i am giving b1, b2,b3 respectively.

6.  In the Mainpage.Xaml.Cs , you can access the property name  from these controls if you want.

Tha advantage, as you can see is reusability.  Instead of draggin 3 text boxes, and 3 buttons, and assigning event handlers to each of them , we did it only once, and reused the component.    :)   Users controls are very useful , and we'll see more of them in the lessons to come.   For  more detailed examples, please watch the video.

No comments:

Post a Comment