Point value animation
<UserControl x:Class='SilverlightApplication3.MainPage'
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
xmlns:d='http://schemas.microsoft.com/expression/blend/2008'
xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'
mc:Ignorable='d'
d:DesignWidth='640' d:DesignHeight='480'>
<UserControl.Resources>
<Storyboard x:Name="MovePointDown">
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)" Duration="00:00:00.50" To="44,277"/>
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)" Duration="00:00:00.50" To="155,277"/>
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)" Duration="00:00:00.50" To="100, 277"/>
</Storyboard>
<Storyboard x:Name="MovePointUp">
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)" Duration="00:00:00.50" To="44,200"/>
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)" Duration="00:00:00.50" To="155,200"/>
<PointAnimation Storyboard.TargetName="RedPath" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)" Duration="00:00:00.50" To="100,200"/>
</Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot" Background="White" >
<Path Height="277" Width="200" Canvas.Left="306" Canvas.Top="65" Fill="#FFFF0000" Stretch="None" x:Name="RedPath" Cursor="Hand">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="200,100">
<BezierSegment Point1="200,155" Point2="155,200" Point3="100,200"/>
<BezierSegment Point1="44,200" Point2="0,155" Point3="0,100"/>
<BezierSegment Point1="10,44" Point2="44,0" Point3="100,0"/>
<BezierSegment Point1="155,0" Point2="200,44" Point3="200,100"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</UserControl>
//File: Page.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;
namespace SilverlightApplication3
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
RedPath.MouseEnter += new MouseEventHandler(RedPath_MouseEnter);
RedPath.MouseLeave += new MouseEventHandler(RedPath_MouseLeave);
}
void RedPath_MouseLeave(object sender, MouseEventArgs e)
{
MovePointUp.Begin();
}
void RedPath_MouseEnter(object sender, MouseEventArgs e)
{
MovePointDown.Begin();
}
}
}
Related examples in the same category
