Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Animations : Trigger on Loaded

- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
4/4/2011 5:32:45 PM
The Windows Presentation Foundation has somewhat more flexibility than Silverlight in defining and using animations. WPF includes objects called triggers, which respond to event firings or to changes in properties and which can start animations going entirely in XAML, eliminating the need for the code-behind file to start the Storyboard. Triggers are largely gone from Silverlight.

However, one trigger remains in Silverlight. This is a trigger that responds to the Loaded event. This allows you to define an animation entirely in XAML that automatically starts up when the page (or another element) is loaded.

The FadeInOnLoaded project contains the following XAML near the bottom of the page, right above the PhoneApplicationPage end tag. This is the traditional spot for event triggers:

Example 1. Silverlight Project: FadeInOnLoaded File: MainPage.xaml (excerpt)
<phone:PhoneApplicationPage.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TitlePanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</phone:PhoneApplicationPage.Triggers>

The markup begins with a property-element tag for the Triggers property defined by FrameworkElement. The Triggers property is of type TriggerCollection, which sounds quite extensive and versatile, but in Silverlight the only thing you can put in there is an EventTrigger tag that is always associated with the Loaded event. This next tag is BeginStoryboard. This is the only place you’ll see a BeginStoryboard tag in Silverlight. And now we get to something familiar: A Storyboard with one or more animations that can target any dependency object of any object on the page.

This one targets the Opacity property of the TitlePanel, which is the StackPanel containing the two titles at the top of the page. I made the animation 10 seconds long so you don’t miss it. As the page is loaded, the titles fade into view:



The Silverlight documentation discourages the use of animations triggered in this way. Certainly the technique has limited use in real life. But it remains very popular for XAML-based demonstration programs with animations that run “forever.” You can make an animation run forever (or to the limits of your toleration) with:

RepeatBehavior="Forever"

Although I’ve read that you can’t put the markup with the Triggers property element on anything other than the root element of the page, in reality it’s possible to define it on something a little closer to the actual objects being animated.

All the visuals in the following program are in a centered Grid with a fixed 400-pixel square size. The Grid contains five concentric circles, all of which are Path elements whose Data properties are set to EllipseGeometry objects. Each EllipseGeometry has RadiusX and a RadiusY properties set to values that are 25 pixels longer than the next smallest object.

Example 2. Silverlight Project: ExpandingCircles File: MainPage.xaml (excerpt)
    <Grid Width="400" Height="400"
HorizontalAlignment="Center"
VerticalAlignment="Center" >

<!-- The inner circle. -->
<Path Name="pathInner"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="12.5">
<Path.Data>
<EllipseGeometry x:Name="ellipse1"
Center="200 200"
RadiusX="0" RadiusY="0" />
</Path.Data>
</Path>

<!-- All circles except the inner and outer. -->
<Path Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="12.5">
<Path.Data>
<GeometryGroup>
<EllipseGeometry x:Name="ellipse2"
Center="200 200"
RadiusX="25" RadiusY="25" />
<EllipseGeometry x:Name="ellipse3"
Center="200 200"
RadiusX="50" RadiusY="50" />
<EllipseGeometry x:Name="ellipse4"
Center="200 200"
RadiusX="75" RadiusY="75" />
</GeometryGroup>
</Path.Data>
</Path>

<!-- The outer circle. -->
<Path Name="pathOuter"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="12.5">
<Path.Data>
<EllipseGeometry x:Name="ellipse5"
Center="200 200"
RadiusX="100" RadiusY="100" />
</Path.Data>
</Path>

<Grid.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="pathInner"
Storyboard.TargetProperty="StrokeThickness"
From="0" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="RadiusX"
From="0" To="25" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="RadiusY"
From="0" To="25" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse2"
Storyboard.TargetProperty="RadiusX"
From="25" To="50" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse2"
Storyboard.TargetProperty="RadiusY"
From="25" To="50" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse3"
Storyboard.TargetProperty="RadiusX"
From="50" To="75" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse3"
Storyboard.TargetProperty="RadiusY"
From="50" To="75" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse4"
Storyboard.TargetProperty="RadiusX"
From="75" To="100" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse4"
Storyboard.TargetProperty="RadiusY"
From="75" To="100" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse5"
Storyboard.TargetProperty="RadiusX"
From="100" To="125" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="ellipse5"
Storyboard.TargetProperty="RadiusY"
From="100" To="125" Duration="0:0:5" />

<DoubleAnimation Storyboard.TargetName="pathOuter"
Storyboard.TargetProperty="Opacity"
From="1" To="0" Duration="0:0:4.9" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Grid>


That centered Path is also the element on which the EventTrigger is attached, and the Storyboard contains 12 DoubleAnimation objects, all of which run in parallel for 5 seconds. (The last one is actually 4.9 seconds, but I made that change to avoid a sporadic visual glitch.) The entire Storyboard is then repeated forever. All but two of these DoubleAnimation objects target the RadiusX and RadiusY properties of the five EllipseGeometry objects, making them 25 pixels larger—that is, as large as the base value of the next larger circle.

At the same time, the Opacity property of the outermost circle is animated to fade out, and the innermost circle has it StrokeThickness property animated to make it seem as if it grows from nothing. The overall visual effect is that circles seem to be generated from the center, and then disappear once they reach the outside:



