In this step you'll create a Silverlight application in Visual Studio which will use HtmlHost for Silverlight to display a Web site. You'll create a new Silverlight project and add controls to your application.

To set up and add controls to your application, complete the following steps:

1. In Visual Studio, select File | New | Project.
2. In the New Project dialog box, select a language in the left pane, and in the templates list select Silverlight Application. Enter a Name for your project and click OK. The New Silverlight Application dialog box will appear.
3. Click OK to accept default settings, close the New Silverlight Application dialog box, and create your project. The MainPage.xaml file should open.
4. In the XAML window of the project, place the cursor between the <Grid> and </Grid> tags and click once.
5. Navigate to the Visual Studio Toolbox and double-click the StackPanel icon to add the panel to the page.
6. Update the <StackPanel/> tag in the MainPage.xaml file so it appears like the following:

<StackPanel Name="StackPanel1" Margin="10" Orientation="Vertical"></StackPanel>

This markup adds a margin and sets the panel's orientation.

1. In the XAML window of the project, place the cursor between the <StackPanel> and </StackPanel> tags and click once – you will add controls to the StackPanel.
2. Navigate to the Visual Studio Toolbox and double-click the C1HtmlHost icon to add the control to the panel.
3. Update the <c1:C1HtmlHost/> tag in the MainPage.xaml file so it appears like the following:

<c1:C1HtmlHost Name="C1HtmlHost1" Margin="5" SourceUri="http://www.componentone.com" />

This markup names the control, adds a margin, and sets the C1HtmlHost.SourceUri property which sets the Web site or page that will initially appear in the C1HtmlHost control when the application is loaded.

4. Add the following markup below the <c1:C1HtmlHost/> tag in XAML view:

XAML	Copy Code
<StackPanel Name="StackPanel2" Orientation="Horizontal"> <TextBlock Height="23" HorizontalAlignment="Left" Margin="5" Name="TextBlock1" Text="Source URI:" VerticalAlignment="Top" /> <TextBox Height="23" Name="TextBox1" Width="200" Margin="5" Text="http://www.componentone.com" /> <Button Content="Set Source URI" Height="23" Name="Button1" Margin="5" /> </StackPanel>

 

The markup above adds a StackPanel that contains a TextBlock, TextBox, and Button. When the user enters a URL in the text box at run time and presses the button, the C1HtmlHost control will display the entered Web site. Your markup will now appear similar to the following:

XAML

Copy Code

<Grid x:Name="LayoutRoot" Background="White"> <StackPanel Margin="10" Name="StackPanel1" Orientation="Vertical"> <c1:C1HtmlHost Name="C1HtmlHost1" Margin="5" SourceUri="http://www.componentone.com" c1:C1NagScreen.Nag="True" /> <StackPanel Name="StackPanel2" Orientation="Horizontal"> <TextBlock Height="23" HorizontalAlignment="Left" Margin="5" Name="TextBlock1" Text="Source URI:" VerticalAlignment="Top" /> <TextBox Height="23" Name="TextBox1" Width="200" Margin="5" Text="http://www.componentone.com" /> <Button Content="Set Source URI" Height="23" Name="Button1" Margin="5" /> </StackPanel> </StackPanel> </Grid>

5. Navigate to the Solution Explorer, and expand the YourProject.Web node (where YourProject is the name of the project) and double-click the YourProjectTestPage.aspx file (where YourProject is the name of the project) to open it.
6. In the .aspx file scroll down to the  <div id="silverlightControlHost"> tag and add the following parameter in the list of parameters between the <object></object> tags:

XAML	Copy Code
<param name="windowless" value="true" />

7. Save all your changes and return to the MainPage.xaml page.

 What You've Accomplished

You've successfully created and set up a Silverlight application and added controls, including a C1HtmlHost control, to the page. In the next step you'll add code to add functionality to your application.