Contents tagged with Animations
Update: This course is now available here!
I had the opportunity to give a 1-day workshop covering new Silverlight 4 features at the TechReady conference on Microsoft’s Redmond campus this weekend and wanted to post some of the sample code shown for the people who attended and anyone else who’s interested. The workshop was based on the free Silverlight LOB course Microsoft put together which has a lot of detailed lab exercises and videos available if you haven’t seen them. The demo code covers many of the topics detailed in the What’s New in Silverlight 4 whitepaper that John Papa put together.
If you’re one of those people who enjoys researching new technologies and staying up with the technology “curve” then you have to be excited about all of the new features announced at the MIX conference this week in Las Vegas. Whether you’re into IIS 7, ASP.NET, Visual Studio, Silverlight or other .NET technologies, a slew of new announcements were made. I’m really impressed with the direction Microsoft is going and excited about the new technologies that were announced.
One of the big announcements that should excite anyone interested in building LOB applications is the new Silverlight 3 feature-set. I’ve had the opportunity to work with Silverlight 3 for awhile now (starting a consulting project based entirely on that version) and it’s great to be able to talk about it since the cat is out of the bag. Many new features have been announced that raise the bar for Silverlight applications. Tim Heuer has already written up a great blog post about them so I’ll provide a simple overview. Here are some of the features that I find quite interesting:
- Out-of-Browser experience – You can now write Silverlight applications that can run directly from the desktop without requiring a browser to be pulled up by the end user.
- .NET RIA Services – Provides an n-tier application pattern that provides business and data tiers. Additional features include support for validation logic as well as the ability to work with authentication and roles.
- New Controls – Several controls are added in Silverlight and in the Silverlight Toolkit that simplify common tasks and really help with navigation between Silverlight pages.
- Perspective 3D – Although full 3D support (like WPF has) isn’t available in Silverlight, there is support for perspective 3D which can make back to front flipping type animations much easier to do now and allow objects to be placed on a plane.
- Pixel Shaders – Allows blurs, shadows and other custom affects to be applied to different objects.
- Text Rendering – Text rendering has been improved and enhanced. Although the current beta doesn’t support it, ClearType support will be added once Silverlight 3 is officially released.
- Animation Easing – Lets face it…users like to see cool little animations that don’t get in their way. When a menu slides out an has a slight bouncing effect it looks cool. Silverlight 3 now has built-in animation easing support for bouncing, elasticity and more.
- Element-to-Element Binding – Need to bind a property of one object to a property for another object? You can do that in WPF but Silverlight 2 didn’t support it natively. Silverlight 3 now provides element-to-element binding so when your slider changes values you can change your rectangle’s colors without writing C# or VB code.
- Network Status – A new API is available in Silverlight 3 for checking the network status of an application. This can be really useful in a variety of situations especially with out-of-browser applications.
- Many more features….
For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.TheWahlinGroup.com.
Animations are a key part of Silverlight 2 that allow your applications to stand out from all of the boring and dull applications floating around on the Web. In previous articles I’ve written about storyboards and animations but as a quick review, Silverlight relies upon a Storyboard element to define several different types of animations such as DoubleAnimation (which animates object properties of type double) and ColorAnimation (which animates color properties). In this article I’ll show you how Silverlight can be used to create animations programmatically and how you can interact with animations defined declaratively in a XAML file using C#.
For this example I’ll create a simple “lightbox” style container that can display pictures from Flickr. As the picture is being shown the box will grow from a height/width of 0 to a larger size that’s determined by the size of the browser. Three different animations will be performed by the image display container:
- Animate the Width from 0 to the width of the browser / 1.5
- Animate the Height from 0 to the height of the browser / 1.5
- Animate the Opacity from 0 to 1
If you know the To and From values of the animations upfront then it’s easiest to define them in the XAML file. In cases where there’s an unknown animation property value, you can create the storyboard and animation objects programmatically or update properties of an existing Storyboard defined in XAML. In this case a Border control will be animated:
<Border x:Name="LightBoxControl" BorderBrush="Black" BorderThickness="3" CornerRadius="10" Height="20" Width="20" Opacity="0" Margin="5" MouseLeftButtonDown="Image_MouseLeftButtonDown"> <Border.Background> <LinearGradientBrush EndPoint="0.893,0.116" StartPoint="0.403,0.694"> <GradientStop Color="#FFB9B9B9" Offset="1"/> <GradientStop Color="#FF4F4F4F" Offset="0"/> <GradientStop Color="#FF666666" Offset="0.496"/> </LinearGradientBrush> </Border.Background> <StackPanel x:Name="spImage"> <Border HorizontalAlignment="Right" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="8" Background="LightGray" Width="60" Height="25"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12" Text="Close" /> </Border> <Rectangle x:Name="LightBoxImage" HorizontalAlignment="Center" Fill="Black" RadiusX="10" RadiusY="10" Stroke="LightGray" StrokeThickness="2" Margin="5"> </Rectangle> </StackPanel> </Border>
Here’s an example of programmatically creating a Storyboard and defining the 3 animations mentioned earlier to change the Width, Height and Opacity properties of the Border control:
double? width = (double?)System.Windows.Browser.HtmlPage.Document.Body.GetProperty("offsetWidth") / 1.5; double? height = (double?)System.Windows.Browser.HtmlPage.Document.Body.GetProperty("offsetHeight") / 1.5; //Programmatic way to create a storyboard and animations Storyboard sb = new Storyboard(); //Create animation for Border control's Width DoubleAnimation wa = new DoubleAnimation(); wa.Duration = new Duration(TimeSpan.FromSeconds(0.5)) wa.From = 0; wa.To = width; Storyboard.SetTarget(wa, LightBoxControl); Storyboard.SetTargetProperty(wa, new PropertyPath(Border.WidthProperty)); sb.Children.Add(wa); //Create animation for Border control's Height DoubleAnimation ha = new DoubleAnimation(); ha.Duration = new Duration(TimeSpan.FromSeconds(0.5)); ha.From = 0; ha.To = height; Storyboard.SetTarget(ha, LightBoxControl); Storyboard.SetTargetProperty(ha, new PropertyPath(Border.HeightProperty)); sb.Children.Add(ha); //Create animation for Border control's Opacity DoubleAnimation oa = new DoubleAnimation(); oa.Duration = new Duration(TimeSpan.FromSeconds(0.5)); oa.From = 0; oa.To = 1; Storyboard.SetTarget(oa, LightBoxControl); Storyboard.SetTargetProperty(oa, new PropertyPath(Border.OpacityProperty)); sb.Children.Add(oa); this.spImage.Width = width.Value - 30; this.spImage.Height = height.Value - 30; this.LightBoxImage.Width = width.Value - 75; this.LightBoxImage.Height = height.Value - 75; sb.Begin();
In this example the final height and width of the target Border control are determined by grabbing the offsetWidth and offsetHeight values using the HtmlPage class. Once those values are determined a Storyboard object is created along with the three animations all of type DoubleAnimation. Each animation takes 1/2 second to complete and animates the Border control’s Height, Width and Opacity properties respectively.
Looking through the code for each animation object you’ll notice that it is associated with the target object and target object property using the Storyboard.SetTarget() and Storyboard.SetTargetProperty() static methods respectively. This may seem strange at first glance but makes sense once you understand the concept of attached properties. Each animation object is added to the parent Storyboard object using the Children.Add() method and the Storyboard is started by calling the Begin() method.
Interacting with Storyboards and Animations Defined in XAML
The programmatic approach to creating animations works great when there’s a lot of dynamic data being fed into animation objects. However, in this example only the Height and Width properties are being changed on the Border control. That’s a lot of code to write to change two properties. Rather than defining everything programmatically you can instead define the storyboard and associated animations declaratively and fill in the dynamic pieces at runtime. Here’s an example of defining the 3 animations shown earlier in XAML:
<Storyboard x:Name="sbShow"> <DoubleAnimation x:Name="daWidth" Storyboard.TargetName="LightBoxControl" Storyboard.TargetProperty="Width" From="0" Duration="00:00:0.5" /> <DoubleAnimation x:Name="daHeight" Storyboard.TargetName="LightBoxControl" Storyboard.TargetProperty="Height" From="0" Duration="00:00:0.5" /> <DoubleAnimation Storyboard.TargetName="LightBoxControl" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:0.5" /> </Storyboard>
Before the storyboard starts to play the To property of the daWidth and daHeight objects can then be assigned values as shown next:
double? width = (double?)System.Windows.Browser.HtmlPage.Document.Body.GetProperty("offsetWidth") / 1.5; double? height = (double?)System.Windows.Browser.HtmlPage.Document.Body.GetProperty("offsetHeight") / 1.5;
//Define how big the Border control should be animated to by setting the To property value
this.daWidth.To = width; this.daHeight.To = height;
this.spImage.Width = width.Value - 30; this.spImage.Height = height.Value - 30; this.LightBoxImage.Width = width.Value - 75; this.LightBoxImage.Height = height.Value - 75;
And that’s all there is to it! Silverlight makes it easy to work with dynamic animations whether programmatically or through modifying storyboards defined in XAML. Download a working version of the Flickr lightbox application here if you’d like to see the animations in action (as well as some others).