One of the coolest features of Visual Studio 2010 is the ability to customize the new WPF based Start Page. We have released a project template for creating pages, using the Visual Studio 2010 default page as a starting point.

In the next two posts I’m going to walk through the process of creating a new page, testing the page using the VS Experimental Instance and finally uploading it to the Visual Studio Gallery where others can download your work. We will cover the following topics:

Part 1:

· Installing and using the Start Page project template · Editing Start Page XAML · Testing your custom Start Page in the VS experimental instance · Making your custom Start Page the default Part 2: · Adding a code-behind to a Start Page · Persisting user settings in a Start Page · Sharing a Start Page on the Visual Studio Gallery

Installing and Using the Start Page Project template

1. First make sure to download and install the Visual Studio SDK

2. Download and install the Start Page project template.

Now you have installed the SDK and the Start Page template, the next few steps will go through loading the template and setting up project ready for editing.

1.	Start Visual Studio and open the Custom Start Page Project template from the New Project Dialog. The template will appear in the New Project Dialog (File->New Project) under ‘Installed Templates -> Visual C# -> Extensibility->‘Custom Start Page’   Note: this release of the template is only available for C#.
2.	Ensure that the startup project is set to the Start Page project, as opposed to the control project; you can do this by right clicking on the Start Page Project and selecting ‘Set as Startup Project’. This template is composed of two projects: 1. Start Page – contains the loose Start Page XAML file and creates a VSIX for deployment. 2. StartPageControl – creates a very simple User Control to add to the Start Page.
3.	Open the StartPage.Xaml file and build the project to resolve Xaml parsing errors.
4.	Reload the designer view and the page will be displayed. By default the designer view will only display a wireframe view of the page. This is because the styles referencing the Visual Studio color table and Start Page data model need to be loaded in the context of a running Visual Studio instance.
5.	Maximize the view of the XAML code by double clicking the XAML tab at the bottom of the designer surface since we will not be using the designer surface for this example.
6.	To make the code easier to read, collapse the code sections within the Grid element titled ‘LayoutRoot’. The result should look like this:

Editing the Start Page XAML

Now that we have a clearer idea of the overall structure of the page, we are going to be making edits inside the “LayoutRoot” Grid. These next two steps describe removing the unwanted existing Start Page content and setting a new background image for the page. Even though the Start Page project template includes an example UserControl in the StartPageControl project, we won’t be using this control during this walk-through. Don’t delete this project as in my second post, we’ll make use of this control.

1.

Delete the Grid.ColumnDefinitions and Grid.RowDefinitions sections along with the Grid commented as : ‘<!—Center Content–>.’ The end result should look like this:

Now the Start Page consists of a background image and the Recent Projects area. The Recent Projects area has a transparent background and may become harder to read (depending on your chosen background image) so we are going to add a semi-opaque background color.

1.	Create a <SolidColorBrush> resource with opacity of 0.8 and add it to the Resources section of the Start Page. <SolidColorBrush x:Key=”Backing” Opacity=”0.8″ Color=”White”></SolidColorBrush>
2.	Add a Border around the “Left Column” Grid and apply the resource to the Background attribute of the Border. <Border Background=”{DynamicResource Backing}”>
3.	Add the following attributes to the Border to improve the visual appearance of the content. Width=”330″ Margin=”15″ Padding=”15″ HorizontalAlignment=”Left”
4.	Expand the Grid which is now inside the Border and remove the Grid’s attributes. We are now ready to test the page in the Visual Studio Experimental instance. The resulting XAML in this section now looks like this:

Testing the template in the Visual Studio Experimental instance

Now the page is ready for testing. Pressing F5 will launch an Experimental instance of Visual Studio and add the Start Page to the list of installed Extensions. Although the Experimental instance has been launched and the custom Start Page Extension has been installed, we still need to set the current Start Page to be the one we are working on.

1.	Open the Tools->Options->Startup settings, and select ‘[Installed Extension] SolutionName’ from the list. Note: The name of the Extension is obtained from the .VSIX manifest. The name is set the when you create the name of your solution. I will go over changing the name of your VSIX at the end of this post.
2.	Your Start Page should look like the one below (assuming you chose the same background image):

Deploying a Start Page

Now the custom Start Page Extension is completed and tested, it’s time to install it to your main Visual Studio instance. These next steps detail how to change the name of the Extension and locate the generated VSIX file to install it.

1.	Update the name associated with this Start Page by opening the source.extension.vsixmanifest file. The Product Name is the name that is shown in the Tool->Options dialog when selecting a Start Page.
2.	Open the project folder directory. You can easily access this from the Solution Explorer context menu for the project.
3.	Open the bin folder, followed by the Debug folder. Here you will see the MySimpleStarPage.vsix file. Double click on the icon to install this Extension.

Now the Start Page is installed, you need to set it as the active Start Page, as described earlier in the post. Open the Tools->Options->Startup settings, and select ‘[Installed Extension] Simple Start Page’ from the list.

There is plenty of room to expand on this sample. So far I have just shown how to modify the declarative Start Page XAML. In the next post I will describe how to use code behind to dynamically change the Start Page image.

Thanks for your time,

Adrian Collier