{"id":1813,"date":"2010-07-29T16:25:00","date_gmt":"2010-07-29T16:25:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2010\/07\/29\/walkthrough-creating-a-custom-start-page-part-1\/"},"modified":"2022-05-18T03:26:56","modified_gmt":"2022-05-18T10:26:56","slug":"walkthrough-creating-a-custom-start-page-part-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/walkthrough-creating-a-custom-start-page-part-1\/","title":{"rendered":"Walkthrough: Creating a Custom Start Page \u2013 Part 1"},"content":{"rendered":"

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.<\/p>\n

In the next two posts I\u2019m 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<\/a> where others can download your work. We will cover the following topics:<\/p>\n

Part 1:<\/p>\n\n\n\n
\u00b7 Installing and using the Start Page project template<\/p>\n

\u00b7 Editing Start Page XAML<\/p>\n

\u00b7 Testing your custom Start Page in the VS experimental instance<\/p>\n

\u00b7 Making your custom Start Page the default<\/p>\n

Part 2:<\/a><\/p>\n

\u00b7 Adding a code-behind to a Start Page<\/p>\n

\u00b7 Persisting user settings in a Start Page<\/p>\n

\u00b7 Sharing a Start Page on the Visual Studio Gallery<\/a><\/td>\n

\"clip_image002[4]_thumb[1]\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Installing and Using the Start Page Project template<\/h4>\n

1. First make sure to download and install the Visual Studio SDK<\/a><\/p>\n

2. Download and install the Start Page project template.<\/a><\/p>\n

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.<\/p>\n\n\n\n\n\n\n\n\n
1.<\/td>\nStart Visual Studio and open the Custom Start Page Project template from the New Project Dialog.<\/p>\n

The template will appear in the New Project Dialog (File->New Project) under \u2018Installed Templates -> Visual C# -> Extensibility->\u2018Custom Start Page\u2019<\/p>\n

 <\/p>\n

Note: this release of the template is only available for C#.<\/i><\/p>\n

\u00a0<\/em><\/td>\n

\"clip_image004[4]\"<\/a><\/p>\n

 <\/td>\n<\/tr>\n

2.<\/td>\nEnsure 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 \u2018Set as Startup Project\u2019.<\/p>\n

This template is composed of two projects:<\/p>\n

1. Start Page – contains the loose Start Page XAML file and creates a VSIX for deployment.<\/p>\n

2. StartPageControl – creates a very simple User Control to add to the Start Page.<\/p>\n

 <\/td>\n

\"setasstartup\"<\/a><\/td>\n<\/tr>\n
3.<\/td>\nOpen the StartPage.Xaml file and build the project to resolve Xaml parsing errors.<\/td>\n\"ErrorCut\"<\/a><\/td>\n<\/tr>\n
4.<\/td>\nReload 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.<\/td>\n\"clip_image009[4]\"<\/a><\/td>\n<\/tr>\n
5.<\/td>\nMaximize 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.<\/p>\n

 <\/td>\n

\"clip_image011[4]\"<\/a><\/td>\n<\/tr>\n
6.<\/td>\nTo make the code easier to read, collapse the code sections within the Grid element titled \u2018LayoutRoot\u2019. The result should look like this:<\/td>\n\"fullview\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Editing the Start Page XAML<\/h4>\n

Now that we have a clearer idea of the overall structure of the page, we are going to be making edits inside the \u201cLayoutRoot\u201d 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\u2019t be using this control during this walk-through. Don\u2019t delete this project as in my second post, we\u2019ll make use of this control.<\/p>\n\n\n\n
1.<\/td>\nDelete the Grid.ColumnDefinitions and Grid.RowDefinitions sections along with the Grid commented as :<\/p>\n

\u2018<!\u2014Center Content–>.\u2019<\/p>\n

The end result should look like this:<\/td>\n

\"trimmedlist\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
2.<\/td>\nDelete the Width and Grid properties from the image since we will not need these and change the \u201cSource\u201d attribute of the <Image> tag to point to a file on disk. For this example, I\u2019ve chosen a colorful picture that\u2019s included in Windows 7 installations.<\/p>\n

Add the Stretch attribute to the Image and set it to \u201cUniformToFill\u201d, this will ensure the Image fills the space.<\/p>\n

<Image Source=”C:WindowsWebWallpaperCharactersimg21.jpg” Stretch=”UniformToFill”\/><\/p>\n

For more information on the Stretch Property, check out the MSDN article: http:\/\/msdn.microsoft.com\/en-us\/library\/system.windows.controls.image.stretch(v=VS.100).aspx<\/b><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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.<\/p>\n

<\/h2>\n\n\n\n\n\n\n
1.<\/td>\nCreate a <SolidColorBrush> resource with opacity of 0.8 and add it to the Resources section of the Start Page.<\/p>\n

<SolidColorBrush x:Key=”Backing” Opacity=”0.8″ Color=”White”><\/SolidColorBrush><\/p>\n

 <\/td>\n

\"AddedResource\"<\/a><\/td>\n<\/tr>\n
2.<\/td>\nAdd a Border around the \u201cLeft Column\u201d Grid and apply the resource to the Background attribute of the Border.<\/p>\n

<Border Background=”{DynamicResource Backing}”><\/p>\n

 <\/td>\n

\"LeftColumn\"<\/a><\/td>\n<\/tr>\n
3.<\/td>\nAdd the following attributes to the Border to improve the visual appearance of the content.<\/p>\n

Width=”330″<\/p>\n

Margin=”15″<\/p>\n

Padding=”15″<\/p>\n

HorizontalAlignment=”Left”<\/p>\n

 <\/td>\n

\"LeftColumn2\"<\/a><\/td>\n<\/tr>\n
4.<\/td>\nExpand the Grid which is now inside the Border and remove the Grid\u2019s 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:<\/td>\n\"Gridsmall\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Testing the template in the Visual Studio Experimental instance<\/h4>\n

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.<\/p>\n\n\n\n\n
1.<\/td>\nOpen the Tools->Options->Startup settings, and select \u2018[Installed Extension] SolutionName<\/i>\u2019 from the list.<\/p>\n

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.<\/p>\n

 <\/td>\n

\"toolsoptions\"<\/a><\/td>\n<\/tr>\n
2.<\/td>\nYour Start Page should look like the one below (assuming you chose the same background image):<\/td>\n\"clip_image027[4]\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Deploying a Start Page<\/h4>\n

Now the custom Start Page Extension is completed and tested, it\u2019s 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.<\/p>\n\n\n\n\n\n
1.<\/td>\nUpdate 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.<\/p>\n

 <\/td>\n

\"vsixsettings\"<\/a><\/td>\n<\/tr>\n
2.<\/td>\nOpen the project folder directory. You can easily access this from the Solution Explorer context menu for the project.<\/p>\n

 <\/td>\n

\"openFolder\"<\/a><\/td>\n<\/tr>\n
3.<\/td>\nOpen 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.<\/p>\n

 <\/td>\n

\"clip_image033[4]\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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 \u2018[Installed Extension] Simple Start Page\u2019 from the list.<\/p>\n

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<\/a> I will describe how to use code behind to dynamically change the Start Page image.<\/p>\n

Thanks for your time,<\/p>\n

Adrian Collier<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019m going to walk through the process of creating a […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[5,133],"class_list":["post-1813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-csharp","tag-xaml"],"acf":[],"blog_post_summary":"

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\u2019m going to walk through the process of creating a […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=1813"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1813\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=1813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=1813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=1813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}