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

1. C# / C Sharp
2. Windows Presentation Foundation
3. Animation

An animated Ellipse traces the outline of rendered text by using the path geometry of the text.

  

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

   
    
  

Related examples in the same category

1.	Two Animations
2.	Bouncing Ball
3.	Animation along a path
4.	Animate RadialGradient
5.	Animate RenderTransform Angle
6.	Animate Opacity
7.	Animation In Style
8.	Animation without acceleration or deceleration
9.	Animation with a fast speed
10.	Animation with a slow speed
11.	Animation that accelerates through 50% of its duration
12.	Animation that decelerates through 50% of its duration
13.	Animate the brush's RadiusX property.
14.	Animate Fill.RadiusY
15.	Animate GradientStop and Button control
16.	Animate EndPoint
17.	Animate StartPoint
18.	Animate Ellipse RadiusY, RadiusX
19.	XAML Only Animation
20.	Animation with Discrete Key Frames
21.	Animation with Mixed Key Frames.xaml
22.	Control Animations Through Triggers
23.	Animate the Color of a Brush with Indirect Property Targeting
24.	Animate the background color
25.	Animate Width and Height of a Ellipse
26.	Animate Width and Height of a Rectangle
27.	Use ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlock
28.	Use StringAnimationUsingKeyFrames to animate the text value of a TextBlock
29.	Four Sided Bounce
30.	Discrete Double Key Frame
31.	Simple Path Animation
32.	Start the animation with Path is loaded
33.	Matrix Animated Button
34.	Bouncing Ball with ParallelTimeline
35.	Bouncing Ball with DoubleAnimation
36.	KeySpline Animation
37.	Ball moves in a constant speed
38.	Ball moves following spline key frames
39.	Repetition count
40.	Repetition duration
41.	Use ColorAnimationUsingKeyFrames to animate GradientStop
42.	Use StringAnimationUsingKeyFrames to Color
43.	Using DiscreteStringKeyFrame
44.	Animate Ball Height
45.	Rotate Button Animation
46.	Rotate Button Animation With Layout
47.	A simple, finite animation
48.	Code Animation Accelerate Decelerate
49.	Animation with code
50.	Velocity animation
51.	Animation In Code
52.	A Simple Animation in Code
53.	Remove Animations with AnimationClock
54.	Remove Animations
55.	Control the Progress of an Animation
56.	Markup for navigation transition animations
57.	Opacity Animation
58.	Width and Height animation
59.	Timer triggered Animation
60.	Path animation by code, duration, RepeatBehavior
61.	Rolling Ball Animation
62.	Show a Continuous Animation During an Asynchronous Process
63.	Receive Notification When an Animation Completes