The development process of [windows phone development and experience of two newb

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

  Last time we talked the basic design of new home, today we talk about a design about the show real map, animation, namely the application of Storyboard.

  In Windows phone, Storyboard class represents the control of animation through the time line, and provides the object and attribute information for the animation. It is equivalent to a box, and filled with other animated objects, such as DoubleAnimation, DoubleAnimationUsingKeyFrames..., we can separately for them to develop BeginTime, which control their start time. Storyboard provides 6 commonly used animation attributes options, they are AutoReverse (according to the implementation of the road back to return to the initial state), BeginTime, Duration, FillBehaviour, RepeatBehavior and SpeedRatio.

  Firstly introduce the offset: offset animation animation home page is using balloon. Offset animation using the TranslateTransform class to create, it represent the translation object in the two-dimensional coordinate system. Through the TransformGroup can be applied to a variety of transformation.  

  Using the toolbox, add a image to the panoramic view, change the code to

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Name="img1" Source="/action/1.png" Margin="0,615,308,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
            <Image Name="img2" Source="/action/2.png" Margin="72,615,236,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>           
        </Grid>

You can add any picture as you want to make animation, here we only add two. Then we create Storyboard bind them. In the

phone:PhoneApplicationPage

Add the following code

<phone:PhoneApplicationPage.Resources> <Storyboard RepeatBehavior="Forever" x:Name="Bounce"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Storyboard.TargetName="img1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:06" Value="-1000"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:02" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> <SplineDoubleKeyFrame KeyTime="00:00:06" Value="-1000"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </phone:PhoneApplicationPage.Resources>
Create Storyboard

The Storyboard RepeatBehavior property is set to Forever, the infinite loop. Set the translation is along the Y axis, the key to set the time critical values (relative position) (you can adjust what effect, have a try) with object TargetName binding effect. Then add in the background of the MainPage code

Bounce.Begin();

This is used to start the story version, run the program, you'll find out the balloon translational move in the vertical direction.

  After trying on the balloon (or your image) to cover our button click on the balloon, see button what effect is there, is it right? No? Because the balloon will our mouse “ in &rdquo, this is not what we want; the results of. Here is an attribute, namely the mouse through the event, we need in the Image attribute of the IsHitTestVisible is set to false, the default is true, so the mouse can penetrate the picture.

<Image IsHitTestVisible="False" Name="img1" Source="/action/1.png" Margin="0,615,308,-350">
                <Image.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>

On offset animation is introduced so much. The next flip animation, how a picture turned out rather than directly displayed. We want to achieve is to run the program, the picture does not display, click the button, the picture turned out, click on the photo except for the buttons and images turning away.

  Firstly, a new Windows phone application, add a picture and a button to which, modify the image code.

<Image Name="img1" HorizontalAlignment="Left" Height="136" Source="/Images/QuickLink_taobao.png" VerticalAlignment="Bottom"
                 Width="164" Visibility="Collapsed" Margin="251,0,0,226" Grid.Row="1">
            <Image.RenderTransform>
                <ScaleTransform/>
            </Image.RenderTransform>
        </Image>

We will be the Visibility's image property to Collapsed to make it invisible, while the definition of the picture of the changing way.

The Modify button code as follows

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" 
                Name="button2" Margin="100,87,0,0" Grid.Row="1" ManipulationStarted="OnButtonManipulationStarted"/>

One of the specific location parameter set. Also in order to achieve animation effects, we should as a picture of the appearance and disappearance of the creation of two story board

<phone:PhoneApplicationPage.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames x:Name="Daukf" Duration=" 0:0:1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="img1"> <EasingDoubleKeyFrame KeyTime="0" Value="1"/> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseIn"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="Storyboard2"> <DoubleAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="img1"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"> <EasingDoubleKeyFrame.EasingFunction> <CircleEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> </Storyboard> </phone:PhoneApplicationPage.Resources>
As a picture of the appearance and disappearance of creating the story board

The binding effect of objects for img1, click Add button in the code of ManipulationStarted events

      void OnButtonManipulationStarted(object sender, ManipulationStartedEventArgs args)
      {
         img1.Visibility = System.Windows.Visibility.Visible;
         Storyboard2.Begin();
         args.Complete();
         args.Handled = true;
      }

Args.Handled = true represents the event has already been treated, no need for further upward transfer processing, normally incident to the visual tree top to transfer may cause bug, which involves routing events, you can see for yourself, it is not the focus of today, no longer introduction. This code will be imag1 visibility set visible, pictures appeared, the story version 2 startup, boot animation corresponding.

Click Add to other regions after image disappear code, we need to reload OnManipulationStarted

protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
      {
         if (e.OriginalSource != img1)
         {
            Storyboard1.Begin();
            Storyboard1.Completed += (o, args) =>
               {                
                  img1.Visibility = Visibility.Collapsed;
               };
          }
      }

Click on areas not judge, img1 story board 1 start, when the animation is completed, the image disappear. If the animation is done directly ranging picture away it would not see the animation effect. Run the program to see our results.

As for the rotating animation, animation, animation and other readers scaling inclined to buy a book to have a look or search the Internet, are more or less the same, later I will have time to introduce to you, today is introduced here.

  To sum up, today introduced the Storyboard offset animation and flip animation, which mingled with encounter like mouse through the event, event processing route some actual project. There is no separate to introduce a separate technology but in the actual development project introduction I think it will be more practical significance, that is to help the. Here mention, why the display picture without using button Click events but with ManipulationStarted, you can try what will the effect. The pictures can also occur, but disappear? Try it yourself!

  The next lesson will introduce to you the use of the new assistant second page dynamic magnetic post, please continue to pay attention to. If you find any problems despite comments or send e-mail to, I will give you a reply as soon as possible, if it's wrong I will amend as soon as possible.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Oliver at December 02, 2013 - 12:56 PM