silverlight   发布时间:2022-05-04  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

  我们接着上节继续讲,上节我们把按钮的基本轮廓和颜色都已经完成了,这节我们将加入一些事件处理和动画效果,让我们的按钮更加绚丽; 相信大家一定都很喜欢看电影吧,每个电影都有剧本,演员按照剧本里的要求来表演,什么时候该做什么,什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此,有些不同我们把“剧本”叫做“Storyboard故事板”,每个故事板都对应一个“TimeLine”,我们把需要运
 

我们接着上节继续讲,上节我们把按钮的基本轮廓和颜色都已经完成了,这节我们将加入一些事件处理和动画效果,让我们的按钮更加绚丽;

相信大家一定都很喜欢看电影吧,每个电影都有剧本,演员按照剧本里的要求来表演,什么时候该做什么,什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此,有些不同我们把“剧本”叫做“Storyboard故事板”,每个故事板都对应一个TimeLine”,我们把需要运动的对象在TimeLine中设置,然后我们在后台代码中控制“storyboard”,让他开始、停止、暂停、继续。这样一个动画就形成了。

我们先来用“storyboard”制作一个动画效果,让一个矩形水平移动;

我们在主工作区先放置一个矩形,然后改变他的内部填充(渐变填充),再放置一个SL自带的按钮

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””



@H_403_98@ 

我们来比喻下,那个矩形图形就是我们的演员,那个按钮“Button”就是我们的导演,导演说“开始”那个演员就开始出场,呵呵,我们也能拍电影喽!!下面我们开始写剧本啦!

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

点击

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

我们new新的“storyboard

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

点击ok,看看我们界面上多了什么:

 

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

<!--[if !vml]-->]-->

经过我们的努力“TimeLine”终于出现了,还有那个小红点,表示现在正在录制中。。。相信用过flash的朋友对这个一定很熟悉;

我们先来创建一个起始关键帧:先点击“rectangle@H_404_238@ 然后点击

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

看见那个小白点了吗?那就是我们起始关键帧;

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

我们再来创建结束关键帧,拖动黄色竖到1的位置,并在主工作区水平拖动矩形到另外一个位置,再来看我们的“TimeLine”在1的下方多了一个关键帧

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

再来看我们的主工作区,多了一些点,这些就是轨迹,点的稀疏程度代码移动数度快慢,点越稀速度越快;

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

我们来改变以下他们的运动速度,来个减速运动,在终止点上单击右键,选择”EaseIn”---“75%”,表示减速运动

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

<!--[if !vml]-->

看见了吗?在结束点那变密集了。

我们点击下

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

运行,效果不错吧,开始水平运动了!

当大家点击终点帧的时候不知道大家注意到右侧“Property属性栏了吗?多了一个曲线,这个是做什么的呢?是用来调节速度了,斜率越大加速度越大;

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

下面我们该安排我们的“导演”(按钮)了,

来到我们的工程面板,单击右键,来到“Edit in Visual studio,把我们的工程在Visual studio2008中打开;然后我们在Blend中对按钮添加事件;

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

先选中按钮,再选中“Property“中的

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

用过vs的朋友一定很熟悉这个了,我们双击“Click“,blend将帮助我们自动跳转vs2008中,他帮我们生成一个函数Button_Click

  1. private void Button_Click(object sender, routedEventArgs E)
  2.         {
  3.         }

我们只需要this.Storyboard1.begin();一句话就可以让Storyboard1开始运行;

  1. private void Button_Click(object sender, routedEventArgs E)
  2.         {
  3.             this.Storyboard1.begin();
  4.         }

我们Save下,然后按F5运行,然后点击Button,看见了么?开始运动了!!

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

下面我们来改造上节课做的Button

首先,我们把“Rectangle“和”textblock“用一个canvas包裹起来,方法是:选中他们,然后单击右键选中”Group Into -->> “Canvas”,这样我们就把他们组合成一个整体;

1.      Canvas增加”Mouse Enter”动画,增加一个故事板,起名为“@H_199_30@mEnter”这是鼠标移入的效果@H_404_238@ 我们给他设置起点和终点帧,我们可以在终点帧上改变字体大小和Rectangle的渐变效果

2.      同样我们用相同的方法Canvas增加”Mouse Leave”动画,起名为“@H_199_30@mLeave”这是鼠标离开时的效果,可以弄一个@H_199_30@mEnter”相反的动画

3.      增加鼠标左键点击时效果@H_199_30@mouse LeftButton Down”起名为“@H_199_30@mDown

4.      增加鼠标左键放开时效果,可以是“@H_199_30@mouse LeftButton Down”相反动画,起名为“@H_199_30@mUp

然后我们用事件来驱动这些动画效果

 

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””

  1. private void Canvas_MouseEnter(object sender, MouseEventArgs E)
  2.         {
  3.             this.MEnter.begin();
  4.         }
  5.         private void Canvas_MouSELEave(object sender, MouseEventArgs E)
  6.         {
  7.             this.MLeave.begin();
  8.         }
  9.         private void Canvas_MouSELEftButtonDown(object sender, MouseButtonEventArgs E)
  10.         {
  11.             this.MDown.begin();
  12.            
  13.         }
  14.         private void Canvas_MouSELEftButtonUp(object sender, MouseButtonEventArgs E)
  15.         {
  16.             this.MUp.begin();
  17.         }

