101 Windows Phone 7 apps Reading Notes-silly eye

Course Content

Ø Animation

Ø event triggers

Ø named Resources

Ø settings page

Color Picker

Ø Clipping

Silly eye is a very eye-catching application, especially among a group of children. This applicationProgramIt will show a huge cartoon eye in an interesting and almost crazy way. To show the app, you just need to put the phone in front of the right eye and pretend that it is your right eye. This application introduces some useful new technologies and is related to creating new pages and selecting custom colors. But most importantly, this is the first application related to "animations" in the second part of the book's topic "transforms & animations.

Introducing Animation

When most people see an animation, they think it is something similar to a cartoon. It uses continuous and fast playback of images to simulate the motion effect. In Silverlight, an animation has a more detailed definition: changing the value of an attribute on the timeline. This is related to motion. For example, you can increase the width of an element to create a growth effect, or change the opacity of an element to create a completely different effect.

There are many ways to change the value of an attribute on the timeline. The most typical method is to use a timer. For example, the dispatchertimer used in many previous chapters and the periodic callback method (tick event processing) set based on the timer trigger time ). In this method, we can manually update the target attribute (that is, the current attribute value is determined by mathematical calculation based on the elapsed time) until the final value is set. At this time, we can stop the timer and/or delete the event handler.

However, Silverlight provides an easier-to-use animation mechanism, which is more powerful and provides better performance than the timer method. This is a mechanism centered on storyboard objects. Storyboard contains one or more specific animation objects, which are applied to the specified attributes of a specific element.

Silly eye uses three storyboards for animation. To understand the concept and working principle of storyboard, we will learn the following three things:

Pupil-related storyboard

Using a storyboard related to the iris

Lifecycle storage Board related to eyelids

The pupil storyboard

In the silly eye application, the storyboard is applied to the pupil to expand and contract repeatedly. Note the following:

Resumstoryboard. targetname indicates that the animation is applied to an element named pupil on the page, and pupil is an elliptic.

Resumstoryboard. targetproperty indicates that the strokethickness attribute of pupil is set to animation effect.

Doubleanimation in storyboard indicates that the strokethickness value will change from 100 to 70 within half a second. The "Double" in doubleanimation indicates the type of the Target attribute (because the strokethickness type is double ).

Because autoreverse is set to true, when strokethickness reaches 70, it will automatically change from 70 to 100. Because repeatbehavior is set to forever, this repetitive action will continue as long as the application starts.

The ➔ easingfunction attribute (set to an elasticease instance) controls how the strokethickness value is rewritten online. This section is described in the "interpolation" section below.

In the start animation, the storyboard's begin method is called as follows:

This. pupilstoryboard. Begin ();

The effect of this animation on the entire application is 12.2. The elliptical element of pupil is behindCodeIs highlighted in blue.

Figure 12.2 pupilstoryboard reduces the stroke (blue part) thickness of pupil from 100 to 70, thus increasing the black filling.

In XAML, there is a way to trigger all storyboard behaviors. Therefore, we do not need to call its begin method in the code behind it. We can add an event trigger program for the triggers attribute of an element. Thanks to this special beginstoryboard element, in the loaded event of the grid, it will internally call the begin method of the storyboard. The loaded event is the only event supported in Silverlight event triggering.

Types of animations

Silverlight provides the animation class to implement four different data types: Double, color, point, and object. In the silly eye application, only the double attribute is used. The remaining types are described in Chapter 15th "mood ring. If we want to change the double type attribute values (such as width, height, opacity, canvas. Left) in the time line, we can use the doubleanimation instance. If we want to change the attribute values of the point type in the element on the timeline (such as the startpoint and Endpoint attributes of a linear gradient brush), we can use the pointanimation instance. So far, because a large number of double-type attributes require animation effects, doubleanimation is the most commonly used animation class.

Not all attributes can be animated, even if its data type matches the data type used by the animation class!

The animation mechanism discussed in this chapter can be used only for types called "Dependency Property. Fortunately, most of the attributes in the visual element are of this type. The relevant content of the dependency attribute will be discussed in chapter 18th "Cocktails. Similar to determining whether an event is a "routed event, we can check a static dependencyproperty field named propertynameproperty in the class to determine whether the property is a Dependency Property. If the class contains such a field, such as the strokethicknessproperty field in the ellipse class, it is a dependency attribute.

In order to achieve the desired effect, it is necessary to think about the attributes of an element for animation. For example, if we want an element to appear in gradient mode, it makes no sense to animation its visibility attribute, because there is no median between collapsed and visible. Instead, we should animation its opacity attribute. Its value is of the double type and ranges from 0 to 1.

Interpolation

It is important to understand the following: by default, doubleanimation uses linear interpolation on the time line to gently change the attribute values of the double type. In other words, if the value increases from 50 to 100 within one second, the value is 55 at the time of 0.1 seconds (the time is increased by 10%, the value is also linearly increased by 10%). At the moment of 0.5 seconds, its value is 75 (the time is increased by 50%, and its value is also linearly increased by 50%), and so on. That is why the median value of the strokethickness attribute is 85 in Figure 12.2.

However, most animations used in Windows Phone applications are non-linear. Moreover, they prefer to change from one value to another in the form of sudden acceleration or sudden slowdown. This method makes animation interesting. We can apply a easing function to achieve this non-linear animation effect.

This type of transition function is responsible for the custom interpolation between the attribute values from the start to the final value. Pupil storyboard uses the function named elasticease to implement this behavior. Figure 12.3 shows the difference between default linear transformation and elastic transformation when the value of an attribute is reduced from 100 to 70. In this case, the center value of 85 is not reached at the intermediate time point. It is actually closer to the end point.

Figure 12.3 The elasticease transition function greatly changes the double type value from 100 to 70.

Silverlight provides 11 different transition functions. Each function has three different modes. Some functions provide deeper customization of attribute behavior. For example, elasticease has the oscillations and springiness attributes. The default value is 3. In practical applications, if we want to add custom functions to an animation, the possibility of custom behavior is endless. Compared with the default linear transition, the transition functions used in this application provide users with a completely different experience.

Appendix D "animation easing reference" shows the behavior of each built-in transition function. I think these functions are very useful, because every time I want to design a new animation, I will go back and refer to these functions.

Another method for generating nonlinear Animation

Transition functions are not the only method for generating non-linear transition animation effects. What is discussed in Chapter 14th "Love meter"Keyframe animationsSo that we can use different difference methods to break down an animation into multiple clips.

The iris storyboard

The silly eye application applies the following storyboard to a canvas control named Iris, so that the eyeball looks to move left and right. Note the following:

The syntax of define targetproperty is slightly more complex than its name. When it is set to an appendable attribute (such as canvas. Left), it must be included in brackets.

The animation uses a different transition function to make its motion boundary more obvious. For bouncecebehaviors, see Appendix D.

The from value is missing for the animation! This is feasible, and we recommend this. When the from value is not specified, the animation starts from the current value of the Target attribute, regardless of the size of the value. Similarly, an animation can specify the from value, but not the to value! In this way, the animation starts from the specified value of the attribute to the current value.

To achieve smooth results, it is important to set from as the default, especially when the animation starts with a user input that can be repeated. For example, when a user clicks an interface element and starts the animation of its growth, the size of each quick click changes quickly back to the value set from. However, with the default from Value Setting, subsequent clicks will also make the animation more smooth and natural from the current value.

When the target property value cannot be interpolated, we must specify the from and to values!

If we try to make an animation for the width or height of an auto-sized element, but its from and to are not specified, the animation effect will not appear. When the width or height of an element is set to double. Nan (non-numeric), its size is adaptive. If two values contain a non-numeric value, doubleanimation cannot complete interpolation. Furthermore, it is not a good choice to apply the animations to actualwidth or actualheight (they are set to true width or height values, rather than Nan. These attributes are read-only and are not dependency attributes. On the contrary, to have an animation effect, we must explicitly set the width/height of the target element.

For pupil storyboard, we must call the begin method of storyboard to get it started.

The animation effect 12.4 is shown. In addition to pupil ellipse (in fact, Iris is the peripheral), iris canvas also contains two other ellipse, which adds a "luster" to Iris ". Because the position of the canvas control is animated, all the visual elements contained in the canvas control are moved together.

Figure 12.4 irisstoryboard moves the iris canvas horizontally, and its value increases from 287 (its initial canvas. Left value) to 543.

In the animation effect class, there is also a field named by, which can be used to replace the to field. The following animation means "increase by 256 based on the current attribute value ":

<Doubleanimation by = "256" Duration = ""/>

It is also supported when the current value is reduced.

The eyelid Animation

The last storyboard used in the silly eye application is used to simulate the blinking effect on the eyelid ellipse with skin color. For pupil ellipse, the skin color painter is set in the code behind it. Note the following:

The two attributes storyboard. targetname and storyboard. targetproperty are set to attachable because they can be used in separate animations without ignoring the settings in any storyboard. The storyboard targets the height and canvas. Top attributes in eyelid ellipse. Therefore, the name of a single target is marked on the storyboard, but multiple different target attributes are used to mark multiple different animation effects.

Animated canvas. Top and height have synchronous animation effects, so the ellipse is vertically reduced while being kept in the middle. The "transforms" introduced in the next chapter provides a more efficient way to achieve this effect.

Both animations use the default linear interpolation method. They are moving so fast that there is no need to try other more vital methods.

Storyboard is not just a simple container for animation effects on related objects. This storyboard has its own continuous Behavior and repeated behavior! The two animations lasted for only 0.2 seconds (the current attribute value was reduced from 0.1 to 50 in 380 seconds, and in the other 0.1 seconds, due to their auto-reverse settings, returns the attribute value to the original value ). However, because the duration for the storyboard is three seconds and it has auto-reverse settings (not its child element), the animation remains unchanged in the later time, the time consumed in the last 3 seconds is reached. Then, the action that lasts for 0.2 seconds starts again, And the rest time is 2.8 seconds. Therefore, the storyboard blinks eyes very fast and occurs once every 3 seconds.

The effect of this animation is 12.5 (call the begin method in C # To start the animation ). Because eyelid ellipse is the same as the background color (it is intended to fill the adjacent area on the left with black), we cannot see the eyelid ellipse itself. On the contrary, once ellipse's height (380) is less than twice its fill thickness (400), we can see that its internal space is sharply reduced to 0.

Figure 12.5 eyelid storyboard compresses the height of eyelid ellipse and moves down to keep it centered.

Storyboard and animation Properties

We have learned about duration, autoreverse, and repeatbehavior attributes, which can be applied to a separate animation or a complete storyboard. In general, there are 6 attributes that can be applied to storyboard and Animation:

Duration: the length of the animation or storyboard. The default value is 1 second.

Be cautious when specifying the duration value!

The format of a duration string is the same as that of timespan. parse:

Days. Hours: Minutes: seconds. Fraction

Shortcuts are allowed here, so we do not need to specify each string. However, its behavior may not be as expected. The character "2" indicates 2 days, not 2 seconds. The string "2.5" indicates 2 days and 5 hours! The string "0: 2" indicates 2 minutes. If most animations cannot exceed the time limit of several seconds, the typical format is hours: Minutes: seconds or hours: Minutes: seconds. fraction. Therefore, 2 seconds can be expressed as "0: 0", and half seconds can be expressed as "0: 0. 5" or "0: 0:. 5 ".

➔ Inintime: specifies the duration of the animation or storyboard delay, which is expressed by a specific time value. The default value is 0. For the animation of child elements, storyboard can use custom begintime values so that they can start the animation one after another instead of simultaneously.

➔ Speedratio: the child of the duration. The default value is 1. We can set it to any double type value greater than 0. A value smaller than 1 can speed down the animation, and a value greater than 1 can speed up the animation. Speedratio does not affect begintime.

Automatic autoreverse: When this attribute is set to true, automatic playback is implemented after the animation or storyboard reaches the final point. Playback takes the same length, so speedratio also affects playback. Note that the latency specified by begintime does not affect playback. Generally, the playback starts immediately after the normal animation ends.

➔ Repeatbehavior: it can be set to a time period or a string, such as "2x", "3x", or "forever ". Therefore, we can use repeatbehavior to shorten the animation duration (or reduce their duration), or automatically repeat the animation multiple times (or even a multiple with a decimal number, for example, 2.5 times), or always repeat the animation (this method is used in this chapter ). If autoreverse is set to true, the playback operation is repeated.

Fill fillbehavior: it can be set to stop, and its default value is holdend, so that after the relevant animation is complete, its attribute value is restored to the value before the animation.

The total length of an animation

By using attributes such as begintime, speedratio, autoreverse, and repeatbehavior, You can adjust multiple aspects of the animation. After the animation starts, it is difficult to test its duration. Of course, its duration value is not enough to describe the real length of time! Instead, the following formula describes the true duration of an animation:

Total time = begintime + (duration * (autoreverse? 2: 1) * repeatbehavior)/speedratio

This can be used when the repeatbehavior attribute is specified as a double type value (or its default value is 1 ). If repeatbehavior is set to a time period, the total length of time is the value of repeatbehavior plus the value of begintime.

The main page

The XAML on the silly eye Homepage contains vector images, an application bar, and three storyboards. It also contains a "Instructions for use" Page, indicating that the user clicks the screen to start the application, as shown in Figure 12.6. Therefore, we can display the application bar at the beginning, but it is hidden when the application starts running, because the buttons displayed on the screen will affect the application. The introduction page implies that users can click the screen to re-call the application bar at any time.

Figure 12.6 The application bar appears only on the "Introduction page"

The overview application Bar contains the guiding settings page, description page, and links to the page. The first two pages are described in the following two sections. We have learned about the page in Chapter 6th "baby sign language. In our opinion, setting the page link as a button in the application bar is better than a menu item, because in this application, it is also normal for users to customize settings (during normal operation of applications, the application bar will not introduce visual confusion, because it is hidden !).

Notice that the names of the three storyboard resources are named "X: Name" instead of "X: Key "! This is a convenient way to make it easier for us to use the code behind it. After naming a resource, it can be used as a key in the dictionary or as a field generated by C.

The explicit distinct from value has been removed from the pupil storyboard animation because it is not necessary. This section has been introduced in this chapter, which helps you understand how an animation works.

The ➔ introtextblock element is used to listen to users' clicks and hide intropanel. Its width is 700, which is larger than the width of the entire page, because if it is too close to the application column, when you want to click the application column, you may accidentally click it (then the application bar will be hidden ).

The Code-behind

Struct because of the X: Name mark in XAML, three storyboards are initialized in the constructor through their respective names.

The clip attribute of the screens page is set to a rectangular area of the screen size. This is done to prevent rendering of vector images outside the screen during the animation page switching. This not only avoids the appearance of very strange visual elements, but also helps improve the performance of the application. All UI elements with this clip attribute can be set to any ry.

Geometries used for clipping

Clip attributes can be set to some geometric shapes. these shapes are similar to but different from the shape objects described in Chapter 1 "ruler. You can use rectanglegeometry, ellipsegeometry, linegeometry, pathgeometry, or geometrygroup to combine multiple geometric shapes. These ry shapes will be discussed in appendix E geometry reference.

Using two storage settings to store skin and eye color values, they are used in onnavigatedto event processing. In onnavigatedfrom event processing, they do not need to be stored because the setting page will be processed. The settings are defined in the separate settings. CS file. In fact, the default color of the eyes is the highlighted color of the phone subject, just like the blue color shown in the image in this chapter.

➔ Intropanel visibility (and application bar) is placed in the page status, so if the page appears consistent after hibernation and activation. No matter how much the page has changed, do not forget to use the page settings. With this, when the application experiences being interrupted and re-activated, we can quickly and automatically restore the page status.

The alignment of ➔ introtextblock is adjusted in the onorientationchanged event to maintain its opposition to the application bar. As described above, when the mobile phone direction is landscape right, the application bar appears on the left of the screen; when the mobile phone direction is landscape left, the application bar appears on the right of the screen.

The settings page

Set page 12.7, which allows users to select different colors for their eyes and skins.

Figure 12.7 The settings page allows you to select the silly eye application color.

In the setup program that comes with the system, how does one add a Setup page for our application?

In Windows Phone 7.0, we cannot do this. Although the Set application contains a list of system settings and a list of application settings, the latter is only for applications that come with the system. On the contrary, we need to add a setting page for our application so that the user experience is consistent with the setting page that comes with the system. In other words, for our settings page, you should use "Settings" as the application name to appear in the standard header and use the application name as the page title, as shown in 12.7.

For the design guide on the settings page, see the content in Chapter 20th "Alarm Clock.

Note the following for page design:

The custom Header style of the page is obtained from the app. XAML file. For the remaining applications in this book, the app. XAML. CS file also provides custom page transition effects, as described in chapter 19th "animation lab.

The two clickable areas of the cursor display the current color, which looks very similar to the button, but in fact they are only filled with rectangles. Their mouseleftbuttonup event processing includes the user's processing of each UI color change.

The main stack panel control is placed in the scroll viewer. This is suitable for touch operations, because users can drag the screen with their fingers to view the content and make sure they have browsed all the content on the screen.

In many pages, such as setting pages, instructions pages, or pages, placing content in the scroll viewer is a good choice, even if all the content can be accommodated on one screen. In this case, you can use your fingers to make a quick drag, visually, you can see that there is no more content (because of the scroll-and-squish features of the scroll viewer control ). This feedback is very satisfactory to other users. When the screen does not respond to the user's drag, the user will think that he is not hard enough, and may try again.

The Code-behind

To enable the user to change each color, the page will navigate the user to a color selection page, as shown in Figure 12.8. This feature page is shared by many applications in this book.Source code. It provides a standard color palette that allows you to customize the color phases, saturation, and brightness, whether it is through an interactive interface or entering a hexadecimal value (or any string that can be parsed by XAML, such as "Red", "Tan", or "lemonchiffon "). It is optional to adjust the opacity of the color.

Figure 12.8 The color selector page provides a beautiful page for users to select colors.

The color selector page can use the following four parameters to query strings:

Required showopacity-the default value is true. You can set it to false to hide the opacity slider. It also removes the transparent color from the top layer of the palette and prevents users from entering transparent colors. Therefore, when we set it to false, we can determine that an opaque color will be selected.

➔ Currentcolor-the selected color when the page is displayed. It must be passed in as a string parameter that is valid for XAML. If it is specified as a hexadecimal number, "#" must be removed to confuse the URI.

➔ Defacolor-the color that you can obtain when you click the reset button on the color selector page. It specifies the same string format as currentcolor.

➔ Settingname-the name used in the isolated bucket. The selected color can be found when it is returned from the page. The same name is used to construct a setting instance. In the onnavigatedto method in list 12.4, when it is returned from the color selector page, it automatically selects a new color value, because the forcerefresh method needs to be called before navigating to the color selection page. Chapter 2 describes this method in detail.

This book uses the color selector page (or similar page) to provide users with a simple and efficient color selection method. In the current version, the main disadvantage of this page is that it only supports the screen direction of portrait. Therefore, using a hardware keyboard to input a hexadecimal number of colors in the landscape screen is not good.

The instructions page

Note the following points on the application description page 12.9:

Figure 12.9 description page in silly eye Application

Similar to the method used to set the page, the main content is placed in the scroll viewer, prompting users to browse without more content.

Similar to intro pane on the home page, a single text block uses the linebreak element to format its text content.

Except for the code file instructionspage. XAML. CS, the constructor only contains the call to the initializecomponent method.