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

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">
      <Canvas.RenderTransform>
         <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform X="0" Y="0"/>
         </TransformGroup>
      </Canvas.RenderTransform>
      <Image Width="131" Height="131" Canvas.Top="1" 
         Source="047017661X.jpg"/>
   </Canvas>
   <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"/>
</Grid>

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:

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

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

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

</Window.Triggers>

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.