这是我弄的一些效果

按钮常态:

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

鼠标移入时:

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

鼠标移出时:

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

鼠标点击时:

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

鼠标方开时:

(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””


 

Xaml代码

  1. <Storyboard x:Name="MEnter" AutoReverse="false" repeatBehavior="1x">
  2.             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSizE)">
  3.                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="11"/>
  4.                 <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="13"/>
  5.             </DoubleAnimationUsingKeyFrames>
  6.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
  7.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFEFE3E3"/>
  8.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF5DE374"/>
  9.             </ColorAnimationUsingKeyFrames>
  10.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
  11.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF1E4E38"/>
  12.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFD4396B"/>
  13.             </ColorAnimationUsingKeyFrames>
  14.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
  15.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFDF662C"/>
  16.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFE26B32"/>
  17.             </ColorAnimationUsingKeyFrames>
  18.         </Storyboard>
  19.         <Storyboard AutoReverse="false" repeatBehavior="1x" x:Name="MLeave">
  20.             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSizE)">
  21.                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="13"/>
  22.                 <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="11"/>
  23.             </DoubleAnimationUsingKeyFrames>
  24.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
  25.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5DE374"/>
  26.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFEFE3E3"/>
  27.             </ColorAnimationUsingKeyFrames>
  28.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
  29.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFD4396B"/>
  30.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF1E4E38"/>
  31.             </ColorAnimationUsingKeyFrames>
  32.             <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
  33.                 <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFE26B32"/>
  34.                 <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDF662C"/>
  35.             </ColorAnimationUsingKeyFrames>
  36.         </Storyboard>
  37.         <Storyboard x:Name="MDown">
  38.             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.stroke).(LinearGradientBrush.StartPoint)">
  39.                 <SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.494,0"/>
  40.             </PointAnimationUsingKeyFrames>
  41.             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.stroke).(LinearGradientBrush.EndPoint)">
  42.                 <SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.506,1"/>
  43.             </PointAnimationUsingKeyFrames>
  44.         </Storyboard>
  45.         <Storyboard x:Name="MUp">
  46.             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.stroke).(LinearGradientBrush.StartPoint)">
  47.                 <SplinePointKeyFrame KeyTime="00:00:00" Value="0.@L_616_50@,0"/>
  48.                 <SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.501999974250793,1"/>
  49.             </PointAnimationUsingKeyFrames>
  50.             <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.stroke).(LinearGradientBrush.EndPoint)">
  51.                 <SplinePointKeyFrame KeyTime="00:00:00" Value="0.498,1"/>
  52.                 <SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.497999995946884,0"/>
  53.             </PointAnimationUsingKeyFrames>
  54.         </Storyboard>
  55.     </UserControl.resources>
  56.     <Grid x:Name="LayoutRoot">
  57.         <Grid.columnDeFinitions>
  58.             <columnDeFinition Width="0*"/>
  59.             <columnDeFinition Width="143"/>
  60.             <columnDeFinition Width="*"/>
  61.         </Grid.columnDeFinitions>
  62.         <Grid HorizontalAlignment="Stretch" Grid.column="1" Grid.columnSpan="2">
  63.             <Canvas MouseEnter="Canvas_MouseEnter" MouSELEave="Canvas_MouSELEave" cursor="Hand" MouSELEftButtonDown="Canvas_MouSELEftButtonDown" MouSELEftButtonUp="Canvas_MouSELEftButtonUp">
  64.                 <Rectangle radiusY="14" radiusX="14" strokeThickness="5" strokeDashCap="Triangle" strokeEndLineCap="Round" strokeDashOffset="0" strokeStartLineCap="Square" strokeDashArray="0 0" Height="44" Width="145" x:Name="rectangle">
  65.                     <Rectangle.stroke>
  66.                         <LinearGradientBrush EndPoint="0.498,0" StartPoint="0.@L_616_50@,1">
  67.                             <GradientStop Color="#FF000000"/>
  68.                             <GradientStop Color="#FFFFFFFF" Offset="1"/>
  69.                         </LinearGradientBrush>
  70.                     </Rectangle.stroke>
  71.                     <Rectangle.Fill>
  72.                         <LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
  73.                             <GradientStop Color="#FF1E4E38" Offset="0"/>
  74.                             <GradientStop Color="#FFDF662C" Offset="0.979"/>
  75.                         </LinearGradientBrush>
  76.                     </Rectangle.Fill>
  77.                 </Rectangle>
  78.                 <TextBlock textwrapping="Wrap" Foreground="#FFEFE3E3" Height="14" Width="64" Canvas.Left="48" Canvas.Top="16" x:Name="textBlock"><Run text="Click Me"/><LineBreak/><Run text=""/></TextBlock>
  79.             </Canvas>
  80.         </Grid>

大佬总结

以上是大佬教程为你收集整理的(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””全部内容,希望文章能够帮你解决(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。