Click here to Skip to main content
15,885,244 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.3K   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 ...
<UserControl 
  x:Class="AnimationSampleCode.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" 
  xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
  xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">

    <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">
            <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" 
                              Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed">
                <navigation:Frame.UriMapper>
                  <uriMapper:UriMapper>
                    <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/>
                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
                  </uriMapper:UriMapper>
                </navigation:Frame.UriMapper>
            </navigation:Frame>
    </Border>

    <Grid Style="{StaticResource NavigationOuterGridStyle}">
      <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}">

        <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}">
          <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}">

            <ContentControl Style="{StaticResource LogoIcon}"/>
            <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}" 
                               Text="{Binding ApplicationStrings.ApplicationName, Source={StaticResource ResourceWrapper}}"/>

          </StackPanel>
        </Border>

        <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}">
          <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}" >
          
            <!--<HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}" 
                                     NavigateUri="/Home" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.HomePageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                                     NavigateUri="/About" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.AboutPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle x:Name="Divider2" Style="{StaticResource DividerStyle}"/>-->
            <HyperlinkButton x:Name="Link3" Style="{StaticResource LinkStyle}" 
                         NavigateUri="/DoubleAnimation" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.DoubleAnimationPageTitle, Source={StaticResource ResourceWrapper}}"/>
           
            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/ColorAnimation" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.ColorAnimationPageTitle, Source={StaticResource ResourceWrapper}}"/>
           
            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/PointAnimation" 
                         TargetName="ContentFrame" 
                         Content="{Binding Path=ApplicationStrings.PointAnimationPageTitle, 
                         Source={StaticResource ResourceWrapper}}"/>
           
            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/AnimationCodeBehind" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.AnimationCodeBehindPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/AnimationProperties" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.AnimationPropertiesPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/StoryboardMethods" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.StoryboardMethodsPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/EventTriggerSample" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.EventTriggerSamplePageTitle, Source={StaticResource ResourceWrapper}}"/>
                         
            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/KeyFrameAnimation" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.KeyFrameAnimationPageTitle, Source={StaticResource ResourceWrapper}}"/>
          
            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
                         NavigateUri="/ColorAnimationKeyFrame" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.ColorAnimationKeyFramePageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
             NavigateUri="/DoubleAnimationKeyFrame" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.DoubleAnimationUsingKeyFramesPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
             NavigateUri="/PointAnimationKeyFrame" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.PointAnimationUsingKeyFramesPageTitle, Source={StaticResource ResourceWrapper}}"/>

            <Rectangle  Style="{StaticResource DividerStyle}"/>
            <HyperlinkButton Style="{StaticResource LinkStyle}" 
             NavigateUri="/SplineAnimation" TargetName="ContentFrame" Content="{Binding Path=ApplicationStrings.SplineAnimationPageTitle, Source={StaticResource ResourceWrapper}}"/>

          </StackPanel>
        </Border>

      </Grid>

      <Border x:Name="loginContainer" Style="{StaticResource LoginContainerStyle}">
          <!-- LoginStatus will be added here in code behind. This is required for the designer view to work -->           
      </Border>
    </Grid>

  </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)



Comments and Discussions