Kubernetes client UAP development and client uap

Kubernetes client UAP development and client uap
Preface

In the previous article "Happy New Year", we introduced the simple animation implementation in WinRT. In fact, when using Windows/Windows Phone, we will see some animations. The simplest thing is, for example, when you press a button, the state change of the button is an animation. For example, a pop-up window or menu is also an animation. There are many types of animation in WinRT, but the classification is a bit confusing for beginners: Theme transition, theme animation, visual conversion, and plot feed animation. We will not talk about this. Here we mainly talk about custom animations, or Storyboard animations, because these animations are commonly used.

However, adding an animation to a non-game App is principled: a fast and smooth transition between UI states does not distract users; beyond users' expectations, but it does not get bored with users. Of course, the biggest premise is that your App has perfect basic functions. If two apps implement the same functions, one with an animation and the other without, which one would you like? The answer is obvious. Moreover, in WinRT, animation implementation is relatively simple and the effect is good, so just do it!

Today, we will introduce three types of animations: single animation, composite animation, and key frame animation. This section also describes how to use XAML/Code to implement animations.

Add an animation to the favorites page-single Animation

<Style TargetType = "local: FavoriteGroupControl"> <Setter Property = "Template"> <Setter. value> <ControlTemplate TargetType = "local: FavoriteGroupControl"> <Grid x: Name = "grid_Header" Height = "60" Background = "{ThemeResource CNBlogsThemeColor}"> <Grid. projection> <PlaneProjection/> </Grid. projection> <Grid. resources> <Storyboard x: Name = "sb_Roll"> <DoubleAnimation Storyboard. targetName = "grid_Header" Storyboard. targetProperty = "(UIElement. projection ). (PlaneProjection. rotationX) "From =" 0 "To =" 360 "Duration =. 50 "/> </Storyboard> </Grid. resources>

……                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

I removed the unimportant part and left the part to be explained. For the complete code, see Theme/Generic. xaml in the Windows Phone project.

First, define <Grid. projection> attribute. <PlaneProjection/> indicates that the Grid needs to be rotated in the X, Y, and Z axes. This definition is required (if not defined, an error will occur later ). Second, define a Storyboard in <Grid. Resources>. It contains a <DoubleAnimation> (multiple DoubleAnimation will be included in a Storyboard in the subsequent animation ).

Let's look at the DoubleAnimation details:

1) Storyboard. TargetName indicates that we want to drop the control named gird_Header

2) Storyboard. TargetPrpoerty indicates that we want to play with the PlaneProjection. RotationX attribute of the control.

3) From/To indicates that you want To rotate the control for one week, that is, 360 degrees.

4) Duraion indicates that the task is completed within 0.5 seconds.

Okay. How can I trigger the animation? In MainPage. xaml, you can find the following code snippet:

<local:FavoriteGroupControl x:Name="fgc_Category" Tapped="sp_category_Tapped" Margin="0,10"/>

A sp_category_Tapped event is defined here. We can find the following code in MainPage. xaml. cs:

private void sp_category_Tapped(object sender, TappedRoutedEventArgs e){            this.fg_Category.Tapped();}

Please note! The built-in animation of a control should only be triggered internally, instead of being controlled externally. Therefore, this touch is a fool: The real Code that triggers the animation should be found in FavoriteGroupControl. cs:

Protected override void OnTapped (TappedRoutedEventArgs e)
{
Storyboard sb = this. GetTemplateChild ("sb_Roll") as Storyboard;
If (sb! = Null)
{
Sb. Begin ();
}
}

It first obtains the instance sb of Storyboard according to the name "sb_Roll", and then calls its Begin () method to start rotation. The Storyboard defined in XAML must call Begin () through the event processing code to activate the animation.

There are two points to note:

1) Why animation? All users should give visual responses when they click on the screen, so that they do not have to worry about getting their fingers hurt when they click the screen. As a programmer, we must be caring.

2) Why is rotation animation used? Because I like it, it's not easy for me to be willful once. Of course, other animations can also be used, for example, oblique or partial.

3) Why do I call Begin () inside the control ()? Because you provide people with a control, clicking it and rotating it is the predefined behavior of the control. Do not let people who use the control worry about animation operations. Of course, you can also provide a TemplateBinding attribute to allow the person who uses the control to specify whether an animation is required, and then call or not call the animation within the control according to the settings.

Use Code to define an animation

The second animation in this part shows or hides the ListView. This time we use another method to implement the animation, using Code instead of using XAML. Check code:

class FavoriteGroup    {        bool ShowListView = true;        ListView lvDetail;        Storyboard sbShow, sbHide;        public FavoriteGroup(ListView lv)        {            this.lvDetail = lv;            CreateStoryboard();            this.sbHide.Completed += sbHide_Completed;        }        private void sbHide_Completed(object sender, object e)        {            this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Collapsed;        }        public void Tapped()        {            this.ShowListView = !this.ShowListView;            if (this.ShowListView)            {                this.lvDetail.Opacity = 0;                this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Visible;                this.sbShow.Begin();            }            else            {                this.sbHide.Begin();            }        }        private void CreateStoryboard()        {            // show listview in 1 second            DoubleAnimation daShow = new DoubleAnimation();            daShow.From = 0;            daShow.To = 1;            daShow.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));            this.sbShow = new Storyboard();            sbShow.Children.Add(daShow);            Storyboard.SetTarget(daShow, this.lvDetail);            Storyboard.SetTargetProperty(daShow, "Opacity");            // hide listview in 1 second            DoubleAnimation daHide = new DoubleAnimation();            daHide.From = 1;            daHide.To = 0;            daHide.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));            this.sbHide = new Storyboard();            sbHide.Children.Add(daHide);            Storyboard.SetTarget(daHide, this.lvDetail);            Storyboard.SetTargetProperty(daHide, "Opacity");        }    }

In the constructor, The CreateStoryboard () method is called. First, two storyboards are defined. In each Storyboard, A DoubleAnimation is defined, one is to change the Opacity value of ListView from 0 to 1 (Display) in one second, and the other is to change the Opacity from 1 to 0 (hidden) in one second ). The above code is equivalent to this XAML:

<Storyboard x:Name="sbShow">    <DoubleAnimation Storyboard.TargetName="lvDetail"                                  Storyboard.TargetProperty="Opacity"                                  From="0" To="1" Duraion="0:0:1"/></Storyboard><Storyboard x:Name="sbHide">    <DoubleAnimation Storyboard.TargetName="lvDetail"                                  Storyboard.TargetProperty="Opacity"                                  From="1" To="0" Duraion="0:0:1"/></Storyboard>

Why is Code directly defined without using the XAML syntax here? Is it for display tips? You guessed it! Because in MainPage. in xaml, three ListView lists are available, including lv_category, lv_author, and lv_blog. If you want to use XAML to define an animation, you need to write the three ListView lists one by one and repeat them three times, the only difference is that the ListView name is too ugly! Pay attention to quality! So I got a FavoriteGroup class (maybe the name is not very good, how about kailing Kim xx ?), Code is used to package the code. If you pass the ListView as a parameter, You can reuse the code. Ah, it's just a small skill for the masses to make everyone laugh.

Animation of About on the Setting page-composite Animation

<Storyboard x: Name = "sb_LogoMoveUp"> <DoubleAnimation Duration = "0: 0. 8 "From =" 200 "Storyboard. targetName = "image_Logo" Storyboard. targetProperty = "(UIElement. projection ). (PlaneProjection. globalOffsetY) "To =" 0 "/> <DoubleAnimation Duration =" 0: 0. 8 "From =" 360 "Storyboard. targetName = "image_Logo" Storyboard. targetProperty = "(UIElement. projection ). (PlaneProjection. rotationZ) "To =" 0 "/> <DoubleAnimation Duration =" 0: 0. 8 "From =" 0 "Storyboard. targetName = "image_Logo" Storyboard. targetProperty = "Opacity" To = "1"/> </Storyboard>

In SettingsPage. xaml, we define three animations in the Storyboard of sb_LogoMoveUp:

1) Move image_Logo up to 200 pixels

2) rotate image_Logo 360 degrees

3) change the transparency of image_Logo from 0 to 1.

The above three animations are all completed in 0.8 seconds at the same time, so we can see that the picture is "scrolling" (not sliding) from the bottom to the top, and gradually becomes clear, the whole process is very elegant and generous. After all, the rolling friction is much smaller than the sliding friction (it is too far away), not to drag the water, it is very cool.

Notes:

1) composite animation can be used to simultaneously operate different attributes of a control to form a complex effect that cannot be completed by a single animation. For example, we operate the three attributes of image_Logo at the same time. Of course, you can also set the start time with the BeginTime attribute.

2) Why animation is used here? Because I like to give them dynamic visual enjoyment Beyond users' expectations, rather than just looking at a picture in a daze. The user was so happy that he could not have liked it.

PostControl animation in Windows 8.1-Key Frame Animation

You can check Theme/Generic. xaml of the Windows 8.1 project to see the complete code.

In this Control, click the picture on the left and the arrow on the right will slide to the left to become the one on the right.

<Storyboard x: Name = "sb_Button_out"> <DoubleAnimationUsingKeyFrames Storyboard. TargetName = "SecondViewTrans"
Storyboard. TargetProperty = "X" BeginTime = "0: 0">
<SplineDoubleKeyFrame KeyTime = "00:00:00. 00" Value = "480"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 10" Value = "460"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 20" Value = "400"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 30" Value = "300"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 40" Value = "170"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 50" Value = "0"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 54" Value = "32"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 58" Value = "60"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 62" Value = "80"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 66" Value = "92"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 70" Value = "96"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 74" Value = "92"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 78" Value = "80"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 82" Value = "60"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 86" Value = "32"/>
<SplineDoubleKeyFrame KeyTime = "00:00:00. 90" Value = "0"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>

The <SplineDoubleKeyFram> is the definition of the key frame. The X position of the target control is defined at each time point. We can see that there are 6th key frames, and the X value is already 0. Why has it increased from 0? In this way, the base bounce effect is generated, so that the target control can play back to the 96-Max position, and then return to 0.

Note that a key frame can only perform one unique attribute operation on a control and cannot operate on multiple attributes at the same time. In the composite animation in the previous section, multiple attributes of a control are simultaneously operated, but a certain attribute cannot be defined twice. Remember this.

Summary

Oh, the lights have been automatically switched off in the office. It seems that it is time to save power for the public. Pat your ass and go home. But remember that animation cannot be used in disorder, so it cannot be annoying to users. It cannot affect system smoothness or system performance.

For example, in the WP version of The UAP in the blog Park, we use animations in many small places. For example, the number changes in the upper right corner of the ListView drop-down page, the page title changes when the ListView is pulled down on the blog homepage. These animations are closely related to the current operation, but they do not attract the user's attention.

On the "Happy New Year" Page, I intentionally want to show some things, so I made a lot of animations. In addition, technologies such as Storyboard, DoubleAnimation, and KeyFrame are not used on the happy New Year page, it is an animation made by operating the position of the XAML element with pure code (basic skills for Game Development). Let's talk about it later!

 

Share code and change the world!

Windows Phone Store App link:

Bytes

Windows Store App link:

Http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

Https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

Https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

 

MS-UAP