与众不同 windows phone (17)

与众不同 windows phone (17)

[源码下载]

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

作者：webabcd


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

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

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

<phone:PhoneApplicationPage     x:    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    ="http://schemas.microsoft.com/expression/blend/2008"    ="http://schemas.open    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:    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    ="http://schemas.microsoft.com/expression/blend/2008"    ="http://schemas.open    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:    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    ="http://schemas.microsoft.com/expression/blend/2008"    ="http://schemas.open    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:    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    ="http://schemas.microsoft.com/expression/blend/2008"    ="http://schemas.open    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:    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    ="http://schemas.microsoft.com/winfx/2006/xaml"    ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    ="http://schemas.microsoft.com/expression/blend/2008"    ="http://schemas.open    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
[源码下载]

TAG: