Visual Studio 2010 Beta 1 Start Page Customization

My name is Adrian Collier and I am the Program Manager responsible for the Start Page in the Visual Studio. One of the coolest things we can do in this release is to create custom start pages using WPF. This post details how to get up and running with this feature, along with some warnings on how this feature will be changing.

clip_image002

Process for using the custom Start Page feature:

1. Create a folder called ‘startpages’ in you’re my documents -> Visual Studio 10 folder.

2. Copy the contents of this folder : \Program Files\Microsoft Visual Studio 10.0\Common7\IDE\StartPages\en into your new start pages folder.

3. Load Visual Studio.

4. Go to Tools->Options->Start up and check the box to Allow Custom Start Pages.

clip_image004

5. Edit the StartPage.xaml file using Visual Studio – when you save any changes to the file, the start page in Visual Studio should update automatically.

Customization Warnings

We are changing the start page to use standard ‘out of the box’ WPF controls post Beta 1 so rather than having VS specific controls, such as the Tray Control we will be using a Styled Tab Control.

These Controls will be removed:

· <vs:Tray >

· <vs:TrayGroup>

· <vs:TrayGroupItem>

· <vs:RssRotator>

We will also be revising the resources we have defined in the page, so the advice is do not take any dependencies with the controls or resources that are provided in Beta 1.

Post beta 1 we will be consuming the shell functionality to detect if the page is being shown on remote desk top, allowing start page authors to tailor their pages to suite low color and low bandwidth scenarios, as well as responding to windows theme colors such as the High Contrast color setting.

An example of tying into the rendering capabilities property is shown below.

<DataTrigger Binding="{Binding Source={x:Static vs:EnvironmentRenderCapabilities.Current}, Path=AreAnimationsAllowed}"

Value="False">

</DataTrigger>

As this is essentially a WPF application inside Visual Studio, you can write all kinds of cool UI, however be careful with Styles and Dynamic templates, as errors will not be detected until runtime this can cause exceptions which will result in Visual Studio crashing. If this happens

· You can try and fix the problem by editing the file in notepad or another text editor

Or

· Rename the file, so you can get visual studio running again, then open the file in Visual Studio to try and locate the issue.

·

Example Page

Here is an example of a custom start page I created, I’ve tried to include only items which we will be keeping in the Beta 2 version of the Start Page, this is just a quick and simple page which provides access to the recent projects and the ability to launch the Open and New project commands.

clip_image006

I’ve used the ‘Recent Projects’ control which was originally referenced in the Tray control via the inner content property. There will be updates to this control post Beta 1, primarily focusing the changes to the visualization of the items in the list. We plan to provide this control going forward from Beta 1 to RTM.

vsi:RecentProjects Width="Auto" Margin="0,15,0,0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Left" Height="Auto" />

This control is located in the ShellUI.Internal dll, so you should add this to the solution references, it is located under this path:

\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\Microsoft.VisualStudio.Shell.UI.Internal.dll

 <Grid xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:vs="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.UI"
      xmlns:vsi="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.UI.Internal"
      xmlns:sys="clr-namespace:System;assembly=mscorlib"
    >
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF4B658F" Offset="0"/>
            <GradientStop Color="#FF516C97" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>
    <Grid.Resources>
        <!-- Adding an inline style which shows both a text caption and the image for the button, with minimal state change for mouse over -->
        <Style TargetType="{x:Type vs:ImageButton}">
            <Setter Property="Focusable" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type vs:ImageButton}">
                            <StackPanel Orientation="Vertical">
                                <Image Source="{Binding ImageNormal, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <TextBlock Text="{TemplateBinding Content}" Foreground="White"  Margin="0,8,0,0" VerticalAlignment="Center" />
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand" />                                
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    
    <Grid.RowDefinitions>
        <!-- Logo-->
        <RowDefinition Height="95" />
        <!-- Main Content Area -->
        <RowDefinition Height="Auto"/>
        
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Logo  -->
    
    <Image Grid.Row="0" Grid.Column="0" Style="{DynamicResource {x:Static vs:StartPageResourceKeys.LogoImageStyleKey}}" />
    
    <Grid Grid.Column="0" Margin="15,15,0,15" VerticalAlignment="Stretch" Grid.RowSpan="1" Grid.Row="1" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>  <!-- Command Buttons for New Projects -->
            <RowDefinition Height="*"/>     <!-- MRU Row -->
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Grid.Row="0">
            
            <!-- Examples of using the built in Image Button Class, unfortunately there are no additional New and Open Icons as part of the Beta 1 page, however you can see from this example how you can change the image source for each state -->
            <vs:ImageButton Content="New Project"
                        Margin="20,0,20,0"
                        Command="{x:Static vs:VSCommands.ExecuteCommand}" 
                        CommandParameter="File.NewProject"
                        ImageNormal="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/07_newproject.png"
                        ImageHover="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/07_newproject.png"
                        ImagePressed="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/07_newproject.png">
            </vs:ImageButton>

            <vs:ImageButton Content="Open Project"
                        Margin="20,0,20,0"
                        Command="{x:Static vs:VSCommands.ExecuteCommand}" 
                        CommandParameter="File.OpenProject"
                        ImageNormal="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/06_openproject.png"
                        ImageHover="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/06_openproject.png"
                        ImagePressed="pack://application:,,,/Microsoft.VisualStudio.Shell.UI;component/Images/StartPage/06_openproject.png">
            </vs:ImageButton>
        </StackPanel>
        
        <!-- this control does not play nice with the WPF designer, this will be fixed in Beta 2, comment this control out if you wish to use the designer-->
        <vsi:RecentProjects Width="Auto"  Margin="0,15,0,0"  Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Left"  Height="Auto" />
    </Grid>
</Grid>

 

Thanks for your time.  We will follow this up with a post about custom assemblies with the start page.

-Adrian