How To: Create a Silverlight Hypertext Application for Ink Photo Annotation

  • Article

In the following blog entry:

https://blogs.msdn.com/gavingear/archive/2007/05/02/how-to-implement-an-ink-enabled-silverlight-photo-annotation-webpage.aspx

I showed you how to implement a basic Silverlight ink photo annotation webpage. But what if you want to have all of the code encapsulated in one file, and what if you don’t want to use IE as your host? Well, one option is to convert your page to a “Hypertext Application” file (.HTA). The basic steps are to take your xaml, JavaScript, and HTML, and combine them into one HTML file, and save that file with a .HTA file extension rather than a .HTM or .HTML extension. A coworker of mine (Stefan Wick) demonstrated this concept, and I thought I would pass it on to you. In this example, just make sure the image(s) you are annotating are available in the proper location specified relative to the .HTA file.

 

Here's the example HTA file using the code and image from the previous post:

<!-- Silverlight Photo Annotation HTA Example -->

<!-- Gavin Gear, 06/2007 -->

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">

  <head>

    <title>Photo Annotation HTA</title>

    <script type="text/XAML" id="xaml1">

        <Canvas xmlns="https://schemas.microsoft.com/client/2007"

            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

            Loaded="javascript:root_Loaded"

            x:Name="root"

            Width="800" Height="533"

            Background="black">

          <Image Source="lake.jpg"/>

          <InkPresenter

            x:Name="inkPresenterElement"

            Background="transparent"

            Width="800" Height="533"

            MouseLeftButtonDown="javascript:InkPresenterMouseDown"

            MouseMove="javascript:InkPresenterMouseMove"

            MouseLeftButtonUp="javascript:InkPresenterMouseUp"/>

        </Canvas>

    </script>

    <script type="text/javascript">

        var silverlight;

        var inkPresenter; // Corresponds to InkPresenter element in xaml

        var newStroke = null; // The Stroke variable we’ll use here in mouse handlers

        function root_Loaded(sender, args)

       {

            silverlight = sender.getHost();

            inkPresenter = sender.findname("inkPresenterElement");

        }