HTC to StoryBoard - DHTML migrate to WPF (b)

Download: http://files.cnblogs.com/civ3/storyBoard.rar

Microsoft supports HTML component technology HTC, but the safety and performance have some drawbacks. In WPF, you can quickly achieve some DHTML effects that previously required by HTC in order to achieve better utilization StoryBoard.
The following two examples are very simple just to illustrate the problem:
multiplexing
DHTML: Style (+ behavior)
WPF: Resource
shape
DHTML: VML's Shape, DIV or rectangular
WPF: Rectangle
events and behavior
DHTML: Event.element with JS script
WPF: rich story board features

the following is the source
DHTML

< html >< head >
< style  type ="text/css" >
.oStyle{}{
    behavior:url(storyBoard.htc);
    background-color:Blue;
}
</ style >

< title > Civ3's testing on Storyboard </ title >
</ head >
< body >
< div  style ="width:100px; height:100px;"  class ="oStyle" ></ div >
</ body ></ html >

.htc

< PUBLIC:ATTACH EVENT = " onmouseover "  ONEVENT = " mouseover() " />  
< PUBLIC:ATTACH EVENT = " onmouseout "  ONEVENT = " mouseout() " />  
< PUBLIC:ATTACH EVENT = " onmousedown "  ONEVENT = " mousedown() " />  
< PUBLIC:ATTACH EVENT = " onmouseup "  ONEVENT = " mouseup() " />
< SCRIPT LANGUAGE = " JScript " >
     function  mouseover() {
    event.srcElement.style.backgroundColor='red'; 
}
function  mouseout() {
    event.srcElement.style.backgroundColor='blue'; 
    event.srcElement.style.width=100;
}
function  mousedown() {
    event.srcElement.style.width=110; 
}
function  mouseup() {
    event.srcElement.style.width=100;
}
</ SCRIPT >

XAML

< Page  xmlns ="http://schemas.microsoft.com/winfx/avalon/2005"  
  xmlns:x ="http://schemas.microsoft.com/winfx/xaml/2005"
  WindowTitle ="Civ3's testing on Storyboard" >
< Page .Resources >
  < Style  TargetType ="{x:Type Rectangle}"  x:Key ="oStyle" >
     < Setter  Property ="Rectangle.Fill" >
         < Setter .Value >
           < SolidColorBrush  Color ="Blue" />
         </ Setter.Value >
     </ Setter >
     < Style .Triggers >
      < EventTrigger  RoutedEvent ="Rectangle.MouseEnter" >
       < EventTrigger .Actions >
           < BeginStoryboard >
             < Storyboard >               
               < ColorAnimation 
                 Storyboard.TargetProperty ="(Rectangle.Fill).(SolidColorBrush.Color)"
                From ="Blue"  To ="Red"  Duration ="0:0:.5"   />   
             </ Storyboard >
           </ BeginStoryboard >
       </ EventTrigger.Actions >
          </ EventTrigger >

      < EventTrigger  RoutedEvent ="Rectangle.MouseLeave" >
       < EventTrigger .Actions >
           < BeginStoryboard >
             < Storyboard >               
               < ColorAnimation 
                 Storyboard.TargetProperty ="(Rectangle.Fill).(SolidColorBrush.Color)"
                To ="Blue"  Duration ="0:0:.5"   />
         < DoubleAnimation
             Storyboard.TargetProperty ="Width"
        To ="100"  Duration ="0:0:.2"   />
             </ Storyboard >

           </ BeginStoryboard >
       </ EventTrigger.Actions >
          </ EventTrigger >

      < EventTrigger  RoutedEvent ="Rectangle.MouseDown" >
       < EventTrigger .Actions >
           < BeginStoryboard >
             < Storyboard >               
               < DoubleAnimation
             Storyboard.TargetProperty ="Width"
        By ="10"  Duration ="0:0:.2"   />   
             </ Storyboard >
           </ BeginStoryboard >
       </ EventTrigger.Actions >
          </ EventTrigger >

      < EventTrigger  RoutedEvent ="Rectangle.MouseUp" >
       < EventTrigger .Actions >
           < BeginStoryboard >
             < Storyboard >               
               < DoubleAnimation
             Storyboard.TargetProperty ="Width"
        To ="100"  Duration ="0:0:.2"   />   
             </ Storyboard >
           </ BeginStoryboard >
       </ EventTrigger.Actions >
          </ EventTrigger >

     </ Style.Triggers >
  </ Style >
</ Page.Resources >
   < StackPanel  Margin ="20" >

    
     < Rectangle  Name ="MyRectangle"  Width ="100"  Height ="100"  Style ="{StaticResource oStyle}" />
   </ StackPanel >
</ Page >

Reproduced in: https: //www.cnblogs.com/civ3/archive/2006/02/12/329359.html