Click here to Skip to main content
15,898,134 members
Articles / Programming Languages / C#

Animation in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.91/5 (17 votes)
9 Jun 2010CPOL14 min read 94.8K   3.3K   38  
In this chapter, you will be learning the fundamental concepts of Animations in Silverlight Application, which includes Animation Types, namespace details, classes, objects used, implementation of different types of animations with XAML and with C# code ...
<navigation:Page x:Class="AnimationSampleCode.Views.StoryboardMethods" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="StoryboardMethods Page">
<!--Storyboard Methos-->
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
    <StackPanel.Resources>
        <Storyboard BeginTime="0:0:0" x:Name="sbEllipse" AutoReverse="True" >
            <DoubleAnimation
                 Storyboard.TargetName="myBrush"
                 Storyboard.TargetProperty="RadiusX"
                 From="0" To="1"
                 Duration="0:0:10" 
                 />
            <DoubleAnimation
                 Storyboard.TargetName="myBrush"
                 Storyboard.TargetProperty="RadiusY"
                 From="0" To="1"
                 Duration="0:0:10"
                  />
        </Storyboard>
    </StackPanel.Resources>

    <TextBlock Text="Storyboard Methods" />
    <Border x:Name="brdTest" BorderBrush="Green" BorderThickness="4" Width="300" Height="400">
        <Ellipse Height="100" Width="100">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="myBrush"
                              RadiusX="0.5"
                              RadiusY="0.5"
                             GradientOrigin="0.5,0.5">
                    <GradientStop Color="Red" Offset="0.25"/>
                    <GradientStop Color="Blue" Offset="0.50"/>
                    <GradientStop Color="Yellow" Offset="0.75"/>
                    <GradientStop Color="Green" Offset="1.0"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Border>
    <StackPanel Orientation="Horizontal">

        <Button Content="Start" Click="ButtonStart_Click" Width="70" Height="30" HorizontalAlignment="Center" />
    <Button Content="Pause" Click="ButtonPause_Click" Width="70" Height="30" HorizontalAlignment="Center" />

    <Button Content="Resume" Click="ButtonResume_Click" Width="70" Height="30" HorizontalAlignment="Center" />
    <Button Content="Stop" Click="ButtonStop_Click" Width="70" Height="30" HorizontalAlignment="Center" />
</StackPanel>
</StackPanel>

</navigation:Page>

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)



Comments and Discussions