FillRule in WPF Animations
March 28, 2006
New York City
The graphics FillRule (as it's called in WPF) has existed in Windows since version 1.0 and governs how overlapping areas of polygons or paths are colored. The WPF default is FillRule.EvenOdd, which means that a particular interior is filled only if there exists an odd number of boundary lines enclosing that area.
While numerous examples of the FillRule have been devised (most of them involving five-pointed stars), it's still fun to see the FillRule play a role in a WPF animation in this standalone TotalEclipseOfTheSun.xaml file. Download it, run it, or just look at it here:
-
<!-- =======================================================
TotalEclipseOfTheSun.xaml (c) 2006 by Charles Petzold
======================================================= --> <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Fill="Gray" Stroke="Black" StrokeThickness="3">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="96 288" RadiusX="48" RadiusY="48" />
<EllipseGeometry Center="288 96" RadiusX="48" RadiusY="48">
<EllipseGeometry.Transform>
<RotateTransform x:Name="rotate"
CenterX="288" CenterY="288" />
</EllipseGeometry.Transform>
</EllipseGeometry>
</GeometryGroup>
</Path.Data>
</Path>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="rotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>