Windows store apps development II INTL kho tài liệu bách khoa

Session Creating a UI Using XAML Designer V 1.0 © Aptech Limited 1 Î Modifying the element’s layer order When a user adds an element to existing layout container, the element will get

Windows Store Apps Development – II

Windows Store Apps Development – II

© 2014 Aptech Limited

All rights reserved.

No part of this book may be reproduced or copied in any form or by any means – graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent

or transferred without the prior written permission of copyright owner Aptech Limited

All trademarks acknowledged.

APTECH LIMITED

Contact E-mail: ov-support@onlinevarsity.com

Edition 1 - 2014

Dear Learner,

We congratulate you on your decision to pursue an Aptech Worldwide course

Aptech Ltd designs its courses using a sound instructional design model – from conceptualization

to execution, incorporating the following key aspects:

¾ Scanning the user system and needs assessment

Needs assessment is carried out to find the educational and training needs of the learner Technology trends are regularly scanned and tracked by core teams at Aptech Ltd TAG* analyzes these on a monthly basis to understand the emerging technology training needs for the Industry

An annual Industry Recruitment Profile Survey is conducted during August - October to understand the technologies that Industries would be adapting in the next 2 to 3 years

An analysis of these trends & recruitment needs is then carried out to understand the skill requirements for different roles & career opportunities.

The skill requirements are then mapped with the learner profile (user system) to derive the Learning objectives for the different roles.

¾ Needs analysis and design of curriculum

The Learning objectives are then analyzed and translated into learning tasks Each learning task or activity is analyzed in terms of knowledge, skills and attitudes that are required to perform that task Teachers and domain experts do this jointly These are then grouped in clusters to form the subjects to be covered by the curriculum.

In addition, the society, the teachers, and the industry expect certain knowledge and skills

that are related to abilities such as learning-to-learn, thinking, adaptability, problem solving, positive attitude etc These competencies would cover both cognitive and affective domains.

A precedence diagram for the subjects is drawn where the prerequisites for each subject are graphically illustrated The number of levels in this diagram is determined

by the duration of the course in terms of number of semesters etc Using the precedence diagram and the time duration for each subject, the curriculum is organized.

¾ Design & development of instructional materials

The content outlines are developed by including additional topics that are required for the completion of the domain and for the logical development of the competencies identified Evaluation strategy and scheme is developed for the subject The topics are arranged/organized

in a meaningful sequence

The detailed instructional material – Training aids, Learner material, reference material, project guidelines, etc.- are then developed Rigorous quality checks are conducted at every stage.

¾ Strategies for delivery of instruction

Careful consideration is given for the integral development of abilities like thinking, problem solving, learning-to-learn etc by selecting appropriate instructional strategies (training methodology), instructional activities and instructional materials

The area of IT is fast changing and nebulous Hence considerable flexibility is provided in the instructional process by specially including creative activities with group interaction between the students and the trainer The positive aspects of Web based learning –acquiring information, organizing information and acting on the basis of insufficient information are some of the aspects, which are incorporated, in the instructional process.

¾ Assessment of learning

The learning is assessed through different modes – tests, assignments & projects The assessment system is designed to evaluate the level of knowledge & skills as defined by the learning objectives.

¾ Evaluation of instructional process and instructional materials

The instructional process is backed by an elaborate monitoring system to evaluate - on-time delivery, understanding of a subject module, ability of the instructor to impart learning As an integral part of this process, we request you to kindly send us your feedback in the reply pre- paid form appended at the end of each module.

*TAG – Technology & Academics Group comprises of members from Aptech Ltd., professors from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from Software Majors & representatives from regulatory organizations/forums.

Technology heads of Aptech Ltd meet on a monthly basis to share and evaluate the technology trends The group interfaces with the representatives of the TAG thrice a year to review and validate the technology and academic directions and endeavors of Aptech Ltd.

Strategies for delivery of instructions

