<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Loaded="javascript:slider_Loaded" >
  <!-- Original Button -->
  <Canvas
      x:Name="Rectbutton"
      Canvas.Top="10" Canvas.Left="20"
      MouseLeftButtonDown="javascript:button_MouseLeftButtonDown"
      MouseLeftButtonUp="javascript:button_MouseLeftButtonUp"
      MouseEnter="javascript:button_MouseEnter"
      MouseLeave="javascript:button_MouseLeave"
      >
    <Canvas.RenderTransform>
      <TransformGroup>
        <TranslateTransform x:Name="button_transform" X="0" Y="0"/>
      </TransformGroup>
    </Canvas.RenderTransform>
    <Rectangle Stroke="#FF000000" Fill="LightBlue" 
        Width="128.8" Height="56" x:Name="button_rectangle"/>
    <Rectangle Stroke="DarkBlue" StrokeThickness="5"
        Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
        Opacity="0"
        x:Name="button_highlight"/>
    <TextBlock x:Name="UpperText" Text="Press me!" 
        FontSize="20" Canvas.Left="22" Canvas.Top="12"/>

  </Canvas>

  <!-- Lower Button -->
  <Canvas
      x:Name="Rectbutton2"
      Canvas.Top="100" Canvas.Left="20"
      MouseLeftButtonDown="javascript:button_MouseLeftButtonDown"
      MouseLeftButtonUp="javascript:button_MouseLeftButtonUp"
      MouseEnter="javascript:button_MouseEnter"
      MouseLeave="javascript:button_MouseLeave"
      >
    <Canvas.RenderTransform>
      <TransformGroup>
        <TranslateTransform x:Name="button_transform2" X="0" Y="0"/>
      </TransformGroup>
    </Canvas.RenderTransform>
    <Rectangle Stroke="#FF000000" Fill="LightBlue"
        Width="165.8" Height="56" x:Name="button_rectangle2"/>
    <Rectangle Stroke="DarkBlue" StrokeThickness="5"
        Width="163.8" Height="54" Canvas.Left="1" Canvas.Top="1"
        Opacity="0"
        x:Name="button_highlight2"/>
    <TextBlock x:Name="LowerText" Text="Press me too!" 
        FontSize="20" Canvas.Left="20" Canvas.Top="12"/>
  </Canvas>

  <!-- Slider -->
  <Canvas x:Name="slider" Canvas.Top="200" Canvas.Left="20" 
     Width="200" Height="45"
     Background="transparent"
     MouseLeftButtonDown="javascript:slider_MouseLeftButtonDown">
    <Line x:Name="slider_line" Stroke="black" 
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
    <Path x:Name="slider_thumb"  Stroke="#FF000000" 
       Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
       Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
       MouseLeftButtonUp="javascript:slider_thumb_MouseLeftButtonUp"
       MouseMove="javascript:slider_thumb_MouseMove"
       MouseLeftButtonDown="javascript:slider_thumb_MouseLeftButtonDown" />
    <TextBlock x:Name="SliderPos" FontSize="20" 
       Canvas.Left="95" Canvas.Top="50"  />
  </Canvas>

</Canvas>