原文:与众不同 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(, ));

            polygon.Points.Add(new Point(, ));

            polygon.Points.Add(new Point(, ));

            polygon.Points.Add(new Point(, ));

            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(, );

            brush.EndPoint = new Point(, );

            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 = ;

            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();

            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();

            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
[源码下载]

与众不同 windows phone (17) - Graphic and Animation（画图和动画）的更多相关文章

  1. 与众不同 windows phone (24) - Input（输入）之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦

    原文:与众不同 windows phone (24) - Input(输入)之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦 [索引页][源码下载] ...

  2. 背水一战 Windows 10 (17) - 动画: ThemeTransition（过渡效果）

    [源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...

  3. 与众不同 windows phone 8.0 & 8.1 系列文章索引

    [源码下载] [与众不同 windows phone 7.5 (sdk 7.1) 系列文章索引] 与众不同 windows phone 8.0 & 8.1 系列文章索引 作者:webabcd ...

  4. 与众不同 windows phone (18) - Device（设备）之加速度传感器, 数字罗盘传感器

    原文:与众不同 windows phone (18) - Device(设备)之加速度传感器, 数字罗盘传感器 [索引页][源码下载] 与众不同 windows phone (18) - Device ...

  5. 与众不同 windows phone (16) - Media（媒体）之编辑图片, 保存图片到相册, 与图片的上下文菜单“应用程序...”和“共享...”关联, 与 Windows Phone 的图片中心集成

    原文:与众不同 windows phone (16) - Media(媒体)之编辑图片, 保存图片到相册, 与图片的上下文菜单"应用程序..."和"共享..." ...

  6. 与众不同 windows phone (15) - Media（媒体）之后台播放音频

    原文:与众不同 windows phone (15) - Media(媒体)之后台播放音频 [索引页][源码下载] 与众不同 windows phone (15) - Media(媒体)之后台播放音频 ...

  7. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  8. 与众不同 windows phone (13) - Background Task（后台任务）之后台文件传输（上传和下载）

    原文:与众不同 windows phone (13) - Background Task(后台任务)之后台文件传输(上传和下载) [索引页][源码下载] 与众不同 windows phone (13) ...

  9. 与众不同 windows phone (12) - Background Task（后台任务）之 PeriodicTask（周期任务）和 ResourceIntensiveTask（资源密集型任务）

    原文:与众不同 windows phone (12) - Background Task(后台任务)之 PeriodicTask(周期任务)和 ResourceIntensiveTask(资源密集型任 ...

随机推荐

  1. SQL基础使用

    result = executeQuery(“ SELECT FName, FSalary FROM T_Employee ”); for(i=0;i<result.count;i++) { s ...

  2. Oracle中查询各种对象的方法小结

    --查看当前库中的所有表select * from all_tables a where a.table_name='INFOCODE_P20081'--查看表结构select * from all_ ...

  3. c： c代码书写规范

    排版: 较长的语句或函数过程参数(>80字符)要分成多行书写, 长表达式要在低优先级操作符处划分新行,操作符放在新行之首, 划分出的新行要进行适当的缩进,使排版整齐,语句可读 参考: 1. 运算 ...

  4. sencha touch笔记（5）——DataView组件（1）

    1.DataView组件可以显示列表,图像等等的组件或者元素,特别适用于数据仓库频繁更新的情况.比如像显示新闻或者微博等等的很多相同样式的组件的列表这种一次性从后台或者数据源拿取很多数据展示的样式.比 ...

  5. python-Day3-set 集合-counter计数器-默认字典(defaultdict) -可命名元组(namedtuple)-有序字典(orderedDict)-双向队列(deque)--Queue单项队列--深浅拷贝---函数参数

    上节内容回顾:C语言为什么比起他语言块,因为C 会把代码变异成机器码Pyhton 的 .pyc文件是什么python 把.py文件编译成的.pyc文件是Python的字节码, 字符串本质是 字符数组, ...

  6. 我的Python成长之路---第一天---Python基础（2）---2015年12月26日（雾霾）

    三.数据类型 Python基本类型(能够直接处理的数据类型有以下几种)主要有5种 1.整数(int) Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如 ...

  7. 在mac os 中安装 autoconf and automake

    转载地址:http://www.mattvsworld.com/blog/2010/02/install-the-latest-autoconf-and-automake-on-mac-os-10-6 ...

  8. MUI跳转页面传值

    1.打开新的页面.通过 mui.openWindow 打开页面extras参数传递参数 mui.openWindow({ id: "yingshou-" + newid, url: ...

  9. css概述

    前言 1.CSS    cascading   stylesheet  级联样式表 ,外观显示(页面内容显示的方式).CSS文档以.css作为后缀    2.w3c推荐页面文件定义      数据和结 ...

  10. PHP - 概述

    第1章 PHP概述 学习要点: 1.PHP基础知识 2.PHP的环境配置 3.安装三款主流程序 4.PHP开发工具的选择 5.一个简单的示例 一．PHP基础知识 PHP PHP是一种目前最流行的服务端 ...