The next program is called DashOffsetAnimation, and it uses a Path to draw an infinity sign in landscape mode. The infinity sign includes two semicircles (at the far left and far right), each of which is drawn using two Bézier splines based on a well-known approximation.

A single Bézier curve approximates a quarter circle very well. For a circle centered at the point (0, 0) with a radius of 100, the lower-right quarter-circle arc begins at the point (100, 0) and goes clockwise to end at the point (0, 100). You can approximate that arc with a Bézier curve that begins at the point (100, 0) and ends at the point (0, 100) with the two control points (100, 55) and (55, 100). Continue that same pattern—I think of it as the “Bezier 55” rule—to construct an entire circle from four connected Bézier curves. The approximation is so good that some graphics systems actually implement circles using this technique.

The Data definition used below is Path Markup Syntax that starts with an M (“move”) and then a C (“cubic Bézier”) with two control points and an end point. But then it switches to S (“smooth Bézier”), which requires only the second control point and the end point. The S automatically uses the previous Bézier to determine a first control point that is collinear with the start point and previous control point.

The StrokeDashArray is set with the two points 0 and 1.5 indicating a dash length of 0 and a gap of 1.5. However, the StrokeDashCap is set to Round, so the dots are round and are separated by half the thickness of the line.

Example 3. Silverlight Project: DashOffsetAnimation File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Path Name="path"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="23.98"
StrokeDashArray="0 1.5"
StrokeDashCap="Round"
Data="M 100 0
C 45 0, 0 45, 0 100
S 45 200, 100 200
S 200 150, 250 100
S 345 0, 400 0
S 500 45, 500 100
S 455 200, 400 200
S 300 150, 250 100
S 155 0, 100 0">

<Path.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="path"
Storyboard.TargetProperty="StrokeDashOffset"
From="0" To="1.5" Duration="0:0:1"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Grid>


This DoubleAnimation targets the StrokeDashOffset property of the Path, which is normally zero. This is the property that indicates the location in the sequence of dots, dashes, and gaps that is aligned with the beginning of the line. The result is that the dots seem to travel continuously around the figure.



To avoid discontinuities when animating StrokeDashOffset in a closed path, the crucial number is the StrokeThickness. You want the total length of the line to be an integral multiple of the StrokeDashArray times the StrokeThickness. If StrokeThickness isn’t anywhere close to the correct value, you’ll see a kind of bubbling effect as partial dots are drawn; if it’s very close to the correct value but not exact, you may see flickering.

AnimatedInfinity is another landscape program that uses that same Path Markup Syntax but colors the infinity sign with a LinearGradientBrush with the traditional colors of the rainbow:

Example 4. Silverlight Project: AnimatedInfinity File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Path HorizontalAlignment="Center"
VerticalAlignment="Center"
StrokeThickness="25"
Data="M 100 0
C 45 0, 0 45, 0 100
S 45 200, 100 200
S 200 150, 250 100
S 345 0, 400 0
S 500 45, 500 100
S 455 200, 400 200
S 300 150, 250 100
S 155 0, 100 0">

<Path.Stroke>
<LinearGradientBrush SpreadMethod="Repeat">
<LinearGradientBrush.Transform>
<TranslateTransform x:Name="translate" />
</LinearGradientBrush.Transform>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.00" Color="Red" />
<GradientStop Offset="0.14" Color="Orange" />
<GradientStop Offset="0.28" Color="Yellow" />
<GradientStop Offset="0.42" Color="Green" />
<GradientStop Offset="0.56" Color="Blue" />
<GradientStop Offset="0.70" Color="Indigo" />
<GradientStop Offset="0.85" Color="Violet" />
<GradientStop Offset="1.00" Color="Red" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Stroke>
<Path.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="translate"
Storyboard.TargetProperty="X"
From="0" To="625" Duration="0:0:2"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Grid>


The Brush defines a Transform property (although it’s not often used), and this program sets it to a TranslateTransform and then animates it, making the colors continuously sweep across the figure:



You can also animate properties of type Color, which means you can animate brush colors. Here’s a program that animates the Color properties in two GradientStop objects of a LinearGradientBrush:

Example 5. Silverlight Project: GradientAnimation File: MainPage.xaml (excerpt)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="GRADIENT"
FontSize="96"
FontWeight="Bold">
<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop x:Name="gradientStop1"
Offset="0" Color="Red" />
<GradientStop x:Name="gradientStop2"
Offset="1" Color="Blue" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>

<Grid.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="gradientStop1"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:11"
AutoReverse="True"
RepeatBehavior="Forever" />

<ColorAnimation Storyboard.TargetName="gradientStop2"
Storyboard.TargetProperty="Color"
From="Blue" To="Red" Duration="0:0:13"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
</Grid>


The two animations are given prime-number periods of 11 seconds and 13 seconds so the overall cycle, including AutoReverse, lasts almost 5 minutes before it repeats.

Other -----------------
- Animations : Key Frame Animations
- Animations : A Cautionary Tale
- Animations - XAML-Based Animations
- Animations - Some Variations
- Animations : Click and Spin
- Animations : Frame-Based vs. Time-Based
- Raster Graphics : Becoming a Photo Extras Application
- Raster Graphics : Saving to the Picture Library
- Raster Graphics : Images and Tombstoning
- Raster Graphics : Vector Graphics on a Bitmap
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server