civ3

编程好玩

导航

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

下载：https://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>

posted on 2006-02-12 21:11  civ3's .NET studying  阅读(445)  评论(0)    收藏  举报