<Canvas Width="900" Height="600"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Loaded="javascript:slider_Loaded" >

  <Canvas>
     <Canvas x:Name="MainImageCanvas" Cursor="Hand" Opacity="0"
        MouseLeftButtonDown="javascript:MainImage_MouseLeftButtonDown" 
        MouseLeftButtonUp="javascript:MainImage_MouseLeftButtonUp"
        MouseMove="javascript:MainImage_MouseMove"
    >
     <Image Source="../images/VistaFish.png" x:Name="MainImagePNG"/>
        <Canvas.RenderTransform>
       <TransformGroup>
              <SkewTransform x:Name="MainSkewTransform" /> <!-- AngleY="-8" AngleX="0" CenterX="0" CenterY="0"/> -->
              <ScaleTransform x:Name="MainScaleTransform" /> <!-- ScaleY="-.5"/> -->
       </TransformGroup>
        </Canvas.RenderTransform>
     </Canvas>

     <Canvas x:Name="ReflectionImageCanvas" Cursor="Hand" Opacity="0"
        MouseLeftButtonDown="javascript:ReflImage_MouseLeftButtonDown" 
        MouseLeftButtonUp="javascript:ReflImage_MouseLeftButtonUp"
        MouseMove="javascript:ReflImage_MouseMove"
        >
        <Image Source="../images/VistaFish.png" x:Name="ReflImagePNG"/>

       <Canvas.RenderTransform>
          <TransformGroup>
             <SkewTransform x:Name="ReflectionSkewTransform" /> <!-- AngleY="15" AngleX="-20" CenterX="60" CenterY="00"/> -->
             <ScaleTransform x:Name="ReflectionScaleTransform" /> <!-- ScaleY="-.5"/> -->
          </TransformGroup>
       </Canvas.RenderTransform>

      <Canvas.OpacityMask>
         <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
         <GradientStop Offset="0.25" Color="#00000000" x:Name="ReflGradientStop1" /> 
            <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" /> 
         </LinearGradientBrush>
      </Canvas.OpacityMask>

     </Canvas>

  </Canvas>

  <!--                            -->
  <!--                            -->
  <!-- C H E C K B O X    C O D E -->
  <!--                            -->
  <!--                            -->
  
  <!-- Main Checkbox -->
  <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
  <Canvas Canvas.Top="0" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="javascript:MainCheckBox" >
    <Glyphs x:Name="MainCheckbox" Canvas.Left="0" Canvas.Top="2" 
     Fill="white" FontUri="./wingding.ttf" FontRenderingEmSize="16" Indices="133" />
    <TextBlock x:Name="MainCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Main Image"  />
  </Canvas>
  
  <!-- Reflection Checkbox -->
  <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
  <Canvas Canvas.Top="40" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="javascript:ReflectionCheckBox" >
    <Glyphs x:Name="ReflectionCheckBox" Canvas.Left="0" Canvas.Top="2" 
     Fill="white" FontUri="./wingding.ttf" FontRenderingEmSize="16" Indices="133" />
    <TextBlock x:Name="ReflectionCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Reflection Image"  />
  </Canvas>

  <!-- Controls Checkbox -->
  <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
  <Canvas Canvas.Top="80" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="javascript:ControlsCheckBox" >
    <Glyphs x:Name="ControlsCheckBox" Canvas.Left="0" Canvas.Top="2" 
     Fill="white" FontUri="./wingding.ttf" FontRenderingEmSize="16" Indices="133" />
    <TextBlock x:Name="ControlsCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Show Controls"  />
  </Canvas>

  <!--                                               -->
  <!--                                               -->
  <!-- R E F L E C T I O N   G R A P H I C   C O D E -->
  <!--                                               -->
  <!--                                               -->
  
  <!-- Reflection Skew AngleX Slider -->

  <Canvas x:Name="Rslider_SkewAngleX" Canvas.Top="200" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_SkewAngleX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_SkewAngleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_SkewAngleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Skew AngleX"/>
  </Canvas>

  <!-- Reflection Skew AngleY Slider -->

  <Canvas x:Name="Rslider_SkewAngleY" Canvas.Top="200" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_SkewAngleY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_SkewAngleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_SkewAngleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Skew AngleY"/>
  </Canvas>

  <!-- Reflection Skew CenterX Slider -->

  <Canvas x:Name="Rslider_SkewCenterX" Canvas.Top="270" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_SkewCenterX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_SkewCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_SkewCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Skew CenterX"/>
  </Canvas>

  <!-- Reflection Skew CenterY Slider -->

  <Canvas x:Name="Rslider_SkewCenterY" Canvas.Top="270" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_SkewCenterY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_SkewCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_SkewCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Skew CenterY"/>
  </Canvas>

  <!-- Reflection Scale ScaleX Slider -->

  <Canvas x:Name="Rslider_ScaleScaleX" Canvas.Top="340" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_ScaleScaleX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_ScaleScaleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_ScaleScaleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Scale ScaleX"/>
  </Canvas>

  <!-- Reflection Scale ScaleY Slider -->

  <Canvas x:Name="Rslider_ScaleScaleY" Canvas.Top="340" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_ScaleScaleY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_ScaleScaleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_ScaleScaleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Scale ScaleY"/>
  </Canvas>

  <!-- Reflection Scale CenterX Slider -->

  <Canvas x:Name="Rslider_ScaleCenterX" Canvas.Top="410" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_ScaleCenterX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_ScaleCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_ScaleCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Scale CenterX"/>
  </Canvas>

  <!-- Reflection Scale CenterY Slider -->

  <Canvas x:Name="Rslider_ScaleCenterY" Canvas.Top="410" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_ScaleCenterY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_ScaleCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_ScaleCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Scale CenterY"/>
  </Canvas>

  <!-- Reflection Canvas Left Slider -->

  <Canvas x:Name="Rslider_CanvasLeft" Canvas.Top="480" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_CanvasLeft" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_CanvasLeft"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_CanvasLeft" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Canvas Left"/>
  </Canvas>

  <!-- Reflection Canvas Top Slider -->

  <Canvas x:Name="Rslider_CanvasTop" Canvas.Top="480" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Rslider_line_CanvasTop" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Rslider_thumb_CanvasTop"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="RsliderPos_CanvasTop" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Canvas Top"/>
  </Canvas>


  <!--                                   -->
  <!--                                   -->
  <!-- M A I N   G R A P H I C   C O D E -->
  <!--                                   -->
  <!--                                   -->

  <!-- Main Skew AngleX Slider -->

  <Canvas x:Name="Mslider_SkewAngleX" Canvas.Top="200" Canvas.Left="0" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_SkewAngleX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_SkewAngleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_SkewAngleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Skew AngleX"/>
  </Canvas>

  <!-- Main Skew AngleY Slider -->

  <Canvas x:Name="Mslider_SkewAngleY" Canvas.Top="200" Canvas.Left="230" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_SkewAngleY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_SkewAngleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_SkewAngleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Skew AngleY"/>
  </Canvas>

  <!-- Main Skew CenterX Slider -->

  <Canvas x:Name="Mslider_SkewCenterX" Canvas.Top="270" Canvas.Left="0" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_SkewCenterX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_SkewCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_SkewCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Skew CenterX"/>
  </Canvas>

  <!-- Main Skew CenterY Slider -->

  <Canvas x:Name="Mslider_SkewCenterY" Canvas.Top="270" Canvas.Left="230" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_SkewCenterY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_SkewCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_SkewCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Skew CenterY"/>
  </Canvas>

  <!-- Main Scale ScaleX Slider -->

  <Canvas x:Name="Mslider_ScaleScaleX" Canvas.Top="340" Canvas.Left="0" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_ScaleScaleX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_ScaleScaleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_ScaleScaleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Scale ScaleX"/>
  </Canvas>

  <!-- Main Scale ScaleY Slider -->

  <Canvas x:Name="Mslider_ScaleScaleY" Canvas.Top="340" Canvas.Left="230" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_ScaleScaleY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_ScaleScaleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_ScaleScaleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Scale ScaleY"/>
  </Canvas>

  <!-- Main Scale CenterX Slider -->

  <Canvas x:Name="Mslider_ScaleCenterX" Canvas.Top="410" Canvas.Left="0" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_ScaleCenterX" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_ScaleCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_ScaleCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Scale CenterX"/>
  </Canvas>

  <!-- Main Scale CenterY Slider -->

  <Canvas x:Name="Mslider_ScaleCenterY" Canvas.Top="410" Canvas.Left="230" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_ScaleCenterY" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_ScaleCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_ScaleCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Scale CenterY"/>
  </Canvas>

  <!-- Main Canvas Left Slider -->

  <Canvas x:Name="Mslider_CanvasLeft" Canvas.Top="480" Canvas.Left="0" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_CanvasLeft" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_CanvasLeft"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_CanvasLeft" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Canvas Left"/>
  </Canvas>

  <!-- Main Canvas Top Slider -->

  <Canvas x:Name="Mslider_CanvasTop" Canvas.Top="480" Canvas.Left="230" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Mslider_line_CanvasTop" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Mslider_thumb_CanvasTop"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="MsliderPos_CanvasTop" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Canvas Top"/>
  </Canvas>

  <!-- Gradient Stop 1 Slider -->

  <Canvas x:Name="Oslider_GradientStop1" Canvas.Top="130" Canvas.Left="460" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Oslider_line_GradientStop1" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Oslider_thumb_GradientStop1"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="OsliderPos_GradientStop1" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Gradient Stop 1"/>
  </Canvas>

  <!-- Gradient Stop 2 Slider -->

  <Canvas x:Name="Oslider_GradientStop2" Canvas.Top="130" Canvas.Left="690" Width="200" Height="45" Opacity="0"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="Oslider_line_GradientStop2" Stroke="steelblue" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="Oslider_thumb_GradientStop2"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="OsliderPos_GradientStop2" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
    <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Gradient Stop 2"/>
  </Canvas>

</Canvas>