备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

与众不同 windows phone (17) - Graphic and Animation（画图和动画）

2014-02-22 777
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:与众不同 windows phone (17) - Graphic and Animation（画图和动画）[索引页][源码下载] 与众不同 windows phone (17) - Graphic and Animation（画图和动画） 作者：webabcd介绍与众不同 windows phone 7.
原文: 与众不同 windows phone (17) - Graphic and Animation（画图和动画）

[索引页]
[源码下载]


与众不同 windows phone (17) - Graphic and Animation（画图和动画）



作者：webabcd


介绍
与众不同 windows phone 7.5 (sdk 7.1) 之画图和动画

  • 图形
  • 画笔
  • 转换
  • 动画
  • 缓动



示例
1、图形（Shape）
ShapeDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.GraphicAndAnimation.ShapeDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Name="root" Orientation="Vertical" HorizontalAlignment="Left">

            <!--
                以 xaml 的方式绘制图形
                更多详细内容请参见：
                    http://www.cnblogs.com/webabcd/archive/2008/10/23/1317407.html
                    http://www.cnblogs.com/webabcd/archive/2008/10/27/1320098.html
            -->
            
            <!--画矩形-->
            <Rectangle Width="200" Height="50" Fill="Red" Stroke="Yellow" StrokeThickness="3" />

            <!--画多条连接起来的直线-->
            <Polyline Points="10,100 50,10 100,100" Stroke="Green" StrokeThickness="20" StrokeLineJoin="Round" />

            <!--画直线-->
            <Line X1="0" Y1="0" X2="400" Y2="0" Stroke="Blue" StrokeThickness="10" StrokeDashArray="2,4,6" StrokeDashCap="Triangle" />

            <!--画椭圆-->
            <Ellipse Stroke="Red" Fill="Yellow" StrokeThickness="6" Width="100" Height="50"></Ellipse>

        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

ShapeDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.GraphicAndAnimation
{
    public partial class ShapeDemo : PhoneApplicationPage
    {
        public ShapeDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ShapeDemo_Loaded);
        }

        void ShapeDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 以 代码 的方式绘制图形

            // 画多边形
            Polygon polygon = new Polygon();
            polygon.Stroke = new SolidColorBrush(Colors.Purple);
            polygon.StrokeThickness = 3d;
            polygon.Points.Add(new Point(0, 0));
            polygon.Points.Add(new Point(100, 0));
            polygon.Points.Add(new Point(0, 100));
            polygon.Points.Add(new Point(100, 100));

            root.Children.Add(polygon);
        }
    }
}


2、画笔（Brush）
BrushDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.GraphicAndAnimation.BrushDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Name="root" Orientation="Vertical" HorizontalAlignment="Left">

            <!--
                以 xaml 的方式应用画笔
                更多详细内容请参见：
                    http://www.cnblogs.com/webabcd/archive/2008/10/30/1322658.html
            -->

            <Ellipse Margin="10" Width="200" Height="100" Stroke="Yellow" StrokeThickness="3">
                <Ellipse.Fill>
                    <!--单色画笔-->
                    <SolidColorBrush Color="#FF0000" Opacity="0.5"  />
                </Ellipse.Fill>
            </Ellipse>

            <MediaElement x:Name="mediaElement" Source="Assets/Demo.mp4" Width="0" Height="0" />
            <Rectangle Width="300" Height="100">
                <Rectangle.Fill>
                    <!--视频画笔-->
                    <VideoBrush SourceName="mediaElement" />
                </Rectangle.Fill>
            </Rectangle>
            
        </StackPanel>
    </Grid>
 
</phone:PhoneApplicationPage>

BrushDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.GraphicAndAnimation
{
    public partial class BrushDemo : PhoneApplicationPage
    {
        public BrushDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(BrushDemo_Loaded);
        }

        void BrushDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 以 代码 的方式应用画笔

            // 使用放射性渐变画笔
            GradientStop gs1 = new GradientStop();
            gs1.Color = Colors.Red;
            gs1.Offset = 0d;
            GradientStop gs2 = new GradientStop();
            gs2.Color = Colors.Green;
            gs2.Offset = 0.3d;
            GradientStop gs3 = new GradientStop();
            gs3.Color = Colors.Blue;
            gs3.Offset = 1d;

            LinearGradientBrush brush = new LinearGradientBrush();
            brush.StartPoint = new Point(0, 0);
            brush.EndPoint = new Point(1, 1);
            brush.GradientStops.Add(gs1);
            brush.GradientStops.Add(gs2);
            brush.GradientStops.Add(gs3);

            Rectangle rect = new Rectangle();
            rect.Width = 200d;
            rect.Height = 200d;
            rect.Fill = brush;

            root.Children.Add(rect);
        }
    }
}