Windows Store Apps also known as Metro-styled Apps is a mobile app that runs on Smartphones, tablet, computers, and other mobile devices running Windows 8 or Windows 8.1 Windows Store App is a new application that runs on Windows 8 devices Users can create their own apps using programming language such as C# Apps have one Window that supports multiple views that interact with each other

The book, Windows Store Apps Development – II begins with creating a UI with XAML Designer This book introduces the working with tiles, data and files It also allows to connect to networks and Web services It also covers the launching, debugging and publishing Windows Store Apps.

This book is the result of a concentrated effort of the Design Team, which is continuously striving to bring you the best and the latest in Information Technology The process of design has been a part of the ISO

9001 certification for Aptech-IT Division, Education Support Services As part of Aptech’s quality drive, this team does intensive research and curriculum enrichment to keep it in line with industry trends.

We will be glad to receive your suggestions

Design Team

Preface

1 Creating a UI Using XAML Designer

2 Adding Personality to UI

3 Working with Tiles and Search

4 Working with Data and Files

5 Connecting to Networks and Web Services

6 Managing User Info

7 Launching, Debugging, and Publishing Windows Store App

Table of Contents

Creating a UI Using XAML Designer

Welcome to the session, Creating a UI Using XAML Designer

The session will discuss how to work with the XAML designer and use

various options such as elements and resources The session will also

discuss the binding of data in the designer

In this session, you will learn about:

Î Explain to work with XAML Designer elements

Î Describe how to work with resources

Î Explain the use of data binding in XAML designer

Î Describe the accessibility information for the XAML

Designer

Î Describe how to use the XAML Designer UI reference

1.2 Working with Elements in XAML Designer

The user can use the XAML Designer to add elements The user can also modify the margin and the way the elements are layered or aligned They can also reset the layout of the elements apart from grouping and ungrouping them

Figure 1.1 shows how an XAML Designer

Figure 1.1: XAML Designer

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

A layout is a way of positioning and arranging the various elements of a UI The user has to keep in mind

to arrange the elements within a layout panel

A panel is made of StackPanel, Canvas, and a Grid The user can use these child elements as layout containers and position and re-arrange the elements A Grid panel is the default top-level layout container

in a page document They can add layout panels, other elements, and controls to the top-level page layout

The user can access a Visual Studio project and perform one of these steps:

Î In the Toolbox, double-click any element

Î Drag and drop an element from the Toolbox to the Layout window

Î Select a tool from the drawing tools and draw an element

Figure 1.2 shows the Toolbox with the controls

Figure 1.2: Toolbox

The user can edit the XAML content to add an element to the layout

Code Snippet 1 shows how to create a button

Code Snippet 1:

<Grid x:Name=”ContentPanel” Margin=”12,0,12,0”>

<Button Height=”72” Width=”160” Content=”Click Me” />

</Grid>

The user can use the <Button> element to develop a Button control A <Grid> element is created when a user develops a new Windows Store App

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Î Modifying the element’s layer order

When a user adds an element to existing layout container, the element will get placed in front of other elements They can use the Order command to re-arrange the elements

y To create a custom element layer order, drag and drop elements in the Document Outline

window

y To select an option listed in the artboard or Document Outline window, right-click an element, and click Order Following are the list of options:

Š Bring to Front: Brings the element to the top of the layering order

Š Bring Forward: Brings the element one level forward in the existing order

Š Bring Backward: Sends the element back one level in the existing order

Š Send to Back: Sends the element to the back (last level) of the layering order

y To modify the layering order, in the Properties window, from the Layout section, edit the

ZIndex value

Î Modifying the element’s alignment

To modify the elements alignment, the user can do the following:

1 Use menu commands

Š Select an element to be aligned Use the Ctrl key to select multiple items

Š In the Layout section, from Horizontal Alignment, select a property: Left, Center, Right,

Š Alignment is indicated by a boundary, a red line

