• 1.移动的矩形


     序:从今天开始,我将带领大家一步一步的学会如何使用C#开发一套WPF版本的OA系统,过程中我会尽量的开源,并对相关小技巧进行解释和介绍。

         多余的话不多说了,最后来句发自肺腑的话吧:本系列目的是帮助新手党快速入门,解决问题有思路,不要从新手党变成伸手党。

         前言:WPF开发的是桌面应用程序,即将全面取代Winform,并且Windows 7集成.NET3.5+框架。Xaml 语言是其布局页面语言,可以理解成web项目中的html +css+js.

         好了,本篇帖子的目的是稍微普及下wpf框架和xaml语言。我将做一个矩形,该矩形会随着鼠标的移动也移动。

         首先我们新建一个WPF项目,接下来打开Window1.xaml进入视图代码编辑器,这里我们这样写:

    <Window x:Class="ultratekflyWpf.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" >
        <Canvas x:Name="Carrier" Width="800" Height="600" Background="Wheat"
    
                MouseLeftButtonDown="Carrier_MouseLeftButtonDown" />
    </Window>

      x:Class 指的是 程序集名.类名。 xmlns 是引用程序集的规范写法。 第二行,第三行,表示 从.net框架中 引用 =号后面的程序集供给我们当前的程序使用, xlmns:x 这个x是我们给他后面的程序集起的一个别名,方便我们在下面的xaml代码中使用。 譬如 x:name. 

     在该Windows 标记下, 第一个子布局容器是 canvas(也是唯一一个),canvas布局容器的特点类似于 winform的panel,通过padding 和margin 属性来控制其内容控件的位置。然后我们注册了 该canvas的鼠标左击事件。 在左击该canvas时 将触发该事件。  不要将背景色去掉,否则在Canvas中无内容时,无背景色将影响Fill填充宽高从而无法实现MouseLeftButtonDown点击事件)。Canvas作为容器可以实现它内部的控件任意的绝对定位,可以很方便的处理物体的移动。

         界面容器元素布局好了,那么接下来就动态创建物体对象了:

     Rectangle rect;
            public Window1()
            {
                InitializeComponent();
                rect = new Rectangle();
                rect.Fill = new SolidColorBrush(Colors.Red);
                rect.Width = 50;
                rect.Height = 50;
                rect.RadiusX = 5;
                rect.RadiusY = 5;
                Carrier.Children.Add(rect);
                Canvas.SetLeft(rect, 0);
                Canvas.SetTop(rect, 0);
            }
    

      

     这里我创建了一个50*50象素,圆角5*5红色的方块对象,并且将它作为子控件添加进Carrier中,并且初始化它在Carrier中的位置: Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);

         对象准备好了,那么接下来就是实现动画了。我们要实现的是鼠标点哪它就移动到哪:

        private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
    
                //创建移动动画
    
                Point p = e.GetPosition(Carrier);
    
                Storyboard storyboard = new Storyboard();
    
                //创建X轴方向动画
    
                DoubleAnimation doubleAnimation = new DoubleAnimation(
    
                  Canvas.GetLeft(rect),
    
                  p.X,
    
                  new Duration(TimeSpan.FromMilliseconds(500))
    
                );
    
                Storyboard.SetTarget(doubleAnimation, rect);
    
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
    
                storyboard.Children.Add(doubleAnimation);
    
                //创建Y轴方向动画
    
                doubleAnimation = new DoubleAnimation(
    
                  Canvas.GetTop(rect),
    
                  p.Y,
    
                  new Duration(TimeSpan.FromMilliseconds(500))
    
                );
    
                Storyboard.SetTarget(doubleAnimation, rect);
    
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
    
                storyboard.Children.Add(doubleAnimation);
    
                //将动画动态加载进资源内
    
                if (!Resources.Contains("rectAnimation"))
                {
    
                    Resources.Add("rectAnimation", storyboard);
    
                }
    
                //动画播放
    
                storyboard.Begin();
    
            }
    

       从上面代码我们可以看到,首先获取鼠标点击点相对于Carrier中的坐标位置p,然后创建故事板storyboardDouble类型动画doubleAnimationdoubleAnimation3个参数,分别代表开始值,结束值,动画经历时间,接着通过Storyboard.SetTarget()Storyboard.SetTargetProperty()分别设置动画的目标及要修改的动画目标属性,再下来将doubleAnimation添加进storyboard中,这样重复两次分别实现X轴和Y轴方向的动画。一切就绪后,通过代码storyboard.Begin()来开始动画。

  • 相关阅读:
    ES6 generator生成器
    ES6 Class类(简单理解封装和继承)
    谷歌(chrome)浏览器下载文件另存为其它地址
    ES6 中的解构数组和对象
    获取数组中某一个元素的下标
    删除数组对象中某一个指定的对象
    jquery复选框全选功能
    正则获取字符串中的数字
    js刷新当前页面,刷新父页面
    找出最长序列的长度
  • 原文地址:https://www.cnblogs.com/spectre/p/3506160.html
Copyright © 2020-2023  润新知