Custom Controls in Visual Studio .NET


In this section, we'll show you how to use a custom control in Visual Studio .NET and how you can associate a custom icon with your control.

Adding a Custom Control to the Toolbox

To add PrimeGenerator (or any other custom component) to the Toolbox, perform the following steps:

  1. Open an .aspx page in Design view, and make the Web Forms tab active in the Toolbox.

  2. From the Tools menu, click Customize Toolbox.

  3. In the Customize Toolbox dialog box, click the .NET Framework Components tab.

  4. Click the Browse button on the lower right below the components list.

  5. Navigate to the directory that contains the assembly into which your controls are compiled, and click the name of that assembly (for example, C:\MyBookCodeCS\MyServerControls\MSPress.ServerControls.dll).

  6. You will see that our three controls ( PrimeGenerator , SimpleControl , and StyledPrimeGenerator ) now appear, along with the other .NET Framework components. Make sure that the boxes next to the control names are checked, as shown in Figure 5-4.

  7. Click OK to close the dialog box. You'll see that our three controls now appear in the Toolbox under the Web Forms tab.

    Figure 5-4. User interface for customizing the Toolbox

    graphics/f05hn04.jpg

Using Custom Controls from the Toolbox

To use our custom controls on a page, perform the following steps:

  1. Create a new ASP.NET Web application project. (When you create a Web application, Visual Studio .NET automatically creates an IIS virtual root for you.)

  2. Double-click the WebForm1.aspx file in Solution Explorer so that the page opens in Design view.

  3. Click the Web Forms tab of the Toolbox and you will see that the SimpleControl , PrimeGenerator , and StyledPrimeGenerator controls are now included in the Toolbox.

  4. Drag PrimeGenerator and StyledPrimeGenerator onto the page. When you drag a custom control onto the design surface, Visual Studio .NET copies the assembly that contains the control to your Web application's bin directory. For example, if your Web application is named MyBookWeb, you will find that MyBookWeb\bin now contains MSPress.ServerControls.dll.

Set some of the style properties of StyledPrimeGenerator in the property browser. In HTML view, you should see page syntax similar to that shown in Listing 5-7. Note that the designer automatically generates the tag prefix msp corresponding to the namespace MSPress.ServerControls , as we specified in the TagPrefixAttribute . If our assembly did not have a TagPrefixAttribute , the designer would generate a default tag prefix such as cc1 .

Listing 5-7 Designer-generated HTML for a page that uses PrimeGenerator and StyledPrimeGenerator
 <%@RegisterTagPrefix="msp"Namespace="MSPress.ServerControls" Assembly="MSPress.ServerControls"%> <%@Pagelanguage="c#"Codebehind="WebForm1.aspx.cs" AutoEventWireup="false"Inherits="BookWeb.Chapter5.WebForm1"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <HTML> <HEAD> <title>WebForm1</title> <metaname="GENERATOR"Content="MicrosoftVisualStudio7.0"> <metaname="CODE_LANGUAGE"Content="C#"> <metaname="vs_defaultClientScript"content="JavaScript"> <metaname="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body> <formid="WebForm1"method="post"runat="server"> <msp:PrimeGeneratorid="PrimeGenerator1"runat="server" Number="91"> </msp:PrimeGenerator> <p> <msp:StyledPrimeGeneratorid="StyledPrimeGenerator1" runat="server"Number="329"BackColor="Gainsboro" Font-Size="Medium"Font-Names="Verdana"Width="300px"> </msp:StyledPrimeGenerator> </p> </form> </body> </HTML> 

Figure 5-5 shows the page in Design view in the Visual Studio .NET environment.

Figure 5-5. A page that uses PrimeGenerator and StyledPrimeGenerator in Design view in Visual Studio .NET

graphics/f05hn05.jpg

Notice that unlike PrimeGenerator , StyledPrimeGenerator has style properties that it inherits from its base class, WebControl . In this example, we have set the ForeColor , BackColor , BorderColor , and BorderStyle properties of the StyledPrimeGenerator instance.

Customizing the Toolbox Icon

Our custom controls appear with default icons (images of gears) in the Toolbox. You can provide a different icon for your control by embedding a bitmap file in the control's assembly. The bitmap file must contain a 16-by-16 bitmap and must be embedded as a managed resource in the same namespace as the control with which it is associated. The bitmap must be named the same way as its associated control class ”for example, PrimeGenerator.bmp . By convention, the lower-left pixel of the bitmap determines its transparent color .

To embed a bitmap into an assembly as a managed resource from the command line, add the bitmap to the directory containing the source files for your control and compile using the /res option:

 csc/res:PrimeGenerator.bmp,MSPress.ServerControls.PrimeGenerator.bmp /t:library/out:MSPress.ServerControls.dll/r:System.dll /r:System.Web.dll*.cs 

To embed a bitmap using Visual Studio .NET, add the bitmap to your project and click the bitmap in Solution Explorer. Set the build action to Embedded Resource in the property browser, and rebuild your project.

To see the custom icon in the Toolbox, delete the previous version of your control from the Toolbox, rebuild your control so that the bitmap is embedded in the assembly, and add the control to the Toolbox as before. To delete a control from the Toolbox, you can right-click the control and select the Delete option.

In our example, the visual appearance of our custom controls at design time is the same as the run-time appearance. However, if we want our controls to be displayed differently at design time, we can do so by associating special classes known as designers with our controls. We will describe designers in Chapter 15.



Developing Microsoft ASP. NET Server Controls and Components
Developing Microsoft ASP.NET Server Controls and Components (Pro-Developer)
ISBN: 0735615829
EAN: 2147483647
Year: 2005
Pages: 183

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net