In the second part of this walkthrough, you will learn to<\/p>\n
- \n
- Create a VSIX project template extension. <\/li>\n
- Publish the project template to the Visual Studio Gallery. <\/li>\n
- Install the project template from the Visual Studio Gallery. <\/li>\n
- Test the installed project template. <\/li>\n
- Remove the project template from the Visual Studio Gallery. <\/li>\n
- Add a debug action to the project template. <\/li>\n<\/ul>\n
Prerequisites<\/h4>\n
To follow this walkthrough, you must have a working knowledge of web controls, creating new projects, setting project properties, and using the Visual Studio experimental instance. You must have both Visual Studio 2010 and the Visual Studio 2010 SDK installed on your computer. In addition, you must have completed the first part of this walkthrough.<\/p>\n
Creating and Publishing an Extensibility Web Control Template<\/h4>\n
To create an extensibility web control project template, start with the custom web control project that you created in the first part of this walkthrough. Because this project includes the ColorTextControl web control, you can use this template to create custom web controls that render as colored text. <\/p>\n
To publish a project template to the Visual Studio gallery, you must create the project template as a VSIX extension and provide it with an icon and a screenshot. The easiest way to do this is to use the Export Template as VSIX<\/b> wizard.<\/p>\n
1. Open the MyWebControls project in Visual Studio.<\/p>\n
2. Use the Extension Manager to download the Export Template as VSIX wizard<\/b><\/a> from the Visual Studio gallery. This adds the Export Template as VSIX …<\/b> item to the File menu when a project is open. <\/p>\n
3. Select the Export Template as VSIX<\/b> menu item.<\/p>\n
![\"clip_image002\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/2746.clip_image002_thumb_75D1B1F3.jpg\" "\\"clip_image002\\"")
<\/a><\/p>\n4. In the Choose Template Type<\/b> page, make sure that Project Template<\/b> is selected, and that the MyWebControls.csproj check box is checked. Click Next.<\/p>\n
![\"clip_image004\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/0285.clip_image004_thumb_649DD450.jpg\" "\\"clip_image004\\"")
<\/a><\/p>\n5. In the Select Template Options<\/b> page, set the Template Name<\/b> to Extensibility Color Text Web Toolbox Control<\/i> and the Template Description<\/b> to Color text web control project that produces a VSIX extension<\/i>.<\/p>\n
6. In the Icon Image<\/b> text box, Browse<\/b> to and select the Color.bmp file. You must set the file filter to All Files (*.*) to see this file.<\/p>\n
7. In the Preview Image<\/b> text box, Browse<\/b> to and select the ScreenShot.bmp file. You must set the file filter to All Files (*.*) to see this file. Click Next.<\/p>\n
![\"clip_image006\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/5504.clip_image006_thumb_36D00B8B.jpg\" "\\"clip_image006\\"")
<\/a><\/p>\n8. In the Select VSIX Options<\/b> page, change the Product Name<\/b> to Extensibility Color Text Web Control Template<\/i>.<\/p>\n
9. Change the Company Name<\/b>, and so forth, as desired.<\/p>\n
10. Uncheck the Automatically import the template into Visual Studio<\/b> check box, then click Finish.<\/p>\n
![\"clip_image008\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/7651.clip_image008_thumb_0EBD5C6C.jpg\" "\\"clip_image008\\"")
<\/a><\/p>\nIn a moment, the Windows Explorer opens to display the Extensibility Color Text Web Control Template.vsix file in the <Users>My DocumentsVisual Studio 2010My Exported Templates folder.<\/p>\n
Publishing the web control project template VSIX file<\/h4>\n
You are now ready to publish your project template to the Visual Studio gallery.<\/p>\n
1. Launch your web browser and navigate to http:\/\/visualstudiogallery.msdn.microsoft.com<\/a>.<\/p>\n
2. Click the sign in<\/b> link in the upper right-hand corner.<\/p>\n
3. Sign in with your Windows Live ID. If you don’t have one, you can create one here.<\/p>\n
4. Click the Upload<\/b> button in the upper right-hand corner.<\/p>\n
5. In Step 1:<\/b> Extension Type<\/b>, select Project or Item Template<\/b>, then click Next.<\/p>\n
6. In Step 2: Upload<\/b>, click the Browse<\/b> button and select the Extensibility Color Text Web Control Template.vsix file located in the My Exported Templates folder. Click Next.<\/p>\n
7. In Step 3:<\/b> Basic Information<\/b>, the information you entered into the Export Template as VSIX<\/b> wizard appears. <\/p>\n
8. Set the Category<\/b> to ASP.NET<\/i> and the Tags<\/b> to toolbox, web control, templates<\/i>.<\/p>\n
9. Read and agree to the Contribution Agreement<\/b>, then type the text image into the text box. <\/p>\n
10. Click Create Contribution<\/b>, then click Publish<\/b>.<\/p>\n
11. Search the Visual Studio Gallery for extensibility color text web control template<\/i>. The new template listing appears.<\/p>\n
![\"clip_image010\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/5001.clip_image010_thumb_1BB73C7D.jpg\" "\\"clip_image010\\"")
<\/a><\/p>\nInstalling the web control project template<\/h4>\n
Now that your web control project template is published, install it in Visual Studio and test it there.<\/p>\n
1. Return to Visual Studio.<\/p>\n
2. From the Tools<\/b> menu, select Extension Manager<\/b>.<\/p>\n
3. Click Online Gallery<\/b>, then search for extensibility color text web control template<\/i>. The Extensibility Color Text Web Control Template<\/b> listing appears.<\/p>\n
4. Click the Download<\/b> button. After the extension downloads, click the Install<\/b> button. Your project template is now installed in Visual Studio.<\/p>\n
Testing the web control project template<\/h4>\n
You no longer have to create a custom web control the manual way, as you did in the first part of this walkthrough. Instead, you can use the Extensibility Color Text Web Control<\/b> project template. In this section, you use the template to create a BlueColorTextControl web control.<\/p>\n
1. Select the File\/New Project<\/b> menu item, then click the Online Templates<\/b> tag in the left pane.<\/p>\n
2. Select the ASP.NET node, then click Extensibility Color Text Web Control Template <\/b>in the middle pane.<\/p>\n
![\"clip_image012\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/1616.clip_image012_thumb_259C2DE8.jpg\" "\\"clip_image012\\"")
<\/a><\/p>\n3. Set the Name<\/b> to MoreWebControls, then click OK.<\/p>\n
4. Rename the ColorTextControl.cs file to be BlueColorTextControl.cs.<\/p>\n
5. Open the BlueColorTextControl.cs file.<\/p>\n
6. In the ToolboxData<\/b> attribute, replace both occurrences of ColorTextControl with BlueColorTextControl.<\/p>\n
These values specify the opening and closing tags generated for the control when it is dragged from the Toolbox into a web page at design time. They must match the name of the control class, which is also the name of the control that appears in the toolbox. <\/p>\n
The start of the control class source code now looks like this:<\/p>\n
namespace <\/span>MoreWebControls\r\n{\r\n [DefaultProperty<\/span>(\"Text\"<\/span>)]\r\n [ToolboxData<\/span>(\"<{0}:BlueColorTextControl runat=server><\/{0}:BlueColorTextControl>\"<\/span>)]\r\n [ProvideToolboxControl(\"MoreWebControls\"<\/span>, false<\/span>)]\r\n public class <\/span>BlueColorTextControl <\/span>: WebControl\r\n <\/span>{<\/pre>\n<\/a><\/p>\n
7. In the get <\/b>method, Change the color “green” to “blue”.<\/p>\n
get\r\n<\/span>{\r\n String <\/span>s = (String<\/span>)ViewState[\"Text\"<\/span>];\r\n return <\/span>\"<span style='color:blue'>' <\/span>+ s + \"<\/span>\"<\/span>;\r\n}<\/pre>\nThis surrounds the text with a span tag that colors it blue.<\/span><\/pre>\n8. Build the MoreWebControls project.<\/p>\n
Testing the new web control<\/h4>\n
Do not press F5 to launch an experimental instance of Visual Studio. Instead, launch it by following the steps below. You will learn more about adding a debug action to a project template in a later section.<\/p>\n
1. Launch an experimental instance of Visual Studio explicitly by selecting the menu item Start\/All Programs\/Microsoft Visual Studio 2010 SDK\/Tools\/Start Experimental Instance of Microsoft Visual Studio 2010<\/b>. For convenience, you can create a shortcut to this executable. <\/p>\n
2. Create a new web application project.<\/p>\n
3. Open default.aspx in Source<\/b> mode.<\/p>\n
4. Open the toolbox. You should see BlueColorTextControl in the category MoreWebControls.<\/p>\n
![\"clip_image014\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/4540.clip_image014_thumb_4472A1C6.jpg\" "\\"clip_image014\\"")
<\/a><\/p>\n5. Drag a BlueColorTextControl to the body of the web page.<\/p>\n
6. Add a Text<\/b> attribute with the value Think Blue!<\/i> to the BlueColorTextControl tag. The resulting tag should look like this:<\/p>\n
<<\/span>cc1<\/span>:<\/span>BlueColorTextControl <\/span>ID<\/span>=\"BlueColorTextControl1\" <\/span>Text<\/span>=\"Think Blue!\" <\/span>runat<\/span>=\"server\" \/>\r\n<\/span><\/pre>\n7. Press F5 to launch the ASP.NET Development Server. <\/p>\n
The BlueColorTextControl should render something like this:<\/p>\n
![\"clip_image016\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/5428.clip_image016_thumb_38047E9D.jpg\" "\\"clip_image016\\"")
<\/a><\/p>\n8. Close the ASP.NET Development Server.<\/p>\n
9. Close the experimental instance of Visual Studio.<\/p>\n
Removing the project template<\/h4>\n
To add a debug action to your project template, you must delete the current template and recreate it. To delete the project template and the project it generated, follow these steps.<\/p>\n
1. Return to your web browser. <\/p>\n
2. Click the My Contributions<\/b> link in the upper left-hand corner. The Extensibility Color Text Web Control Template listing appears.<\/p>\n
3. Click Delete<\/b> to permanently remove your project template from the Visual Studio Gallery.<\/p>\n
4. Close the browser and return to Visual Studio.<\/p>\n
5. From the Tools<\/b> menu, select Extension Manager<\/b>.<\/p>\n
6. Select Extensibility Color Text Web Control Template, then click Uninstall<\/b>.<\/p>\n
7. Close the Extension Manager. <\/p>\n
8. Close the MoreWebControls solution.<\/p>\n
9. Close Visual Studio.<\/p>\n
10. Delete the MoreWebControls project folder.<\/p>\n
11. Start Visual Studio to complete the uninstall process.<\/p>\n
Adding a debug action to the project template<\/h4>\n
If you press F5 while the MoreWebControls solution is open, you will see the error message “A project with an Output Type of Class Library cannot be started directly”. Your project template does not set a debug action because the location of the experimental instance of Visual Studio is unknown until the project template is installed on the target machine.<\/p>\n
Microsoft extensibility project templates include an invisible wizard that runs during project template installation. This wizard determines the location of the experimental instance of Visual Studio and sets the debug action accordingly. You can create your own wizard to do the same. You only need to create this wizard once. You can use the same wizard with every extensibility project template you create.<\/p>\n
The extensibility project template wizard must have a public implementation of Microsoft.VisualStudio.TemplateWizard.IWizard, and must be signed with a strong assembly name.<\/p>\n
Creating the wizard<\/h5>\n
1. Create a new Visual C#\/Windows\/Class Library project named MyWizard.<\/p>\n
2. Rename the file class1.cs to be MyWizard.cs.<\/p>\n
3. Replace the MyWizard.cs file content with the following code.<\/p>\n
using <\/span>System;\r\nusing <\/span>System.Collections.Generic;\r\nusing <\/span>System.Linq;\r\nusing <\/span>System.Text;\r\nusing <\/span>Microsoft.VisualStudio.TemplateWizard;\r\nusing <\/span>System.Globalization;\r\nusing <\/span>EnvDTE;\r\nnamespace <\/span>MyWizard\r\n{\r\n public class <\/span>MyWizard <\/span>: IWizard\r\n <\/span>{\r\n public void <\/span>BeforeOpeningFile(ProjectItem <\/span>projectItem)\r\n {\r\n }\r\n public void <\/span>ProjectFinishedGenerating(Project <\/span>project)\r\n {\r\n foreach <\/span>(Configuration <\/span>config in <\/span>project.ConfigurationManager)\r\n {\r\n \/\/Set up the debug options to run \"devenv \/rootsuffix Exp\";\r\n <\/span>config.Properties.Item(\"StartAction\"<\/span>).Value = 1;\r\n \/\/Get the full path to devenv.exe through DTE.FullName\r\n <\/span>config.Properties.Item(\"StartProgram\"<\/span>).Value =\r\n project.DTE.FullName;\r\n config.Properties.Item(\"StartArguments\"<\/span>).Value =\r\n \"\/rootsuffix Exp\"<\/span>;\r\n }\r\n }\r\n public void <\/span>ProjectItemFinishedGenerating(ProjectItem <\/span>projectItem)\r\n {\r\n }\r\n public void <\/span>RunFinished()\r\n {\r\n }\r\n public void <\/span>RunStarted(object <\/span>automationObject,\r\n Dictionary<\/span><string<\/span>, string<\/span>> replacementsDictionary,\r\n WizardRunKind <\/span>runKind, object<\/span>[] customParams)\r\n {\r\n }\r\n public bool <\/span>ShouldAddProjectItem(string <\/span>filePath)\r\n {\r\n return true<\/span>;\r\n }\r\n }\r\n}<\/pre>\n<\/a><\/p>\n
4. Add the following references to the project. If there is more than one choice, choose the reference that has a path to Visual Studio 2010:<\/p>\n
- \n
- EnvDTE <\/li>\n
- Microsoft.VisualStudio.TemplateWizardInterface <\/li>\n<\/ul>\n
5. In the Signing<\/b> tab of the project properties dialog box, check the Sign the assembly<\/b> check box.<\/p>\n
6. In the Choose a strong name key file<\/b> dropdown list, select <New…><\/b>. The Create Strong Name Key<\/b> dialog box appears.<\/p>\n
7. Set the Key file name<\/b> to key.snk<\/i> and uncheck the Protect my key file with a password<\/b> check box.<\/p>\n
![\"clip_image018\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/8244.clip_image018_thumb_5A0CDA63.jpg\" "\\"clip_image018\\"")
<\/a><\/p>\n8. Click OK. The key.snk file is added to the project.<\/p>\n
9. Build the MyWizard project as a Release<\/b> build. Your wizard is now ready to use.<\/p>\n
10. Close the MyWizard solution.<\/p>\n
Incorporating the wizard into the project template.<\/h5>\n
To incorporate the wizard into the project template VSIX extension, you must backtrack and set the path to your wizard in the Export Template as VSIX<\/b> wizard Wizard<\/b> text box.<\/p>\n
Follow the steps beginning with the section Creating and Publishing an Extensibility Web Control Template<\/b>, with these exceptions:<\/p>\n
- \n
- You do not have to download the Export Template as VSIX<\/b> wizard again. <\/li>\n
- In the Wizard<\/b> text box of the Select VSIX Options<\/b> page of the Export Template as VSIX<\/b> wizard, Browse<\/b> to and select the bin\/Release\/MyWizard.dll file you created in the section above. <\/li>\n<\/ul>\n
![\"clip_image020\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/2476.clip_image020_thumb_2D83AA7D.jpg\" "\\"clip_image020\\"")
<\/a><\/p>\n- \n
- When asked to overwrite the existing VSIX extension output file, click Yes. <\/li>\n<\/ul>\n
When you reach the section Testing the new web control<\/b>, you can now launch the experimental instance of Visual Studio by pressing F5.<\/p>\n
Summary<\/h4>\n
Congratulations! You have come full circle, from creating a web control project from scratch, to creating an extensibility web control project template.<\/p>\n
Note that in this walkthrough, you use the Export Template as VSIX<\/b> wizard to simplify the task of creating and publishing a project template. If you need more control of the project template, for example, to choose the icon that appears in the New Project dialog box, you must explicitly create the project template and wrap it in a VSIX extension. For more information, see Aaron Marten’s Creating and Sharing Project and Item Templates<\/a>.<\/p>\n
- In the Wizard<\/b> text box of the Select VSIX Options<\/b> page of the Export Template as VSIX<\/b> wizard, Browse<\/b> to and select the bin\/Release\/MyWizard.dll file you created in the section above. <\/li>\n<\/ul>\n
- You do not have to download the Export Template as VSIX<\/b> wizard again. <\/li>\n
![\"Martin](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/06\/3377.REDMOND_martintr_LThumb_thumb_33CA810B.jpg\" "\\"Martin")
<\/a>Short Bio:<\/strong> Martin Tracy is a senior programmer writer for the Visual Studio Project and Build team. As part of VS 2010, he has documented numerous features of the MSBuild system and Visual Studio platform. His long term focus is on developing infrastructure to build richly featured web applications. Martin has a long career in real-time software development, from artificial hearts and smart prosthetics to adaptive aeronautic controls. Martin holds a Masters degree in Dance Ethnology from the University of California, Los Angeles (UCLA), and a Bachelors degree in Asian Culture from Brown University, Rhode Island. He lives in Snohomish, WA with his extended family and loves to play accordion and watch anime in his spare time.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"