3、转换（Transform）
TransformDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.GraphicAndAnimation.TransformDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Name="root" Orientation="Vertical">

            <!--
                以 xaml 的方式应用转换
                更多详细内容请参见：
                    http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
                    http://www.cnblogs.com/webabcd/archive/2010/08/25/1807797.html
            -->

            <!--复合转换-->
            <Rectangle Height="100" Width="100" Fill="Red">
                <Rectangle.RenderTransform>
                    <CompositeTransform SkewX="30" Rotation="60" ScaleX="0.6" ScaleY="0.3" />
                </Rectangle.RenderTransform>
            </Rectangle>

            <!-- 用 TransformGroup（多个单一转换组合在一次） 的方式达到上面的 CompositeTransform 的相同效果 -->
            <Rectangle Height="100" Width="100" Fill="Red">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.6" ScaleY="0.3" />
                        <SkewTransform AngleX="30" />
                        <RotateTransform Angle="60" />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

TransformDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.GraphicAndAnimation
{
    public partial class TransformDemo : PhoneApplicationPage
    {
        public TransformDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(TransformDemo_Loaded);
        }

        void TransformDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 以 代码 的方式应用转换

            // 使用旋转转换
            RotateTransform rt = new RotateTransform();
            rt.Angle = 30;

            Rectangle rect = new Rectangle();
            rect.Width = 200d;
            rect.Height = 200d;
            rect.Fill = new SolidColorBrush(Colors.Green);
            rect.RenderTransform = rt;

            root.Children.Add(rect);
        }
    }
}


4、动画（Animation）
AnimationDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.GraphicAndAnimation.AnimationDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Name="root" Orientation="Vertical">
            
            <!--
                以 xaml 的方式增加动画效果
                更多详细内容请参见：
                    http://www.cnblogs.com/webabcd/archive/2008/11/06/1327758.html
            -->

            <!--给 Rectangle 的 Width 增加动画效果-->
            <StackPanel.Resources>
                <BeginStoryboard x:Name="beginStoryboard">
                    <Storyboard x:Name="storyboard">
                        <DoubleAnimation 
                            Storyboard.TargetName="rectangle" 
                            Storyboard.TargetProperty="Width"
                            From="200"
                            To="100"
                            Duration="00:00:03"
                            AutoReverse="True"
                            RepeatBehavior="Forever">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </StackPanel.Resources>

            <Rectangle x:Name="rectangle" Width="200" Height="100" Fill="Red" StrokeThickness="6" />

        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

AnimationDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.GraphicAndAnimation
{
    public partial class AnimationDemo : PhoneApplicationPage
    {
        public AnimationDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(AnimationDemo_Loaded);
        }

        void AnimationDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 以 代码 的方式增加动画效果

            // 画个圆
            Ellipse ellipse = new Ellipse();
            ellipse.Width = 100d;
            ellipse.Height = 100d;
            ellipse.Fill = new SolidColorBrush(Colors.Green);
            root.Children.Add(ellipse);


            // 为上面画的圆增加颜色动画效果
            ColorAnimation ca = new ColorAnimation();
            ca.Duration = TimeSpan.FromSeconds(2);
            ca.From = Colors.Green;
            ca.To = Colors.Blue;
            ca.AutoReverse = true;
            ca.RepeatBehavior = RepeatBehavior.Forever;

            Storyboard.SetTarget(ca, ellipse);
            Storyboard.SetTargetProperty(ca, new PropertyPath("(Ellipse.Fill).(SolidColorBrush.Color)"));

            Storyboard s = new Storyboard();
            s.Children.Add(ca);
            s.Begin();
        }
    }
}


5、缓动（Easing）
EasingDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.GraphicAndAnimation.EasingDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Name="root" Orientation="Vertical">

            <!--
                以 xaml 的方式为动画增加缓动效果
                更多详细内容请参见：
                    http://www.cnblogs.com/webabcd/archive/2009/08/20/1550334.html
            -->

            <!--给 Rectangle 的 Width 增加动画效果，同时为此动画增加缓动效果-->
            <StackPanel.Resources>
                <BeginStoryboard x:Name="beginStoryboard">
                    <Storyboard x:Name="storyboard">
                        <DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="Width" From="400" To="100" Duration="00:00:05" AutoReverse="True" RepeatBehavior="Forever">
                            <DoubleAnimation.EasingFunction>
                                <!--增加缓动效果-->
                                <BounceEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </StackPanel.Resources>

            <Rectangle x:Name="rectangle" Width="400" Height="100" Fill="Red" StrokeThickness="6" />

        </StackPanel>
    </Grid>
 
</phone:PhoneApplicationPage>

EasingDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.GraphicAndAnimation
{
    public partial class EasingDemo : PhoneApplicationPage
    {
        public EasingDemo()
        {
            InitializeComponent(); 
            
            this.Loaded += new RoutedEventHandler(AnimationDemo_Loaded);
        }

        void AnimationDemo_Loaded(object sender, RoutedEventArgs e)
        {
            // 以 代码 的方式增加动画效果

            // 画个圆
            Ellipse ellipse = new Ellipse();
            ellipse.Width = 100d;
            ellipse.Height = 100d;
            ellipse.Fill = new SolidColorBrush(Colors.Green);
            root.Children.Add(ellipse);


            // 为上面画的圆增加颜色动画效果
            ColorAnimation ca = new ColorAnimation();
            ca.Duration = TimeSpan.FromSeconds(5);
            ca.From = Colors.Green;
            ca.To = Colors.Blue;
            ca.AutoReverse = true;
            ca.RepeatBehavior = RepeatBehavior.Forever;

            // 为颜色动画增加缓动效果
            EasingFunctionBase easing = new BounceEase();
            easing.EasingMode = EasingMode.EaseInOut;
            ca.EasingFunction = easing;

            Storyboard.SetTarget(ca, ellipse);
            Storyboard.SetTargetProperty(ca, new PropertyPath("(Ellipse.Fill).(SolidColorBrush.Color)"));

            Storyboard s = new Storyboard();
            s.Children.Add(ca);
            s.Begin();
        }
    }
}