Î Modifying the element’s margin

The space surrounding an element on the artboard and between two elements is known as the

margin The user can modify the margin by using the following:

y Changing the value of: Top, Left, Right, or Bottom

y Using the margin adorners

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Î Ungrouping and grouping different elements

The user can use grouping to create a new layout container and place related elements in it The grouping helps the user in selecting, moving, or modifying elements within a group

To group the elements, the user should follow these steps:

1 Select the element

2 Right-click and navigate to Group Into, select the desired layout container

To ungroup the element, the user has to right-click and then, click Ungroup The option just deletes the layout containers

Î Resetting the element’s layout

The users can use the Reset Layout command to revert the element to its default layout properties values

1.3 Creating and Applying a Resource in XAML Designer

The styles and properties set for a particular element are stored in a reusable entity called resources

A resource helps to reuse the saved styles and properties of an element across multiple elements for a consistent appearance The steps to create a new resource are as follows:

Î Create an element using options in the Document Outline window

Î Click the property marker, then, click Convert to New Resource in the Properties window A dialog box to create a resource is displayed

Figure 1.3 shows the Create Brush Resource dialog box

Figure 1.3: Create Brush Resource Dialog Box

y To make the resource available to the current document, click This document

y Select Document if you want to make the resource available only to the current document

y To define the resource in the resource dictionary to reuse the resource in another project, click Resource dictionary

Î Click OK

To apply resource to a property or element,

y Select the element to apply the resource

y To map a resource and a property, click the property marker for the property value, in the Properties window Click Locate Resource and then, select Available Resources

Right-click a control and point to Edit Template Then, select Apply Resource to apply a style or control template resource to a control

1.4 Binding Data in XAML Designer

Using the XAML Designer, the user can map the data binding properties Here is an example to demonstrate the procedure to bind data with a UI Element control

1 Create a C# project using blank app template in Microsoft Visual Studio

2 Add the following code in ‘MainPage.xaml.cs’ and then, build the application

Code Snippet 2 shows the example for building the application

get { return “William”; }

set { value = “William”; }

}

public string Designation

get { return “Software Developer”; }

set { value = “Software Developer”; }

get { return “Texas”; }

set { value = “Texas”; }

}

}

3 From the MainPage.xaml page, click Grid Point to the Properties window as shown in figure 1.4

Figure 1.4: Properties Window

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

4 In the Properties window, click Common, and then, click New as shown in figure 1.5

Figure 1.5: Properties Window Showing Common Options

5 Under our project, select Employee, and then, click OK as shown in figure 1.6

Figure 1.6: Select Object Dialog Box

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

6 Add a TextBlock control from the artboard by double-clicking it from the Toolbox

7 Select a TextBlock control, and go to its Properties window In Properties window select Text Binding under Common option and click Create Data Binding as shown in figure 1.7.

Figure 1.7: Create Data Binding

8 In the window, select the value(one out of the four fields, you defined earlier in code ) you want to display with this control, for example, here it is the Name field Then, click OK

1.5 Accessibility Information for XAML Designer

The user can use the information given here to learn about accessibility features These features will help them develop apps using the XAML Designer Keyboard shortcuts available in the Designer are grouped broadly as: Access keys and Shortcut keys

Î Access keys

The users can use these keys to access a menu command or any area within a dialog box These keys are identified by underscores

For example, in XAML Designer, if you press Alt, an underline will appear under F in the File menu

so that you can recognize it as access key If you press and hold Alt and then, press F, the File menu

is shown expanded Then, press O and later, P key A project dialog box with a list of projects is opened

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Following is list of some actions and corresponding shortcut keys

Table 1.1 lists the shortcut keys for the modifier keys

Rotate an element in increments of 15-degree While rotating the element, press and hold the

Shift keyChoose multiple elements While selecting each element, press and hold the

Shift keyChoose multiple non-adjacent elements While selecting the first and last elements, press

