跟老外学Silverlight游戏 之七 放大镜<3>

原创|其它|编辑:郝浩|2010-01-13 10:25:30.000|阅读 631 次

概述:在前两篇文章中,我们已经创建了“放大镜效果”和“放大镜CheckBox”,本篇内容将通过CheckBox来控制放大镜效果的开/关状态,并完成全部“放大镜”功能。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

       在前两篇文章中,我们已经创建了“放大镜效果”和“放大镜CheckBox”,本篇内容将通过CheckBox来控制放大镜效果的开/关状态,并完成全部“放大镜”功能。 

1. 下载BaseBehavior.zip 进入VS 将以下程序加入到Interactivity 文件夹(参考资料 Base Classes for Custom Behaviors

    · BaseBehavior.cs 
    · BaseBehaviorT.cs

             

 

2. 下载SetInteractionPropertyAction.zip 新增Interactivity\SetInteractionPropertyAction 文件夹,并将以下程序加入其中(参考资料 Creating an Action to set Properties on Actions & Behaviors)

    · ConverterHelper.cs
    · SetInteractionPropertyAction.cs

            

 

添加完以上四个程序,注意其命名空间应为:FindObject

file

 

其中,ConverterHelper.cs 和SetInteractionPropertyAction.cs 程序需要使用CodePlex 的Expression Blend Samples 项目,下载安装后将Expression.Samples.InteractivityExpression.Samples.Shaders 加入Reference:

reference

 

3. 打开MagnifierOverBehavior.cs 要使MagnifierOverBehavior 继承BaseBehavior 类,以此来使用IsEnabled 属性。将Behavior 改为BaseBehavior

public class MagnifierOverBehavior : BaseBehavior<FrameworkElement>

 

 

将AssociatedObject_MouseEnter 默认显示放大镜注释掉,需要通过IsEnabled 来进行调用:

private void AssociatedObject_MouseEnter( object sender, MouseEventArgs e )
{
   this.AssociatedObject.MouseMove += 
new MouseEventHandler( AssociatedObject_MouseMove ); //this.AssociatedObject.Effect = this.magnifier; }

 

 

AssociatedObject_MouseMove 也要通过IsEnabled 来判断是否开启放大镜功能:

private void AssociatedObject_MouseMove( object sender, MouseEventArgs e )
{
   if (IsEnabled)
   {
      if (this.AssociatedObject.Effect != this.magnifier)
      {
         this.AssociatedObject.Effect = this.magnifier;
      }

      (this.AssociatedObject.Effect as Magnifier).Center =
       e.GetPosition(this.AssociatedObject);

      Point mousePosition = e.GetPosition(this.AssociatedObject);
      mousePosition.X /= this.AssociatedObject.ActualWidth;
      mousePosition.Y /= this.AssociatedObject.ActualHeight;
      this.magnifier.Center = mousePosition;

      Storyboard zoomInStoryboard = new Storyboard();
      DoubleAnimation zoomInAnimation = new DoubleAnimation();
      zoomInAnimation.To = this.magnifier.Magnification;
      zoomInAnimation.Duration = TimeSpan.FromSeconds(0.5);
      Storyboard.SetTarget(zoomInAnimation, this.AssociatedObject.Effect);
      Storyboard.SetTargetProperty(zoomInAnimation, 
new PropertyPath(Magnifier.MagnificationProperty)); zoomInAnimation.FillBehavior = FillBehavior.HoldEnd; zoomInStoryboard.Children.Add(zoomInAnimation); zoomInStoryboard.Begin(); } }

 

 

4. 回到Blend,在TreeView 中打开magnifierCanvas 选择MagnifierOverBehavior 将其命名为magnifierBehavior,并将IsEnabled 属性设为false

isenable

 

5. 在Assets->Behaviors 中为CheckBox 添加两个SetInteractionPropertyAction

setinertaction

checkbox

 

6. 第一个SetInteractionPropertyAction 用于启动放大镜功能,进行如下设置:

    · EventName: Checked
    · TargetName: magnifierCanvas
    · ObjectName: magnifierBehavior
    · PropertyName: IsEnabled
    · Value: true

open

 

7. 第二个SetInteractionPropertyAction 用于关闭放大镜功能,进行如下设置:

    · EventName: Unchecked
    · TargetName: magnifierCanvas
    · ObjectName: magnifierBehavior
    · PropertyName: IsEnabled
    · Value: false

close

 

8. 确定CheckBox 的IsChecked 属性是false 状态,运行程序便可实现放大镜可控效果。

ischecked

 

 

 

9. 最后在放大镜下面加一个Notepad 图片,使其更加美观:

notepad

 

源代码下载:

 

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:博客园

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP