RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Code-Free User-Interface Design with Expression Blend : Page 4

Find out how easy user-interface design is with Microsoft's new, full-featured design tool.

Controlling the Animation
So far, your animation is continuous, from beginning to end. But what if you want to pause and then resume it again?

To do so, add two Button controls to the window. It's simpler to add them to the XAML code directly, as shown in the following code in bold:

<Grid x:Name="LayoutRoot">
   <Canvas RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" 
      Margin="19,24,0,116" x:Name="canvas" Width="130">
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
      <Image Width="131" Height="131" Canvas.Top="1" 
   <Button d:LayoutOverrides="Height" HorizontalAlignment="Left" 
      Margin="19,0,0,75.04" x:Name="btnPause" VerticalAlignment="Bottom" 
      Width="65.623" Content="Pause"/>
   <Button Width="65.623" Content="Continue" HorizontalAlignment="Left" 
      Margin="97,0,0,75.04" x:Name="btnContinue" VerticalAlignment="Bottom"/>
Figure 11 shows the two Button controls on the window.

Figure 11. Adding Controls:The two Button controls added to the window.
Figure 12. Adding Event Handlers: Adding the event handlers for the Pause and Continue buttons.

Next, you'll add two events to the project: one for the Pause button and one for the Continue button. The event handlers are shown in Figure 12.

The following code in bold shows the events handler represented in XAML:

   <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="canvas">
      <BeginStoryboard x:Name="Timeline1_BeginStoryboard" 
         Storyboard="{StaticResource Timeline1}"/>

      <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btnPause">
         <PauseStoryboard BeginStoryboardName="Timeline1_BeginStoryboard"/>

      <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btnContinue">
         <ResumeStoryboard BeginStoryboardName="Timeline1_BeginStoryboard"/>


Figure 13. The Results: Pausing and resuming the animation.

Press F5 to test the application. The image will rotate when you click on it. To pause the animation, click the Pause button and click Continue to resume the animation (see Figure 13).

Code-Free Design
Hopefully, you've seen enough to be familiar with the many tools offered by Expression Blend and you'll be well prepared for more exciting things ahead in this series. You'll note that you didn't actually write any code, which is the way it should be; designers are not supposed to write code.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date