and hold the Shift keySwitch between open documents and windows Press, both the buttons simultaneously, Ctrl+Tab

Table 1.1: Modifier Keys

Î Project Keys

The following are the project based shortcut keys in XAML Designer

Table 1.2 lists the project shortcut keys

Action Shortcut Keys

To create a new project Press Ctrl+Shift+N

To open a solution or project Press Ctrl+Shift+O

To add a new item Press Ctrl+Shift+A

To build a project Press the key F6

Table 1.2: Project Keys

Î Document Shortcut Keys

Following shortcuts can be used when working with documents:

Table 1.3 lists the document shortcut keys

Action Shortcut Keys

Switch between open documents and windows Press Ctrl+Tab

To save the active document Press Ctrl+S

To save all active documents Press Ctrl+Shift+S

Close all the documents that are currently open Press Ctrl+Shift+W

Undo the previous action Press Ctrl+Z

Do the action again that was performed last Press Ctrl+Y

Cut the selected stuff Press Ctrl+X

Copy the selected stuff Press Ctrl+C

Paste the selected stuff Press Ctrl+V

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Action Shortcut Keys

Delete the selected stuff Press Delete

Find the specified text (in XAML view) Press Ctrl+F

Find the specified text in next occurrence (in XAML

F3 or Ctrl+H

Table 1.3: Document Shortcut Keys

Î Elements Shortcut Keys

Table 1.4 lists the shortcuts available to work with elements on an artboard

Create an element Press Ctrl+N

Duplicate the selected element Press an arrow key by holding down Alt

Change the text in a control Press F2 or press Esc to exit

Choose a single element Press Tab if you want to select elements in the

order similar to how they appear in the documentChoose multiple elements While selecting each element, press and holds the

Shift keyChoose multiple non-adjacent elements While selecting the first and last elements, press

and hold the Ctrl keyMove chosen elements Press the arrow keys (T, For each key press, you

can increase the distance to move and this is done

by holding down the Shift key.)Rotate an element in increments of

15-degree While rotating the element, hold down the

Shift

keyChoose all elements Press Ctrl+A

Clear selection of elements that were

previously selected Press

Ctrl+Shift+A

To show or hide element handles Press F9

To select an element property Press Tab while the element selected, and the

focus is on Properties window

Table 1.4: Elements Shortcut Keys

Î Document Outline Window Shortcut Keys

Table 1.5 lists the shortcuts that are available to work with elements in the Document Outline

window

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Action Shortcut Keys

When the focus is on the Document Outline window, hide the artboard objects Press

Table 1.5: Document Outline Keys

1.6 XAML Designer UI Reference

The user can use the built-in visual UI in XAML Designer to design Windows Store Apps by using XAML, WPF, and Silverlight

The user can use the Collection Editor dialog box to add and remove items to and from a collection The editor is available for all the properties that have an ellipse symbol (…) in the Properties window

Table 1.6 lists the controls

Items Lists all the items in the collection

Remove item Removes the items that are selected

Up arrow Moves the selected item up, to the top of the list, in the collection

Down arrow The selected item are moved down to the bottom of the list in the

collection

itemType Allows to choose the type of item that can be added to the

collection

Add Enables to add a new item to the collection The new item is given

a default name and added to the bottom of the list You can edit name and similar properties in the Properties pane

Properties Displays the properties that you can update for the item that is

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Figure 1.9 shows the Select Object dialog box for a row definition opened in the Collection Editor

Figure 1.9: Collection Details in Select Object Dialog Box

Table 1.7 lists the related items and their descriptions

Search box Here you can search for a CLR type by name

Select Type list This is a tree view with which you can choose the CLR

type to match with the current property or element

Show all assemblies All framework assemblies in the Visual Studio project

are shown with the option to include or exclude them

Table 1.7: Items

A value converter helps the user modify data They can create value converters using the

IValueConverter interface When the users perform data binding, they can select a converter from the Converter drop-down list They can also select <Add value converter> to create a new one

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

Figure 1.10 demonstrates the Add Value Converter dialog box

Figure 1.10: Add Value Converter Dialog Box

Session Creating a UI Using XAML Designer

V 1.0 © Aptech Limited

1

1.7 Check Your Progress

1 The user can use the command to rearrange elements

(A) Order (C) Rearrange

2 The user can use the _ to modify the margins

(A) Margin adorners (C) Margin indents(B) Margin rulers (D) Margin scale

3 The user can use grouping to create a and place related elements in it

(A) New layout container (C) Artboard(B) Interface (D) Layout

4 Identify the following that is included in a panel

(A) Canvas (C) Document Keys(B) Access Keys (D) Layout

5 The users can use keys to access a menu command or any area within a dialog box

(A) Document (C) Outline

Î The user can use the XAML designer to add elements

Î The user can also modify the margin and the way the elements are layered or aligned

Î The styles and properties set for a particular element are stored in a reusable entity called resources

Î To create a custom element layer order, drag and drop elements in the Document Outline window

Î The users can use the Reset Layout command to revert the element to its default layout properties values

Î A panel is made of StackPanel, Canvas, and a Grid The user can use these child elements as layout containers and position and re-arrange the elements

Î When a user adds an element to existing layout container, the element will get placed in the front

of other elements

Adding Personality to UI

Welcome to the session, Adding Personality to UI

The session will discuss how to manage information that is important to

the user It will also discuss to use cryptography and certificates in Windows

Store App.

In this session, you will learn about:

Î Describe animating app components and Storyboarded

animations

Î Explain the key frame animations and easing function

animations

Î Define adding a splash screen

Î List guidelines for app help and app settings

Î Define displaying images, graphics, and thumbnails

Î Add app settings using XAML and add multimedia

2.1.1 Animating List Additions and Deletions

To make the user clear about what has happened, animations gives for the entry or exit a polish visual transition of the new items While an ‘add’ animation, present items go out of their position to provide space for the new entry The new entry then, comes into the place, by updating as it fades in In the reverse manner,

a ‘delete’ animation works The createAddToListAnimation, createDeleteFromListAnimation, createAddToSearchListAnimation, and createDeleteFromSearchListAnimation are the APIs consisted by set of animations

2.1.2 Animating Edge-based UI

Edge-based UI animations originate from the edge of the screen, so use these animations to show or hide

UI The animations which use PaneThemeTransition are mainly for use on custom controls These existing controls such as AppBar and CommandBar have library animations for edge UI built-in This animated behaviour can be simply made available by including such controls in your UI

Two types of edge-based elements with their own set of animation APIs are as follows:

1 Edge UI - This animation can be used with smaller edge-based UI which is intended to animate a custom control This is similar in behavior to AppBar or CommandBar

2 Pane UI - This animation can be used with larger edge-based UI which covers most of the app window For example, soft keyboard

Î Fade out

To delete an item, the fade out animation can be used For example, in transient controls such as scroll bar or panning indicator, which are faded out after some time is lost and no input has been identified

Î Cross fade

Fade in and fade out animations can be simultaneously used to carry out a substitution of an existing item with an entering item While animating the existing items fades away as the replacement items fades into the same space

2.1.4 Animating Pop-up Elements

To show and hide popup UI, the popup animations can be used This includes context menus and flyouts When user performs a click action, the Popup elements appear and are dismissed if the user taps or clicks outside of the popup element The Popup, Flyout, and MenuFlyout elements in XAML, have built-in library animations and need not add any behavior

The animations that are relevant for popup behavior are as follows:

Î PopInThemeAnimation

Î PopOutThemeAnimation

Î PopupThemeTransition

2.1.5 Animating Page Transitions

To transit between pages within an app or to display the first page of a newly launched app, the page transition animations are used Following APIs are consisted by the set of animations:

Î enterPage

Î exitPage

Î How far and from which angle the incoming content is entering

2.1.6 Animating Content Transitions

Keeping the container or background constant, you can alter the area content of the screen using content transition animations As it fades in, new content comes on the screen slides in from an offset If it

is required to replace the existing content, then the earlier content should be faded out as the latest content is getting in Following APIs are consisted by the set of animations:

Î How far and from which angle the incoming content is entering

2.1.7 Animating Pointer Clicks

To provide visual feedback, press an item, the pointer animations are used When a user presses an object, the animation of the item slightly shrinks to indicate that it is pressed When the tap or click is released, the pointer up animation is played and to indicate that it has been released the animation replaces the object to its actual size

Following APIs are consisted by the set of animations:

Î pointerUp

Î pointerDown

2.1.9 Animating Drag and Drop Sequences

Drag and drop animations are required to place user objects when they move it with their fingers, or with

an input device Moving a single item in a list and placing one item on other is a common drag and drop actions

Note - When the user is moving the object, use the drag and drop animations otherwise use the

With a drag start (DragItemThemeAnimation), every drag and drop animation sequence begins

This animation customizes the look of the Drag Source and affected objects

Figure 2.1 shows the drag object and its next objects before the user drag the object

Figure 2.1: Drag Objects

Figure 2.2: Affected Objects

Figure 2.3 shows the next objects that are not changed and remains stable

Figure 2.3: Unchanged Objects

Î Drag End

With the drag end animation (DropTargetItemThemeAnimation), drag and drop animation sequence ends Once the Drag Start animation is used, the Drag End animation is used to end it The same affected object is used to call DragItemThemeAnimation Figure 2.4 shows the effect

of the drag source to its changed item in the end of drag animation

Figure 2.4: Effect of the Drag Source

Figure 2.5 shows the Drag Source is larger and aligned down from the affected objects, and these are in their original size.

Figure 2.5: Aligned Drag Source

When the Drag Source is dropped, all the affected objects return to their normal size and also repositioned if necessary as shown in figure 2.6

Figure 2.6: Normal Position of Drag Source

Î Drag Between

When it is required by the user to drag an item in the two other objects, then the Drag Between animation (DragOverThemeAnimation) is used In this animation, when the user drops the Drag Source in required position, the affected objects will move aside to make space for the Drag Source

Figure 2.7: Drag Source Using Enter Animation

Figure 2.8 shows the Drag Source has triggered the Drag Between animation and has placed the two objects on both the side of the Drag Source to place apart

Figure 2.8: Effect of Enter Animation

The drag and drop animations in behavior of Windows Runtime control consist of ListViewItemand GridViewItem templates which define visual states for drag and multidrag

Session Adding Personality to UI

V 1.0 © Aptech Limited

2

2.1.10 Animating Swipe Gestures

For the selecting an item, when you implement the Windows 8 touch selection model, use swipe animations such as SwipeHintThemeAnimation and SwipeBackThemeAnimation

For XAML swipe animations, the ListView and GridView controls are included They are as follows:

Î Swipe Hint

The swipe hint animation (SwipeHintThemeAnimation) supports the user When the items is pressed and hold by a user, which supports the swipe interaction, the animation presses the object down and brings it back up, conveying that the item supports the swipe interaction

The swipe gesture animations in behavior of Windows Runtime control consist of ListViewItem and GridViewItem which defines visual states for selection hinting

2.2 Storyboarded Animations

To change the value of a dependency properties as a function of time, a storyboarded animation method

is used Defining the visual position for a control, as part of a page definition is the main reason for the need of a storyboarded animation

Î Defining Storyboarded Animations

As a function of time, a storyboarded animation is a method to change the value of a property The animating property is not always a property which directly changes the UI of the app XAML

is used for defining UI for an app, which is an animated UI-related property For example, angle of RotateTransform can be animated or the color value of a button’s background can be animated

Being an author of a control, you are defining the visual states This is the main reason for defining

a storyboarded animation

Width=”302” Height=”202” Fill=”Green” />

2.3 Key Frame and Easing Function Animations

Different techniques for key frame animations are as follows:

1 Key frame of linear animations

2 KeySpline value’s key frame animations

3 Easing functions

Creating a storyboarded animation is bit difficult and from initial to a last state, uses a non-linear animation behavior

Î Animating Using Key Frame Animations

Sometimes, multiple target value which is approached at a point along the animation timeline permits key frame animations In this, each key frame specifies a different intermediate value and the final animation value is the last key frame reached Animations can be made more complex by specifying multiple values The implemented key frame subclass per animation type is enabled by key frame animations

For specifying its key frames, each and every key frame animation type has an Easing, Spline, Linear, and Discrete variation of its KeyFrame class For example, key frames to declare an animation that targets a Double and uses key frames such as DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrame, and EasingDoubleKeyFrame Any one

or all of these types can be used within a single KeyFrames collection

The Timeline based properties can be set on a key-frame animation

Session Adding Personality to UI

V 1.0 © Aptech Limited

2

Table 2.1 lists the key frame animations

Key frame Description

AutoReverse Frames are repeated in reverse order

BeginTime Delays the start of the animation

FillBehavior Controls when the last key frame is reached

RepeatBehavior If set to Forever, infinitely, the key frames and their timeline repeat

Timeline repeats specified times, if set to an iteration count The timeline repeats until the specified time is reached, if set to a Duration

Table 2.1: Key Frame Animations

Î Linear key frames

Until the frames KeyTime is reached, the linear key frames provides a simple linear interpolation

<LinearDoubleKeyFrame Value=”1” KeyTime=”0:0:0” />

<LinearDoubleKeyFrame Value=”1.2” KeyTime=”0:0:4” />

<LinearDoubleKeyFrame Value=”2” KeyTime=”0:0:5” />

Session Adding Personality to UI

V 1.0 © Aptech Limited

2

Î Discrete key frames

Any interpolation is not used by the discrete key frames, however a new Value is simply applied when a KeyTime is reached When UI property is being animated, it often produces an animation which appears to ‘jump’ Since, this is aesthetic and the apparent jumps can be minimized by increasing the number of key frames If a smooth animation is your intention, then instead of using key frames, better use linear or spline

Î Easing key frames

Interpolation can be being applied in easing key frame in which the interpolation is controlled by some predefined mathematical formulas You can actually produce almost same result with a spline key frame compared to easing function types, still some of the easing functions with which cannot reproduce with a spline such as BackEase Set the EasingFunction property to implement an easing function to an easing key frame as a property element in XAML

2.4 Adding a Splash Screen

By using Microsoft Visual Studio 2012, set your apps splash screen image and background color

2.4.1 Prerequisites

Using Visual Studio 2012 quickstart can be done

2.4.2 Setting the Splash Screen Image and Background Color

When you create the app using Visual Studio 2012 template, a default image is added to the project and

it is set as the splash screen image By default, a light gray background color applies to the splash screen.Following steps to be used to change the default image or color of the apps splash screen:

1 In Visual Studio 2012, open your existing Windows Store App project

2 Open the ‘Package.appxmanifest’ file in the Solution Explorer Also, this file can be opened from the menu bar by choosing Project  Store  Edit App Manifest

3 From the All Image Assets pane on the left of the ‘Package.appxmanifest’, click the Visual Assets

tab and select Splash Screen

4 Press the button with an ellipsis to select a new splash screen image When you press the belowScaled, assets it will appear next to 620 x 300 px label

5 Set the background color displayed with the splash screen image in the Background Color field of the Splash Screen section Either the color name or ‘#’ and the hex value of a color can be entered

in this field