Once the base of the tutorial application is completed, you can extend it with Annotation support using the following steps:

1. First, you need to add references to the ImageGear for Silverlight ART Assembly.
   1. In the Solution Explorer, right-click on References, and choose Add Reference.
   2. Choose the Browse tab, navigate to "ImageGear for Silverlight v20\Bin" directory, select ImageGear20.Art.dll and ImageGear20.Art.Windows.Controls.dll, and click OK.

   You should now have the ImageGear Art assemblies listed under References in the Solution Explorer.
   
   

2. Open MainPage.xaml and add the following namespace property to the base UserControl element:
   

   XAML	Copy Code
   xmlns:IGAWC="clr-namespace:ImageGear.ART.Windows.Controls;assembly=ImageGear20.Art.Windows.Controls"

   This allows for the Art Toolbar to be added to the document.

3. Add a StackPanel element with horizontal orientation into the grid, and move buttonOpen and loadText elements inside it. Now your XAML should look like this:
   

   XAML	Copy Code
   <StackPanel Orientation="Horizontal" Grid.Row="0"> <Button Content="Open" Width="100" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonOpen"/> <TextBox Height="25" Margin="116,4,8,4" VerticalAlignment="Bottom" Text="Please wait while license is retrieved..." x:Name="loadText"/> </StackPanel>

4. Before the 'TextBox' element, add the following lines:
   

   XAML	Copy Code
   <Button Content="Import Annotations" Width="150" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonImportAnnotations" Click="buttonImportAnnotations_Click" /> <Button Content="Burn in" Width="100" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonBurnIn" Click="buttonBurnIn_Click" /> <IGAWC:ToolBar Name="artToolbar"/>

   This will add two new buttons ("Import Annotations" and "Burn In") and the Art Toolbar.

5. Review your XAML code. It should look like the following:
   

   XAML

   Copy Code

   <UserControl x:Class="SilverlightTutorial.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:IGWC="clr-namespace:ImageGear.Windows.Controls;assembly=ImageGear20.Windows.Controls" xmlns:IGAWC="clr-namespace:ImageGear.ART.Windows.Controls;assembly=ImageGear20.Art.Windows.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="813"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Orientation="Horizontal" Grid.Row="0"> <Button Content="Open" Width="100" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonOpen"/> <Button Content="Import Annotations" Width="150" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonImportAnnotations" Click="buttonImportAnnotations_Click" /> <Button Content="Burn in" Width="100" Margin="8,4,8,4" HorizontalAlignment="Left" x:Name="buttonBurnIn" Click="buttonBurnIn_Click" /> <IGAWC:ToolBar Name="artToolbar"/> <TextBox Height="25" Margin="116,4,8,4" VerticalAlignment="Bottom" Text="Please wait while license is retrieved..." x:Name="loadText"/> </StackPanel> <IGWC:PageView Grid.Row="1" x:Name="pageView" Grid.RowSpan="2" /> </Grid> </UserControl>

   In Design View you should see this:
   
   
   

6. Open MainPage.xaml.cs and add the following using statements to the top:
   

   C#	Copy Code
   using ImageGear.ART; using ImageGear.ART.Windows.Controls;

7. In class MainPage, add a private field of type ToolbarAnnotator:
   

   C#	Copy Code
   ToolBarAnnotator annotator;

8. In MainPage constructor, add the following line to the end (it will initialize the annotator):
   

   C#	Copy Code
   annotator = new ToolBarAnnotator(pageView, artToolbar);

9. In buttonOpen_Click handler, replace the following line:
   

   C#	Copy Code
   pageView.Display = new ImGearPresentationPageDisplay(igPage);

   with
   

   C#	Copy Code
   pageView.Display = new ImGearPresentationPageDisplay(igPage, new ImGearARTPage());

   This will create a new Art page when an image is loaded.
10. Add the following handlers for "Import Annotations" and "Burn In" buttons:
    

    C#

    Copy Code

    private void buttonImportAnnotations_Click(object sender, RoutedEventArgs e) { // Prompt the user to select an image file OpenFileDialog ofd = new OpenFileDialog(); ofd.Filter = "XML files (*.xml)|*.xml|All files (*.*)|*.*"; ofd.FilterIndex = 1; bool? result = ofd.ShowDialog(); if (!result.HasValue || !result.Value) return; // Read the contents of the file string fileName = ofd.File.Name; Stream f = ofd.File.OpenRead(); // Open it with ImageGearART pageView.Display.ARTPage = ImGearART.LoadPage(f, 0); pageView.Update(false); } private void buttonBurnIn_Click(object sender, RoutedEventArgs e) { ImGearPage page = pageView.Display.Export(); pageView.Display = new ImGearPresentationPageDisplay(page, new ImGearARTPage()); pageView.Update(); }

11. The sample is now complete. Right-click SilverlighttutorialTestPage.html in the Solution Explorer and set it as the start up project, then press F5 to launch the sample.