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

原文:与众不同 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
[源码下载]

时间： 2024-09-10 21:06:21

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

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

介绍 与众不同 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

与众不同windows phone (23)

Device(设备)之硬件状态, 系统状态, 网络状态 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之设备 硬件状态 系统状态 网络状态 示例 1.演示如何获取硬件的相关状态 HardwareStatus.xaml.cs /* * 演示如何获取设备的硬件信息 */ using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windo

与众不同 windows phone (23) - Device（设备）之硬件状态, 系统状态, 网络状态

原文:与众不同 windows phone (23) - Device(设备)之硬件状态, 系统状态, 网络状态 [索引页][源码下载] 与众不同 windows phone (23) - Device(设备)之硬件状态, 系统状态, 网络状态 作者:webabcd 介绍与众不同 windows phone 7.5 (sdk 7.1) 之设备 硬件状态 系统状态 网络状态 示例1.演示如何获取硬件的相关状态HardwareStatus.xaml.cs /* * 演示如何获取设备的硬件信息 */

与众不同windows phone (32)

Communication(通信)之任意源组播 ASM(Any Source Multicast) 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之通信 实现"任意源多播" - ASM(Any Source Multicast) 示例 实现 ASM 信道 UdpAnySourceMulticastChannel.cs /* * 实现一个 ASM 信道(即 ASM 帮助类),供外部调用 * * * 通过 UdpAnySourceMulticastClient 实

与众不同windows phone (28)

Feature(特性)之手机方向, 本地化, 应用程序的试用体验, 系统主题资源, 本地数据的加密解密 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之特性 手机方向 本地化 应用程序的试用体验 系统主题资源 本地数据的加密解密 示例 1.演示如何响应手机的方向变化 Orientation.xaml <phone:PhoneApplicationPage x:Class="Demo.Feature.Orientation" xmlns="htt

与众不同windows phone (26) Contacts and Calendar（联系人和日历）

介绍 与众不同 windows phone 7.5 (sdk 7.1) 之设备 获取联系人相关数据 获取日历相关数据 示例 1.演示如何获取联系人相关数据 ContactPictureConverter.cs using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; us

与众不同windows phone (25)

Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之设备 捕获 UIElement 之外的触控操作 Silverlight 方式捕获手势操作 XNA 方式捕获手势操作 多点触控 示例 1.演示如何捕获 UIElement 之外的触控操作 OutsideCapture.xaml <phone:PhoneApplicationPage

与众不同windows phone (19)

Device(设备)之陀螺仪传感器, Motion API 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之设备 陀螺仪传感器 Motion API(运动 API) 示例 1.演示如何使用陀螺仪传感器 GyroscopeDemo.xaml <phone:PhoneApplicationPage x:Class="Demo.Device.GyroscopeDemo" xmlns="http://schemas.microsoft.com/winf

与众不同windows phone (18)

Device(设备)之加速度传感器, 数字罗盘传感器 介绍 与众不同 windows phone 7.5 (sdk 7.1) 之设备 加速度传感器(加速度计) 数字罗盘(磁力计) 示例 1.演示如何使用加速度传感器 AccelerometerDemo.xaml <phone:PhoneApplicationPage x:Class="Demo.Device.AccelerometerDemo" xmlns="http://schemas.microsoft.com/wi