Walkthrough: Adding a DLL Reference to the Start Page

This walkthrough shows how to add a DLL reference to a custom Start Page. The example adds a user control to the solution, builds the user control, and then references the built assembly from the Start Page .xaml file. A new tab hosts the user control, which functions as a basic Web browser.

You can use the same process to add any assembly that can be called from a .xaml file.

Adding a WPF User Control to the Solution

First, add a Windows Presentation Foundation (WPF) user control to the Start Page solution.

To add a WPF user control to the Start Page solution

1. Create a Start Page by using the Start Page project template. For more information, see Start Pages.

2. In Solution Explorer, right-click the solution, click Add, and then click New Project.

3. In the left pane of the New Project dialog box, expand either the Visual Basic or Visual C# node, and click Windows. In the middle pane, select WPF User Control Library.

4. Name the control WebUserControl and then click OK.

Implementing the User Control

To implement a WPF user control, build the user interface (UI) in XAML and then write the code-behind events in C# or another .NET language.

To write the XAML for the user control

1. In Solution Explorer, open the XAML file for the User Control.

2. In the Gridelement, add the following row definitions to the User control.

   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*" />
   </Grid.RowDefinitions>
   

3. In the main Grid element, add the following new Grid element, which contains a text box for typing Web addresses and a button for setting the new address.

   <Grid Grid.Row="0">
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="Auto" />
       </Grid.ColumnDefinitions>
       <TextBox x:Name="UserSource" Grid.Column="0" />
       <Button Grid.Column="1" x:Name="SetButton" Content="Set Address" Click="SetButton_Click" />
   </Grid>
   

4. Add the following frame to the top-level Grid element just after the Grid element that contains the button and textbox.

   <Frame Grid.Row="1" x:Name="WebFrame" Source="https://www.bing.com" Navigated="WebFrame_Navigated" />
   

5. The following example shows the completed XAML for the user control.

   <UserControl x:Class="WebUserControl.UserControl1"
                xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
                xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
                mc:Ignorable="d" 
                d:DesignHeight="300" d:DesignWidth="300">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto"/>
               <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <Grid Grid.Row="0">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <TextBox x:Name="UserSource" Grid.Column="0" />
               <Button Grid.Column="1" x:Name="SetButton" Content="Set Address" Click="SetButton_Click" />
           </Grid>
           <Frame Grid.Row="1" x:Name="WebFrame" Source="https://www.bing.com" Navigated="WebFrame_Navigated" />
       </Grid>
   </UserControl>
   

To write the code-behind events for the user control

1. In the XAML designer, double-click the Set Address button you added to the control.

   The UserControl1.cs file opens in the code editor.

2. Fill in the SetButton_Click Event Handler as follows.

   private void SetButton_Click(object sender, RoutedEventArgs e)
   {
       try
       {
           this.WebFrame.Source = new Uri(this.UserSource.Text, UriKind.Absolute);
       }
       catch (Exception error)
       {
           MessageBox.Show(error.Message);
       }
   }
   

   This code sets the Web address that is typed in the text box as the target for the Web browser. If the address is not valid, the code throws an error.

3. Build the solution.

Adding the User Control to the Start Page

To make this control available to the Start Page project, in the Start Page project file, add a reference to the new control library. Then you can add the control to the Start Page XAML markup.

To add the user control to the project

1. In Solution Explorer, in the Start Page project, right-click References and then click Add Reference.

2. On the Projects tab, select WebUserControl and then click OK.

3. On the Build menu, click Build Solution.

   Building the solution makes the user control available to IntelliSense for other files in the solution.

To add the control to the Start Page XAML markup, add a namespace reference to the assembly, then put the control on the page.

To add the control to the markup

1. In Solution Explorer, open the Start Page .xaml file.

2. In the XAML pane, add the following namespace declaration to the top-level Grid element.

   xmlns:vsc="clr-namespace:WebUserControl;assembly=WebUserControl"
   

3. In the XAML pane, scroll to the section that has the comment <!—Center Content-->.

   The section contains a TabControl element in a Grid element.

4. Add the following TabItem element, which contains a reference to your user control, to the top of the TabControl element.

   <TabItem Header="Web" Height="Auto">
       <vsc:UserControl1 />
   </TabItem>
   

Now you can test the control.

To test the custom Start Page

1. Press F5.

   The experimental instance of Visual Studio opens, with the custom Start Page installed but not selected.

2. In the experimental instance of Visual Studio, on the Tools menu, click Options.

3. In the Options dialog box, under Environment, select Startup. Then, on the Customize Start Page list, select your .xaml file, and click OK.

4. If the Start Page is not displayed, on the View menu, click Start Page.

5. Click the Web tab.

6. Type a URL into the search box and then click the Set Address button.

   The Web page loads.

Next Steps

You can share custom Start Pages with other users by uploading the .vsix file from the /Bin/Debug/ folder of the project to the Visual Studio Gallery Web site, or to another Web site or intranet share.

See Also

Tasks

Walkthrough: Adding Custom XAML to the Start Page

Reference

System.Windows.Controls

Other Resources

Custom Start Pages

WPF Container Controls