Click here to Skip to main content
15,883,705 members
Articles / Programming Languages / C#

Animation Along a Path for Silverlight

Rate me:
Please Sign up or sign in to vote.
4.89/5 (18 votes)
4 Mar 2009CPOL4 min read 146K   2.6K   69  
Animates an object along a geometric path
<UserControl x:Class="PathAnimationTestApp.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:core="clr-namespace:System;assembly=mscorlib"
    Width="600" Height="400">
    <UserControl.Resources>
        <!-- the geometries below are added to the combobox in code behind -->
        <!-- code behind uses PathConverter to convert String to PathGeometry -->
        <core:String x:Key="PathGeometry">M50,100 C120,361 230.5,276.5 230.5,276.5 L305.98807,182.3422 C305.98807,182.3422 419.5,179.5002 367.5,265.49993 315.5,351.49966 238.50028,399.49924 238.50028,399.49924 L61.500017,420.49911</core:String>
        <EllipseGeometry x:Key="EllipseGeometry" Center="200,200" RadiusX="50" RadiusY="100"/>
        <RectangleGeometry x:Key="RectangleGeometry" Rect="100,50,100,300"/>
        <PathGeometry x:Key="BezierSegments">
            <PathGeometry.Figures>
                <PathFigure StartPoint="0,0" IsClosed="False">
                    <BezierSegment Point1="0,0" Point2="200,50" Point3="150,100"/>
                    <BezierSegment Point1="150,100" Point2="0,250" Point3="400,400"/>
                </PathFigure>
            </PathGeometry.Figures>        
        </PathGeometry>
    </UserControl.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="54" />
            <RowDefinition Height="Auto" MinHeight="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Grid.Row="0" BorderBrush="Black" BorderThickness="2">
            <StackPanel Orientation="Horizontal" >
                <TextBlock HorizontalAlignment="Left" Margin="5" Name="label2" 
                       VerticalAlignment="Center">Select Geometry:</TextBlock>
                <ComboBox Margin="5" Name="ComboBoxSelectedGeo" 
                          VerticalContentAlignment="Center"/>
                
                <CheckBox x:Name="DrawGeometryCheckBox"
                          Checked="DrawGeometryCheckBox_Checked"
                          Unchecked="DrawGeometryCheckBox_Unchecked"
                          IsChecked="True" 
                          Margin="10,0,10,0"
                          VerticalAlignment="Center"
                          Content="Draw Geometry?"></CheckBox>
                
                <StackPanel Margin="10,0,10,0" Width="200" VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock>Tolerance:</TextBlock>
                        <TextBlock x:Name="ToleranceValue"/>
                    </StackPanel>
                    <Slider x:Name="ToleranceSlider"
                            ValueChanged="ToleranceSlider_ValueChanged"
                            Minimum="1.0" Maximum="100"/>
                </StackPanel>
                
            </StackPanel>
        </Border>

        <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2">
            <StackPanel Orientation="Horizontal">
                <Button Content="Play" Click="Play_Button_Click"/>
                <Button Content="Pause" Click="Pause_Button_Click"/>
                <Button Content="Resume" Click="Resume_Button_Click"/>
                <Button Content="Stop" Click="Stop_Button_Click"/>
                <CheckBox x:Name="AutoReverseCheckBox"
                          VerticalAlignment="Center"
                          Margin="10"
                          Content="Auto Reverse?" 
                          IsChecked="False"
                          Checked="AutoReverseCheckBox_Checked"
                          Unchecked="AutoReverseCheckBox_Unchecked"/>
                <CheckBox x:Name="RepeatForeverCheckBox"
                          VerticalAlignment="Center"
                          Margin="10"
                          Content="Repeat Forever?" 
                          IsChecked="False"
                          Checked="RepeatForeverCheckBox_Checked"
                          Unchecked="RepeatForeverCheckBox_Unchecked"/>
            </StackPanel>
        </Border>

        <Border Grid.Row="2">
            <Canvas>
                <Path x:Name="GeometryDrawing" StrokeThickness="2" Stroke="Black"/>
                <Rectangle x:Name="MyObj" Width="50" Height="50" Fill="Red"/>
            </Canvas>
        </Border>

    </Grid>

</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
I work in the Bay Area primarily developing software on the Windows platform using C++, .NET/C#, WPF, and Silverlight.

Comments and Discussions