XAML for producing this page:

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Rectangle Height="200" Width="200" Canvas.Left="0" Canvas.Top="0"
      MouseLeftButtonDown="javascript:YellowRectangle"
      Stroke="Black" StrokeThickness="0" Fill="CornSilk"/>

  <Rectangle Height="200" Width="200" Canvas.Left="100" Canvas.Top="100"
      MouseLeftButtonDown="javascript:BlueRectangle"
      Stroke="Black" StrokeThickness="0" Fill="LightBlue"/>

  <Line X1="10" Y1="290" X2="150" Y2="150" Stroke="#cc0000" StrokeThickness="10"
      MouseLeftButtonDown="javascript:LowerRedLine" />

  <Ellipse Height="150" Width="200" Canvas.Left="30" Canvas.Top="30"
      MouseLeftButtonDown="javascript:Ellipse"
      Stroke="Black" StrokeThickness="10" Fill="SteelBlue"/>

  <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z" MouseLeftButtonDown="javascript:Pointer"
      Stroke="Black" Fill="SlateBlue"
      Canvas.Left="10" Canvas.Top="10" />

  <Line X1="150" Y1="150" X2="290" Y2="10" Stroke="#cc0000" StrokeThickness="10"
      MouseLeftButtonDown="javascript:UpperRedLine" />

  <Path Data="M 10,100 C 10,300 300,-200 250,100z" MouseLeftButtonDown="javascript:Path"
      Stroke="#cc0000" Fill="#ffff00"
      Canvas.Left="10" Canvas.Top="10">
    <Path.OpacityMask>
      <LinearGradientBrush>
        <GradientStop Offset="0.25" Color="#00000000"/>
        <GradientStop Offset="1" Color="#FF000000"/>
      </LinearGradientBrush>
    </Path.OpacityMask>

  </Path>

  <Polygon Points="290,290 150,290 290,150" Stroke="Blue" StrokeThickness="10"
     MouseLeftButtonDown="javascript:Polygon">
     <Polygon.Fill>
      <RadialGradientBrush GradientOrigin=".97,.1">
        <GradientStop Color="White" Offset="0.0" />
        <GradientStop Color="LightGray" Offset="0.15" />
        <GradientStop Color="Gray" Offset="0.5" />
        <GradientStop Color="Black" Offset="1.0" />
      </RadialGradientBrush>
     </Polygon.Fill>
  </Polygon>

  <Polygon Opacity=".2" Points="50,290 100,170 200,290" Stroke="Blue"
     StrokeThickness="1" Fill="White"
     MouseLeftButtonDown="javascript:OpaquePolygon" />

  <Polyline Points="5,280 0,200 80,200" Stroke="Blue" StrokeThickness="10"
     MouseLeftButtonDown="javascript:Polyline"/>

  <!-- Hyperlink to Page 2 -->
  <Canvas Width="100" Height="50" Canvas.Left="120" Canvas.Top="5"
     Background="transparent"
     MouseEnter="javascript:_linkEnter"
     MouseLeave="javascript:_linkLeave"
     MouseLeftButtonDown="javascript:_linkDown">

     <TextBlock FontSize="14"
         FontFamily="Comic Sans MS"
         Text="To Page 2" Foreground="Blue" />
     <Line Stroke="Blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
          x:Name="ToPage2Line" Opacity="0" />
  </Canvas>
  <!-- Hyperlink to Page 2 -->

</Canvas>