Blend设计VSM

    Silverlight中的ControlTemplate(1)-概念

     Silverlight中的ControlTemplate(2)-概念

     Silverlight中的ControlTemplate(3)-Blend设计ControlTemplate

     

    上一篇我是通过Blend简单的演示如何修改ControlTemplate,这一篇关注VSM这个部分。

    概念的东西就不再重复了,这篇通过Blend演示如何一步一步设计VisualStateManager

    首先在WorkSpace上放置一个椭圆,这里设置一下其Name和Fill属性

image

  在Blend3中,对一个FrameworkElement元素应用动画时,Blend会自动对未命名的元素进行处理,这里我们将椭圆命名为MyEliipse

  现在开始设计动画,为了简单起见,这里就设计当鼠标进入MyEllipse时,填充色由红变为黄色

  选择MyEllipse(默认快捷键V)

        image

选中之后,我们打开States面板

           image  因为理论性的东西前面几篇文章已经分析过了,所以这里就不花篇幅了

  如上图所示,单击Add state group这个按钮,创建一个VisualStateGroup,给其命名为CommonStates,并将默认的Transition时间

变换为0.5s 

image   现在单击 Add State按钮添加一个State,并且命名为MouseEnter,这个时候你会发现,Workspace会出现红色边线

   image   这个其实就是提醒你,这时候对VisualTree的任何改变将记录到一个Storyboard中

image 这个时候就可以通过点击Objects and Timeline中的Show Timeline按钮对Timeline进行动画修改咧,

确保选中MyEllipse图形,通过Recode Keyfrme按钮记录动画

image 这里按照前面的想法,当鼠标进入时,将MyEllipse的Fill属性由Red改为Yellow

     image 

  这样我们就设计好了一个VisualState了,那么这里我另外再设计一个名MouseLeave的 VisualState,使得鼠标移走时,颜色由黄色变回红色

  其实过程都是一样的,我就不重复了。

                                image  那么如果想修改状态迁移,也可以直接在Blend中修改。

  可以看看生成的XAML代码:      image

    为了看到效果,我们在VS中进行设置:

         private void MyEllipse_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "MouseEnter", true);
        }
        private void MyEllipse_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
        {
            VisualStateManager.GoToState(this, "MouseLeave", true);
        }

  这里用到了VisualStateManager类中的GoToState这个方法,运行一下就可以看到效果了

  其实到这里已经把前面VSM里大部分概念都涉及到了,给我的感觉这个地方如果掌握的好,并且还有好的创意,

我相信做出来的效果肯定很炫。这篇就到这里,希望对使用Blend的朋友有点帮助。

 

 

 

本篇代码:Silverlight3环境  VSMExample

posted @ 2010-12-13 15:59  ringgo  阅读(2584)  评论(1编辑  收藏  举报