Click here to Skip to main content
12,398,225 members (60,906 online)
Click here to Skip to main content

Stats

79.6K views
1.4K downloads
50 bookmarked
Posted

Creating and Reusing Dynamic Animations in Silverlight

, 5 Sep 2008 CPOL
Creating dynamic animations, and a simple way to reuse them to reduce the XAML code size.
<UserControl x:Class="AgDynAnimations.EffectsPage"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="400">

  <Grid x:Name="LayoutRoot" Background="AliceBlue">
    <ContentControl>

      <ContentControl.Resources>
        <Storyboard x:Name="fadeIn">
          <DoubleAnimation 
            Storyboard.TargetName="fadeInEffect" 
            Storyboard.TargetProperty="(UIElement.Opacity)"
            From="0"
            To="1"
            SpeedRatio="3">
          </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Name="fadeOut">
          <DoubleAnimation 
            Storyboard.TargetName="fadeOutEffect" 
            Storyboard.TargetProperty="(UIElement.Opacity)"
            From="1"
            To="0"
            SpeedRatio="3">
          </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Name="grow">
          <DoubleAnimation 
            Storyboard.TargetName="growEffect" 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
            From="1"
            To="1.5"
            SpeedRatio="3">
          </DoubleAnimation>
          <DoubleAnimation 
            Storyboard.TargetName="growEffect" 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
            From="1"
            To="1.5"
            SpeedRatio="3">
          </DoubleAnimation>
        </Storyboard>
        
        <Storyboard x:Name="shrink">
          <DoubleAnimation 
            Storyboard.TargetName="shrinkEffect" 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
            From="1"
            To="0.5"
            SpeedRatio="3">
          </DoubleAnimation>
          <DoubleAnimation 
            Storyboard.TargetName="shrinkEffect" 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
            From="1"
            To="0.5"
            SpeedRatio="3">
          </DoubleAnimation>
        </Storyboard>
        
        <Storyboard x:Name="rotate">
          <DoubleAnimation 
            Storyboard.TargetName="rotateEffect" 
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
            From="0"
            To="360"
            SpeedRatio="3">
          </DoubleAnimation>
        </Storyboard>
        
        <Storyboard x:Name="expand">
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="expandEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="60,0"/>
          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="expandEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="60,50"/>
          </PointAnimationUsingKeyFrames>
          
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="expandEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="0,0"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="0,50"/>
          </PointAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="collapse">
          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="collapseEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="60,0"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="collapseEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="60,50"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
          </PointAnimationUsingKeyFrames>

          <PointAnimationUsingKeyFrames BeginTime="00:00:00" 
			      Storyboard.TargetName="collapseEffect" 
			      Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)"
            SpeedRatio="3">
            <SplinePointKeyFrame KeyTime="00:00:00" Value="0,50"/>
            <SplinePointKeyFrame KeyTime="00:00:01" Value="0,0"/>
          </PointAnimationUsingKeyFrames>
        </Storyboard>
      </ContentControl.Resources>

      <StackPanel VerticalAlignment="Center">
        <Border CornerRadius="5" Background="LightBlue" HorizontalAlignment="Center" Margin="2" Width="300">
          <TextBlock FontSize="12" HorizontalAlignment="Left" Margin="5">
            Click on the block below to start animation
          </TextBlock>
        </Border>
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <Border x:Name="fadeInEffect"
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5">
            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Fade In
            </TextBlock>
          </Border>

          <Border x:Name="fadeOutEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5">
            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Fade Out
            </TextBlock>
          </Border>

          <Border x:Name="growEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5"
             RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1">
                </ScaleTransform>
              </TransformGroup>
            </Border.RenderTransform>

            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Grow
            </TextBlock>
          </Border>
          
          <Border x:Name="shrinkEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5"
             RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
              <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1">
                </ScaleTransform>
              </TransformGroup>
            </Border.RenderTransform>

            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Shrink
            </TextBlock>
          </Border>
        </StackPanel>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <Border x:Name="rotateEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5"
             RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
              <TransformGroup>
                <RotateTransform Angle="0">
                </RotateTransform>
              </TransformGroup>
            </Border.RenderTransform>

            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Rotate
            </TextBlock>
          </Border>
          
          <Border x:Name="expandEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5"
            RenderTransformOrigin="0.5,0.5">
            
            <Border.Clip>
              <PathGeometry>
                <PathFigure IsClosed="True" StartPoint="0,0">
                  <LineSegment Point="60,0"/>
                  <LineSegment Point="60,50"/>
                  <LineSegment Point="0,50"/>
                </PathFigure>
              </PathGeometry>
            </Border.Clip>

            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Expand
            </TextBlock>
          </Border>
          
          <Border x:Name="collapseEffect" 
            Margin="2"
            Width="60" 
            Height="50" 
            Background="SteelBlue" 
            CornerRadius="5"
            RenderTransformOrigin="0.5,0.5">
            
            <Border.Clip>
              <PathGeometry>
                <PathFigure IsClosed="True" StartPoint="0,0">
                  <LineSegment Point="60,0"/>
                  <LineSegment Point="60,50"/>
                  <LineSegment Point="0,50"/>
                </PathFigure>
              </PathGeometry>
            </Border.Clip>

            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Collapse
            </TextBlock>
          </Border>
        </StackPanel>
        
        <Border CornerRadius="5" Background="LightBlue" HorizontalAlignment="Center" Margin="0,15,0,2" Width="300">
          <TextBlock FontSize="12" HorizontalAlignment="Left" Margin="5">
            Select animation and click on the block to start
          </TextBlock>
        </Border>
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          
          <StackPanel Margin="0,0,50,0">
            <RadioButton x:Name="chkFadeIn" Content="Fade In" IsChecked="True"></RadioButton>
            <RadioButton x:Name="chkFadeOut" Content="Fade Out"></RadioButton>
          </StackPanel>
          
          <Border x:Name="dynamicEffect"
            Margin="2"
            Width="80" 
            Height="70" 
            Background="SteelBlue" 
            CornerRadius="5">
            <TextBlock FontSize="12" 
                 Foreground="White"
                 HorizontalAlignment="Center" 
                 VerticalAlignment="Center">
              Dynamic<LineBreak/>Effect
            </TextBlock>
          </Border>
        </StackPanel>
      </StackPanel>
      
    </ContentControl>
  </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)

Share

About the Author

SteveLi-Cellbi
Web Developer
United States United States
I'm excited about computers and programming, since my school days. I have master's degree in software development and at the moment I'm a software developer at Cellbi Software.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160721.1 | Last Updated 5 Sep 2008
Article Copyright 2008 by SteveLi-Cellbi
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid