稳扎稳打Silverlight（1） - 1.0实例之电子表

稳扎稳打Silverlight（1） - 1.0实例之电子表2010-04-26 cnblogs webabcd例

Clock.xaml（用Expression Blend开发）

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="180" Height="150"
  Background="#0030628D"
  x:Name="Page" Loaded="enableClock"
  >
  <Rectangle x:Name="Frame" Width="180" Height="150" Stroke="#FF000000" StrokeThickness="1" RadiusX="20" RadiusY="15">
    <Rectangle.Fill>
      <LinearGradientBrush EndPoint="0.5,1.1" StartPoint="0.5,-0.1">
        <GradientStop Color="#FF259888" Offset="0"/>
        <GradientStop Color="#FF259888" Offset="0.981"/>
        <GradientStop Color="#FFC87947" Offset="0.416"/>
        <GradientStop Color="#FFC87947" Offset="0.636"/>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  <Rectangle x:Name="Panel" Width="164" Height="134" Fill="#7F91B52C" Stroke="#FFA2AEBF" RadiusX="50" RadiusY="15" Canvas.Left="8" Canvas.Top="8" StrokeThickness="2"/>

  <Path x:Name="Line1" Width="163" Height="1" Fill="#FF100888" Stretch="Fill" Stroke="#FF1B510C" Canvas.Left="8" Canvas.Top="92" Data="M33.50029,83.29705 L161.89657,83.297051"/>
  <Path x:Name="Line2" Width="1" Height="49" Fill="#FF100888" Stretch="Fill" Stroke="#FF1B510C" Canvas.Left="63" Canvas.Top="92" Data="M81.450752,138.29705 L81.450752,90.29705"/>
  <Path x:Name="Line3" Width="1" Height="49" Fill="#FF100888" Stretch="Fill" Stroke="#FF1B510C" Canvas.Left="119" Canvas.Top="92" Data="M118.30501,164.29698 L118.30501,116.29699"/>

  <TextBlock x:Name="Month" Width="16" Height="19" Canvas.Left="32.5" Canvas.Top="92" TextWrapping="Wrap" Foreground="#FF100888" Text="M"/>
  <TextBlock Width="16" Height="19" Canvas.Left="87" Canvas.Top="92" TextWrapping="Wrap" x:Name="Day" Foreground="#FF100888" Text="D"/>
  <TextBlock Width="16" Height="19" Canvas.Left="136" Canvas.Top="92" TextWrapping="Wrap" x:Name="Week" Foreground="#FF100888" Text="W"/>

  <TextBlock x:Name="txtMonth" Width="19" Height="19" Canvas.Left="29" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="12"/>
  <TextBlock x:Name="txtDay" Width="20.5" Height="19" Canvas.Left="83.5" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="31"/>
  <TextBlock x:Name="txtWeek" Width="32.5" Height="19" Canvas.Left="130" Canvas.Top="111" TextWrapping="Wrap" Foreground="#FF100888" Text="Sun"/>

  <TextBlock x:Name="txtHour" Width="48" Height="48" Canvas.Left="14.5" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="23"/>
  <TextBlock x:Name="txtMinute" Width="48" Height="48" Canvas.Left="68.5" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/>
  <TextBlock x:Name="txtSecond" Width="49" Height="48" Canvas.Left="122" Canvas.Top="38" TextWrapping="Wrap" FontSize="36" Foreground="#FF100888" Text="59"/>

  <TextBlock x:Name="Colon1" Width="9.5" Height="27" Canvas.Left="62.5" Canvas.Top="48" TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/>
  <TextBlock x:Name="Colon2" Width="12" Height="27" Canvas.Left="116.5" Canvas.Top="48" TextWrapping="Wrap" Foreground="#FF100888" Text=":" FontSize="20"/>

  <TextBlock x:Name="Copyright" Width="88" Height="16" Canvas.Left="16" TextWrapping="Wrap" FontSize="12" Canvas.Top="22" Foreground="#FF100888" Text="webabcd clock" MouseLeftButtonDown="MouseLeftButtonDown" MouseMove="MouseMove" MouseLeave="MouseLeave"/>
  <TextBlock x:Name="FullScreen" Width="88" Height="16" Canvas.Left="106" TextWrapping="Wrap" FontSize="12" Canvas.Top="22" Foreground="#FF100888" Text="FullScreen" MouseLeftButtonDown="toggle_fullScreen" MouseMove="MouseMove" MouseLeave="MouseLeave"/>
</Canvas>

Clock.xaml.js

if （！window.Clock）
  window.Clock = {};

Clock.Page = function（）
{
}

Clock.Page.prototype =
{
  handleLoad: function（control, userContext, rootElement）
  {
    this.control = control;

    // Sample event hookup:  
    rootElement.addEventListener（"MouseLeftButtonDown", Silverlight.createDelegate（this, this.handleMouseDown））;
  },

  // Sample event handler
  handleMouseDown: function（sender, eventArgs）
  {
    // The following line of code shows how to find an element by name and call a method on it.
    // this.control.content.findName（"Timeline1"）.Begin（）;
  }
}

// TextBlock的MouseLeftButtonDown调用的方法
function MouseLeftButtonDown（sender, args）
{
  window.open（"http://webabcd.cnblogs.com"）;
}

// TextBlock的MouseMove调用的方法
function MouseMove（sender, args）
{
  // TextBlock.foreground
  sender.foreground = "red";
  // TextBlock.textDecorations
  sender.textDecorations = "underline";
}

// TextBlock的MouseLeave调用的方法
function MouseLeave（sender, args）
{
  // TextBlock.foreground
  sender.foreground = "#FF100888";
  // TextBlock.textDecorations
  sender.textDecorations = "none";
}