Export (0) Print
Expand All

How to: Animate the Size of an ArcSegment

This example shows how to animate the Size property of an ArcSegment.

Example

The following example creates an ArcSegment that animates its Size when it loads on the screen.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Canvas HorizontalAlignment="Left" Margin="0" >

      <!-- Create an arc on the screen that animates its size when it loads. -->
      <Path Stroke="Black" StrokeThickness="2" >
        <Path.Data>
          <PathGeometry>
            <PathGeometry.Figures>
              <PathFigureCollection>
                <PathFigure StartPoint="100,200">
                  <PathFigure.Segments>
                    <PathSegmentCollection>
                      <ArcSegment x:Name="myArcSegment" Size="90,80" 
                      SweepDirection="Clockwise"  Point="500,200" />
                    </PathSegmentCollection>
                  </PathFigure.Segments>
                </PathFigure>
              </PathFigureCollection>
            </PathGeometry.Figures>
          </PathGeometry>
        </Path.Data>
        <Path.Triggers>
          <EventTrigger RoutedEvent="Path.Loaded">
            <BeginStoryboard Name="myBeginStoryBoard">
              <Storyboard>
                
                <!-- Animate the size of the ArcSegment to a width and height of 200. -->
                <SizeAnimation
                Storyboard.TargetName="myArcSegment"
                Storyboard.TargetProperty="Size"
                From="90,80"
                To="200,200"
                Duration="0:0:2" />

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Path.Triggers>
      </Path>
    </Canvas>

</Page>

For additional geometry and animation samples, see the Geometries Sample.

See Also

Community Additions

ADD
Show:
© 2014 Microsoft