HTC到StoryBoard——DHTML迁移到WPF（二）

下载：http://files.cnblogs.com/civ3/storyBoard.rar

微软支持HTML组件技术HTC，但是安全和性能都有一定缺陷。在WPF中，利用StoryBoard可以快速实现一些以前需要用HTC才能较好实现的DHTML效果。
以下两个例子都很简单只是为了说明问题：
复用
DHTML:Style（+behavior）
WPF:Resource
形状
DHTML:VML的Shape，或DIV矩形
WPF:Rectangle
事件与行为
DHTML:Event.element用JS脚本
WPF:丰富的故事板特性

以下是源程序
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 >

转载于:https://www.cnblogs.com/civ3/archive/2006/02/12/329359.html