(3下)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””
2008-10-23 13:14
507 查看
v/:* {behavior:url(#default#VML);}
o/:* {behavior:url(#default#VML);}
w/:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
我们接着上节继续讲,上节我们把按钮的基本轮廓和颜色都已经完成了,这节我们将加入一些事件处理和动画效果,让我们的按钮更加绚丽;
相信大家一定都很喜欢看电影吧,每个电影都有剧本,演员按照剧本里的要求来表演,什么时候该做什么,什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此,有些不同我们把“剧本”叫做“Storyboard故事板”,每个故事板都对应一个“TimeLine”,我们把需要运动的对象在TimeLine中设置,然后我们在后台代码中控制“storyboard”,让他开始、停止、暂停、继续。这样一个动画就形成了。
我们先来用“storyboard”制作一个动画效果,让一个矩形水平移动;
我们在主工作区先放置一个矩形,然后改变他的内部填充(渐变填充),再放置一个SL自带的按钮
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/1633603645541406250.PNG)
我们来比喻下,那个矩形图形就是我们的演员,那个按钮“Button”就是我们的导演,导演说“开始”那个演员就开始出场,呵呵,我们也能拍电影喽!!下面我们开始写剧本啦!
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/2.PNG)
点击
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/3.jpg)
我们new新的“storyboard”
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/4.PNG)
点击ok,看看我们界面上多了什么:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/5.PNG)
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/6.PNG)
<!--[if !vml]-->]-->
经过我们的努力“TimeLine”终于出现了,还有那个小红点,表示现在正在录制中。。。相信用过flash的朋友对这个一定很熟悉;
我们先来创建一个起始关键帧:先点击“rectangle” 然后点击
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/7.jpg)
看见那个小白点了吗?那就是我们起始关键帧;
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/8.PNG)
我们再来创建结束关键帧,拖动黄色竖到1的位置,并在主工作区水平拖动矩形到另外一个位置,再来看我们的“TimeLine”在1的下方多了一个关键帧
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/9.PNG)
再来看我们的主工作区,多了一些点,这些就是轨迹,点的稀疏程度代码移动数度快慢,点越稀速度越快;
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/10.PNG)
我们来改变以下他们的运动速度,来个减速运动,在终止点上单击右键,选择”EaseIn”---“75%”,表示减速运动
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/11.PNG)
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/12.PNG)
<!--[if !vml]-->
看见了吗?在结束点那变密集了。
我们点击下
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/13.jpg)
运行,效果不错吧,开始水平运动了!
当大家点击终点帧的时候不知道大家注意到右侧“Property”属性栏了吗?多了一个曲线,这个是做什么的呢?是用来调节速度了,斜率越大加速度越大;
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/14.PNG)
下面我们该安排我们的“导演”(按钮)了,
来到我们的工程面板,单击右键,来到“Edit in Visual Studio“,把我们的工程在Visual Studio2008中打开;然后我们在Blend中对按钮添加事件;
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/15.PNG)
先选中按钮,再选中“Property“中的
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/16.jpg)
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/17.png)
用过vs的朋友一定很熟悉这个了,我们双击“Click“,blend将帮助我们自动跳转到vs2008中,他帮我们生成了一个函数Button_Click
private void Button_Click(object sender, RoutedEventArgs e)
{
}
我们只需要this.Storyboard1.Begin();一句话就可以让Storyboard1开始运行;
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Storyboard1.Begin();
}
我们Save下,然后按F5运行,然后点击Button,看见了么?开始运动了!!
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/18.PNG)
下面我们来改造上节课做的Button;
首先,我们把“Rectangle“和”textblock“用一个canvas包裹起来,方法是:选中他们,然后单击右键选中”Group Into “ -->> “Canvas”,这样我们就把他们组合成一个整体;
1. 给Canvas增加”Mouse Enter”动画,增加一个故事板,起名为“MEnter”这是鼠标移入的效果, 我们给他设置起点和终点帧,我们可以在终点帧上改变字体大小和Rectangle的渐变效果
2. 同样我们用相同的方法给Canvas增加”Mouse Leave”动画,起名为“MLeave”这是鼠标离开时的效果,可以弄一个和MEnter”相反的动画
3. 增加鼠标左键点击时效果“Mouse LeftButton Down”起名为“MDown”
4. 增加鼠标左键放开时效果,可以是“Mouse LeftButton Down”相反动画,起名为“MUp”
然后我们用事件来驱动这些动画效果:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/19.PNG)
private void Canvas_MouseEnter(object sender, MouseEventArgs e)
{
this.MEnter.Begin();
}
private void Canvas_MouseLeave(object sender, MouseEventArgs e)
{
this.MLeave.Begin();
}
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.MDown.Begin();
}
private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.MUp.Begin();
}
这是我弄的一些效果:
按钮常态:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/20.PNG)
鼠标移入时:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/21.PNG)
鼠标移出时:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/22.PNG)
鼠标点击时:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/23.PNG)
鼠标方开时:
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/24.PNG)
Xaml代码:
<Storyboard x:Name="MEnter" AutoReverse="False" RepeatBehavior="1x">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="11"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="13"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFEFE3E3"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF5DE374"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF1E4E38"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFD4396B"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFDF662C"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFE26B32"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard AutoReverse="False" RepeatBehavior="1x" x:Name="MLeave">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="13"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="11"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5DE374"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFEFE3E3"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFD4396B"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF1E4E38"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFE26B32"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDF662C"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="MDown">
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)">
<SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.494,0"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)">
<SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.506,1"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="MUp">
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.502,0"/>
<SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.501999974250793,1"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.498,1"/>
<SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.497999995946884,0"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="143"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Column="1" Grid.ColumnSpan="2">
<Canvas MouseEnter="Canvas_MouseEnter" MouseLeave="Canvas_MouseLeave" Cursor="Hand" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp">
<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">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
<GradientStop Color="#FF1E4E38" Offset="0"/>
<GradientStop Color="#FFDF662C" Offset="0.979"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<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>
</Canvas>
</Grid>
o/:* {behavior:url(#default#VML);}
w/:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
我们接着上节继续讲,上节我们把按钮的基本轮廓和颜色都已经完成了,这节我们将加入一些事件处理和动画效果,让我们的按钮更加绚丽;
相信大家一定都很喜欢看电影吧,每个电影都有剧本,演员按照剧本里的要求来表演,什么时候该做什么,什么时候该说什么都是有要求的。同样我们在制作动画的时候也是如此,有些不同我们把“剧本”叫做“Storyboard故事板”,每个故事板都对应一个“TimeLine”,我们把需要运动的对象在TimeLine中设置,然后我们在后台代码中控制“storyboard”,让他开始、停止、暂停、继续。这样一个动画就形成了。
我们先来用“storyboard”制作一个动画效果,让一个矩形水平移动;
我们在主工作区先放置一个矩形,然后改变他的内部填充(渐变填充),再放置一个SL自带的按钮
我们来比喻下,那个矩形图形就是我们的演员,那个按钮“Button”就是我们的导演,导演说“开始”那个演员就开始出场,呵呵,我们也能拍电影喽!!下面我们开始写剧本啦!
点击
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/3.jpg)
我们new新的“storyboard”
点击ok,看看我们界面上多了什么:
<!--[if !vml]-->]-->
经过我们的努力“TimeLine”终于出现了,还有那个小红点,表示现在正在录制中。。。相信用过flash的朋友对这个一定很熟悉;
我们先来创建一个起始关键帧:先点击“rectangle” 然后点击
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/7.jpg)
看见那个小白点了吗?那就是我们起始关键帧;
我们再来创建结束关键帧,拖动黄色竖到1的位置,并在主工作区水平拖动矩形到另外一个位置,再来看我们的“TimeLine”在1的下方多了一个关键帧
再来看我们的主工作区,多了一些点,这些就是轨迹,点的稀疏程度代码移动数度快慢,点越稀速度越快;
我们来改变以下他们的运动速度,来个减速运动,在终止点上单击右键,选择”EaseIn”---“75%”,表示减速运动
<!--[if !vml]-->
看见了吗?在结束点那变密集了。
我们点击下
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/13.jpg)
运行,效果不错吧,开始水平运动了!
当大家点击终点帧的时候不知道大家注意到右侧“Property”属性栏了吗?多了一个曲线,这个是做什么的呢?是用来调节速度了,斜率越大加速度越大;
下面我们该安排我们的“导演”(按钮)了,
来到我们的工程面板,单击右键,来到“Edit in Visual Studio“,把我们的工程在Visual Studio2008中打开;然后我们在Blend中对按钮添加事件;
先选中按钮,再选中“Property“中的
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/16.jpg)
![](http://p.blog.csdn.net/images/p_blog_csdn_net/jake_jrc/EntryImages/20081023/17.png)
用过vs的朋友一定很熟悉这个了,我们双击“Click“,blend将帮助我们自动跳转到vs2008中,他帮我们生成了一个函数Button_Click
private void Button_Click(object sender, RoutedEventArgs e)
{
}
我们只需要this.Storyboard1.Begin();一句话就可以让Storyboard1开始运行;
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Storyboard1.Begin();
}
我们Save下,然后按F5运行,然后点击Button,看见了么?开始运动了!!
下面我们来改造上节课做的Button;
首先,我们把“Rectangle“和”textblock“用一个canvas包裹起来,方法是:选中他们,然后单击右键选中”Group Into “ -->> “Canvas”,这样我们就把他们组合成一个整体;
1. 给Canvas增加”Mouse Enter”动画,增加一个故事板,起名为“MEnter”这是鼠标移入的效果, 我们给他设置起点和终点帧,我们可以在终点帧上改变字体大小和Rectangle的渐变效果
2. 同样我们用相同的方法给Canvas增加”Mouse Leave”动画,起名为“MLeave”这是鼠标离开时的效果,可以弄一个和MEnter”相反的动画
3. 增加鼠标左键点击时效果“Mouse LeftButton Down”起名为“MDown”
4. 增加鼠标左键放开时效果,可以是“Mouse LeftButton Down”相反动画,起名为“MUp”
然后我们用事件来驱动这些动画效果:
private void Canvas_MouseEnter(object sender, MouseEventArgs e)
{
this.MEnter.Begin();
}
private void Canvas_MouseLeave(object sender, MouseEventArgs e)
{
this.MLeave.Begin();
}
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
this.MDown.Begin();
}
private void Canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.MUp.Begin();
}
这是我弄的一些效果:
按钮常态:
鼠标移入时:
鼠标移出时:
鼠标点击时:
鼠标方开时:
Xaml代码:
<Storyboard x:Name="MEnter" AutoReverse="False" RepeatBehavior="1x">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="11"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="13"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFEFE3E3"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF5DE374"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF1E4E38"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFD4396B"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFDF662C"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFE26B32"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard AutoReverse="False" RepeatBehavior="1x" x:Name="MLeave">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="13"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="11"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF5DE374"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFEFE3E3"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFD4396B"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF1E4E38"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FFE26B32"/>
<SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#FFDF662C"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="MDown">
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)">
<SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.494,0"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)">
<SplinePointKeyFrame KeyTime="00:00:00.3000000" Value="0.506,1"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="MUp">
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.502,0"/>
<SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.501999974250793,1"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.498,1"/>
<SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.497999995946884,0"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="143"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Stretch" Grid.Column="1" Grid.ColumnSpan="2">
<Canvas MouseEnter="Canvas_MouseEnter" MouseLeave="Canvas_MouseLeave" Cursor="Hand" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" MouseLeftButtonUp="Canvas_MouseLeftButtonUp">
<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">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.498,0" StartPoint="0.502,1">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.494,1" StartPoint="0.496,0.023" SpreadMethod="Pad">
<GradientStop Color="#FF1E4E38" Offset="0"/>
<GradientStop Color="#FFDF662C" Offset="0.979"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<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>
</Canvas>
</Grid>
相关文章推荐
- (3上)Silverlight开发工具Microsoft Expression Blend 2 之“States和Object面板简单“按钮””
- (1)Silverlight开发工具Microsoft Expression Blend 2 之“Hello SilverLight”
- (4)Silverlight开发工具Microsoft Expression Blend 2 之“Combine切割组合效果”
- (2)Silverlight开发工具Microsoft Expression Blend 2 之“左侧ToolBox”
- 使用Microsoft Expression Blend制作漂亮Silverlight按钮模版
- Microsoft Expression Blend Preview for Silverlight 5新版发布 推荐
- 在Microsoft Expression Blend 2 中绘制圆角矩形按钮
- 使用VS2008+Microsoft Expression Blend 2.5 March 2008开发SilverLght
- Microsoft Expression Blend Preview for Silverlight 5新版发布
- Microsoft Expression Blend Preview for Silverlight 5新版发布
- 在Microsoft Expression Blend 2 中绘制圆角矩形按钮
- Microsoft Expression Blend Preview for Silverlight 5新版发布
- Microsoft Expression Blend Preview for Silverlight 5新版发布
- 演练:使用 Microsoft Expression Blend 创建按钮
- Microsoft Expression Blend Preview for Silverlight 5新版发布
- Expression Blend for Visual Studio 11 Beta 简单体验一
- 五大Linux工具 让开发更简单
- Silverlight开发工具汇总
- Silverlight的开发工具 转http://blog.csdn.net/dotnetwalker/archive/2007/10/24/1841847.aspx
- Silverlight开发工具汇总