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 ToolboxTo add PrimeGenerator (or any other custom component) to the Toolbox, perform the following steps:
Using Custom Controls from the ToolboxTo use our custom controls on a page, perform the following steps:
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
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 IconOur 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. |