print barcode labels in vb.net Creating Custom Controls in Silverlight in C#.NET

Creator PDF 417 in C#.NET Creating Custom Controls in Silverlight

As I mentioned at the beginning of the chapter, creating a custom control does not need to be difficult. Of course, the work involved depends on how complex your control needs to be. As you ll see, the custom control you ll create in this chapter is relatively simple. Before you get to that exercise, let s take a quick look at the two options for creating custom controls.

You have two main options for creating custom functionality in Silverlight: With a UserControl: The simplest way to create a piece of custom functionality is to implement it with a UserControl. Once the UserControl is created, you can then reuse it across your application. As a custom control: The content that is rendered is built from scratch by the developer. This is by far the most complex option for creating a custom control. You would need to do this when you want to implement functionality that is unavailable with the existing controls in Silverlight. In this chapter s exercise, you will take the custom control approach.

In this exercise, you will build your own cooldown button. This button will be disabled for a set number of seconds its cooldown duration after it is clicked. If you set the cooldown to be three seconds, then after you click the button, you will not be able to click it again for three seconds.

For demonstration purposes, you will not use the standard Silverlight Button control as the base control. Instead, you will create a custom control that implements Control. This way, I can show you how to create a control with a number of states. The cooldown button will have five states, implemented in two state groups. The NormalStates state group will have these states: Pressed: The button is being pressed. When it is in this state, the thickness of the button s border will be reduced. MouseOver: The mouse is hovering over the button. When it is in this state, the thickness of the button s border will be increased. Normal: The button is in its normal state.

It will also have a state group named CoolDownStates, which will contain two states: Available: The button is active and available to be clicked. CoolDown: The button is in its cooldown state, and therefore is not active. You will place a rectangle over top of the button that is of 75% opacity. In addition, you will disable all other events while the button is in this state.

Keep in mind that this is only an example, and it has many areas that could use improvement. The goal of the exercise is not to produce a control that you will use in your applications, but rather to demonstrate the basic steps for creating a custom control in Silverlight.

Let s get started by creating a new project for the custom control. 1. In Visual Studio 2010, create a new Silverlight Application named CoolDownButtonTest and allow Visual Studio to create a Web Application project to host your application. From Solution Explorer, right-click the solution and select Add New Project. In the Add New Project dialog box, select the Silverlight Class Library template and name the library CoolDownButton, as shown in Figure 14-1. If prompted about which version of Silverlight to use, select Silverlight 4 and press OK, as shown in Figure 14-2.

2. 3.

Figure 14-2. Silverlight version selection screen 4. 5. By default, Visual Studio will create a class named Class1.cs. Delete this file from the project. Right-click the CoolDownButton project and select Add New Item.

In the Add New Item dialog box, select the Class template and name the class CoolDownButtonControl, as shown in Figure 14-3.