OK
[源码下载]

文章标签：
Shell
Windows
关键词：
Windows画图
杰克.陈
目录
相关文章
心无旁骛～
|
编译器 Python Windows
解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全
解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全，我们在jupyter的notebook中使用matplotlib画图的时候，经常性的会遇见一些中文乱码显示□的情况,如下所示:
心无旁骛～
427 0
解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全
我爱matlab
|
Windows
使用matlab实现类似windows系统中的画图小软件,带GUI界面
使用matlab实现类似windows系统中的画图小软件,带GUI界面
我爱matlab
352 0
使用matlab实现类似windows系统中的画图小软件,带GUI界面
游客rigajubvzf2hs
|
Python Windows
python+windows画图工具--复现别人论文中的colormap 方法2
python+windows画图工具--复现别人论文中的colormap 方法2
游客rigajubvzf2hs
158 0
python+windows画图工具--复现别人论文中的colormap 方法2
流楚丶格念
|
Windows
Windows程序设计——GDI基本画图的操作实现
Windows程序设计——GDI基本画图的操作实现
流楚丶格念
257 0
技术小胖子
|
Android开发 Windows
Windows Phone 7 不温不火学习之《画图》
技术小胖子
946 0
技术小美
|
Linux Windows
用Windows画图改变图片大小（附Linux企鹅头像完全版）。
技术小美
1351 0
晚来风急
|
Windows
微软将很快就要为Windows 10带来全新“画图”软件
晚来风急
892 0
w风雨无阻w
|
1月前
|
安全 数据安全/隐私保护 Windows
解锁安全之门，Windows Server 2019密码修改攻略大揭秘
解锁安全之门，Windows Server 2019密码修改攻略大揭秘
w风雨无阻w
49 0
w风雨无阻w
|
1月前
|
存储 安全 网络安全
铁壁如墙-WINDOWS SERVER 2019勒索病毒终极防御指南
铁壁如墙-WINDOWS SERVER 2019勒索病毒终极防御指南
w风雨无阻w
40 0
vzmvmwcrnweq2
|
1月前
|
网络协议 数据安全/隐私保护 Windows
Windows Server 各版本搭建域控制器实现通过域管理用户（03~19）
Windows Server 各版本搭建域控制器实现通过域管理用户（03~19）
vzmvmwcrnweq2
45 1

热门文章

最新文章

  • 1
    Windows窗口程序
  • 2
    使用innoSetup将mysql+nginx+redis+jar包打包成windows安装包
  • 3
    安装windows 10操作系统
  • 4
    Windows11 使用 WSL2部署Ubuntu
  • 5
    linux和windows中安装emqx消息服务器
  • 6
    C#winforms实现windows窗体人脸识别
  • 7
    .NET开源免费、功能强大的 Windows 截图录屏神器
  • 8
    【C++/Python】Windows用Swig实现C++调用Python（史上最简单详细，80岁看了都会操作）
  • 9
    安装MyEclipse遇到错误提示 Failed to find a Main Class in “C:Windows\Temp\“时的解决方案
  • 10
    HBuilder开发者必备！Windows上传IPA文件的软件分享
  • 1
    通过Linux挂载Windows端NFS服务实现板端Linux传输文件到PC
    21
  • 2
    Windows公网远程连接MongoDB数据库【无公网IP】
    45
  • 3
    Windows环境下面启动jar包，输出的日志出现乱码的解决办法
    46
  • 4
    Qt5.14.2 轻松掌握Qt中的压缩与解压缩：QuaZIP的神秘面纱与实战演练之windows环境编译
    57
  • 5
    无远不至的掌控力：探索Windows Server 2019的远程访问绝招
    19
  • 6
    windows server 2019 安装NET Framework 3.5失败，提示：“安装一个或多个角色、角色服务或功能失败” 解决方案
    79
  • 7
    解锁安全之门，Windows Server 2019密码修改攻略大揭秘
    49
  • 8
    铁壁如墙-WINDOWS SERVER 2019勒索病毒终极防御指南
    40
  • 9
    Windows Server 2019 IIS HTTPS证书部署流程详解
    56
  • 10
    windows下快速安装nginx 并配置开机自启动
    55

    • 相关电子书

    更多
  • 《云服务器运维之Windows篇》
  • TAKING WINDOWS 10 KERNEL
  • ECS运维指南之Windows系统诊断

    • 相关实验场景

    更多
  • 快速配置Windows云服务器
  • 手动搭建FTP站点（Windows）
    • 下一篇
    阿里云oss简介和使用流程