在前两篇文章中我们已经创建了“放大镜效果”和“放大镜CheckBox”本篇内容将通过CheckBox来控制放大镜效果开/关状态并完成全部“放大镜”功能在进行本篇内容前请确保您已经阅读过:

· Expression Blend Samples 项目下载安装后将Expression.Samples.Interactivity、Expression.Samples.Shaders 加入Reference:



 

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

public MagnierOverBehavior : BaseBehavior<FrameworkElement>

 

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

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

 

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

private void AssociatedObject_MouseMove( object sender, MouseEventArgs e ) { (IsEnabled) { (this.AssociatedObject.Effect != this.magnier) { this.AssociatedObject.Effect = this.magnier; } (this.AssociatedObject.Effect as Magnier).Center = e.GetPosition(this.AssociatedObject); Po mousePosition = e.GetPosition(this.AssociatedObject); mousePosition.X /= this.AssociatedObject.ActualWidth; mousePosition.Y /= this.AssociatedObject.ActualHeight; this.magnier.Center = mousePosition; Storyboard zoomInStoryboard = Storyboard; DoubleAnimation zoomInAnimation = DoubleAnimation; zoomInAnimation.To = this.magnier.Magnication; zoomInAnimation.Duration = TimeSpan.FromSeconds(0.5); Storyboard.SetTarget(zoomInAnimation, this.AssociatedObject.Effect); Storyboard.SetTargetProperty(zoomInAnimation,
PropertyPath(Magnier.MagnicationProperty)); zoomInAnimation.FillBehavior = FillBehavior.HoldEnd; zoomInStoryboard.Children.Add(zoomInAnimation); zoomInStoryboard.Begin; } }

 

4. 回到Blend在TreeView 中打开magnierCanvas 选择MagnierOverBehavior 将其命名为magnierBehavior并将IsEnabled 属性设为false:



 

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





 

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

    · EventName: Checked
    · TargetName: magnierCanvas
    · ObjectName: magnierBehavior
    · PropertyName: IsEnabled
    · Value: true



 

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

    · EventName: Unchecked
    · TargetName: magnierCanvas
    · ObjectName: magnierBehavior
    · PropertyName: IsEnabled
    · Value: false



 

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







 

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



 

源代码下载:


 作者: Gnie  出处: {GnieTech} (http://www.cnblogs.com/gnielee/)  版权声明: 本文版权归作者和博客园共有转载时须注明本文详细链接否则作者将保留追究其法律责任