An animated Ellipse traces the outline of rendered text by using the path geometry of the text. : Shape Animation « Windows Presentation Foundation « C# / CSharp Tutorial

1. C# / CSharp Tutorial
2. Windows Presentation Foundation
3. Shape Animation

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="WpfApplication1.Window1"
  Title="Using a Path Geometry to Highlight Text"
  Background="PowderBlue">

  <StackPanel>
      <Button Margin="10" Grid.Column="2" Grid.Row="0" FontSize="16" Click="OnDisplayTextClick">Display Text</Button>
    <Canvas Margin="20" Height="150">
      <Path Canvas.Top="15" Canvas.Left="15" Stroke="SteelBlue" StrokeThickness="3" Fill="LightSteelBlue" Name="path" />
      <Ellipse Canvas.Top="0" Canvas.Left="0" Width="30" Height="30">
        <Ellipse.Fill>
          <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="Yellow" Offset="0.25" />
              <GradientStop Color="Transparent" Offset="1" />
            </RadialGradientBrush.GradientStops>
          </RadialGradientBrush>
        </Ellipse.Fill>

        <Ellipse.RenderTransform>
          <MatrixTransform />
        </Ellipse.RenderTransform>
        <Ellipse.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard x:Name="storyboard">
                <MatrixAnimationUsingPath 
                  x:Name="matrixAnimation"
                  Duration="0:00:40"
                  RepeatBehavior="Forever"
                  Storyboard.TargetProperty="RenderTransform.Matrix" />
              </Storyboard>
            </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </Ellipse.Triggers>
      </Ellipse>
    </Canvas>
  </StackPanel>
</Window>

//File:Window.xaml.cs

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Media;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {     
        public Window1()
        {
            InitializeComponent();
        }

        public void OnDisplayTextClick(object sender, EventArgs e)
        {
            FormattedText formattedText = new FormattedText(
                "asdf",
                CultureInfo.GetCultureInfo("en-us"),
                FlowDirection.LeftToRight,
                new Typeface("Verdana"),
                96,
                Brushes.Black);

            formattedText.SetFontWeight(FontWeights.Bold);

            Geometry geometry = formattedText.BuildGeometry(new Point(0, 0));

            PathGeometry pathGeometry = geometry.GetFlattenedPathGeometry();

            path.Data = pathGeometry;

            matrixAnimation.PathGeometry = pathGeometry;
        }
    }
}

24.114.Shape Animation
	24.114.1.	Animate EndPoint
	24.114.2.	Animate StartPoint
	24.114.3.	Animate Ellipse RadiusY, RadiusX
	24.114.4.	Animate Width and Height of a Ellipse
	24.114.5.	Animate Width and Height of a Rectangle
	24.114.6.	Width and Height animation
	24.114.7.	An animated Ellipse traces the outline of rendered text by using the path geometry of the text.
	24.114.8.	Animate Fill.RadiusY