Windows Store Apps Essentials

Advanced Windows Store Apps Development – I
Session - 1
Windows Store Apps Essentials

Objecti ves
 Describe Windows Store Apps essentials
 Explain the process of creating UIs with XAML
 Define animations and transitions
 Describe the process to use animation functions
© Aptech Ltd. Windows Store Apps Essentials/Session 1 2

Windows Store Apps Essenti als
Windows Store is an Application Store, which was established under Windows 8. It provides
various apps, similar to Google, Apple, or BlackBerry apps and allows the distribution and
purchase of apps designed for Windows 8. These apps can be developed for Windows 8 PCs and
Tablets.
Minimum requirements for developing Windows Store apps are as follows:
Windows 8 or higher
Microsoft Visual Studio Express 2012 or higher
Microsoft .NET Framework 4.5 or higher
A developer license registration

Windows 8 Platf orm, Architecture, and Features [1-2]
The architecture for Windows 8 is as follows:

Windows 8 Platf orm, Architecture, and Features [2-2]
The features of Windows 8 are as follows:

Fast Boot Time
Metro UI Design
Secure Boot (Using Unified Extensible Firmware Interface (UEFI))
New Installation, Repair, and Reboot
Start Screen and Dynamically Updated Tiles
Built-in Antivirus Capability
Windows Store
Family Safety
Improved File Explorer (formerly Windows Explorer)
Improved Task Manager
Microsoft Account Information
Picture Password
PC Reset and PC Refresh

Windows 8 Design and Features [1-2]
Live Tiles
Live tiles are used to show the live updates from the Internet. These are a key part
of Start screen. This tile dynamically synchronizes stock updates, live news, and
calendar from Hotmail accounts and displays the status on the home screen. They
are used for making the design fast and fluid. A Live tile can either be static or live.
Splash Screen
Whenever any app is started, a splash screen is displayed. This can also be
configured to show when a dynamic update of any app is going on. It normally
consists of screen image and background color. A well-designed splash screen will
make application more lively, attractive, and inviting.

Windows 8 Design and Features [2-2]
Hub Control
A hub control helps you to create multiple sections. It is displayed in the app’s main
content. It is also called ‘Hub View’ or ‘Hub Page’. It gives flexibility to design and
customize the app to suit our brand needs. It uses a hierarchical navigation pattern.
App Bar
App bars are applied to perform actions on UI elements, such as filtering results or
navigating within the app, or deleting photos. They are invoked by swiping from the
top or bottom of the screen or by right-clicking the current app. They provide easy
access to various commands. They can also be hidden or made context sensitive.
Detail Page
The detail page is the content page for all the apps developed for Windows 8. It
shows the actual information related to the current app. When the user selects a
particular option or command, this screen is displayed to show the details related to
the selected option or command.

Windows Charms and Contracts [1-5]
When you move the mouse on the right side of the screen, you can see the Search, Share,
Start, Device, and Settings options, these are called charms. These charms can also be
displayed by tapping Win+C keys. It is a universal toolbar for Windows 8. It can be used to work
productively and add beauty to Windows Store apps. Following figure shows the charms used
in Windows 8:

Search
Search command is used to search any files from Windows Explorer, SkyDrive, or from the Bing Search
Engine. Press the Win+S keys and enter the file name or text to be searched. This search charm will
show the matching result with links. You can open the file just by clicking the given links.
By default, it shows the contents from the PC and SkyDrive at the beginning and then, it lists the
contents from the Web. If you wish to go back to the Search charm again, you can point the mouse
cursor to the upper-left corner and click the given thumbnail. An example of using Search charm to
search for Lock Screen as shown in the following figure:

you can share files, photos, or thoughts with known people, any social media network, and
share the SkyDrive files with any contact, link by selecting Share button on the charm and
then, selecting the person with whom you wish to share the app or link, as shown in the
following figure:

We can modify the settings of the share content by choosing the Settings charm button and
navigating to Change PC Settings.
Start
Devices
Swipe to the right edge of the screen to

select the active and connected devices in
your system. By using this option, you can:
When you click the Windows Logo,
home screen is displayed. You can go • View and/or play streaming music,
back to previous screen by clicking the videos, or a photo.
same button once again. • Print a document and photo or send an
email.
• Start Projector connected to the PC
(presentation, slide show).

Settings
Swipe to the right side of the screen to view

the Settings charm. Using this, you can view or
modify settings for an app, network, devices,
user accounts, PC’s information, and so on, as
shown in the following figure:

Layout Controls in XAML [1-14]
Layouts are used for sizing and positioning objects in the current UI. If you wish to position your
objects properly, you must put them in containers such as Panel, Canvas, Stack Panel, and Grid
controls provided by XAML for this purpose. These containers allow us to position and arrange
our objects inside the UI.
There are mainly two types of layouts in XAML:
Absolute layout controls are used to position your objects

Absolute layout inside the panel or Canvas. Here, we specify the exact
position of the element or an object by specifying Canvas.
Left and Canvas. Top properties of the child element.
In Dynamic layout, the user can fix their own size in the user
interface based on the screen resolution. It does not specify the
Dynamic layout exact positioning of the child elements. The location of the
child elements is automatically adjusted as per the changes in
the resolution of the screen. Controls such as Grid,
StackPanel, and VariableSizedWrapGrid are used to
define and create Dynamic layout.

Canvas
In XAML, the default container is Canvas. It is a type of absolute layout. We can set its
Canvas.Left and Canvas.Top properties to its exact position in the parent container.
Note - Canvas has a property called Canvas.Index, which can be set on each of
the child elements.
Following example shows how to design a layout in the Canvas using a step-by-step
procedure:
Launch Visual Studio 2013.
Create a new project using File  New Project  Blank App (XAML).
Enter the Project name as CanvasDemo and click OK.
Add the code as shown in Code Snippet to MainPage.xaml.

Following Code Snippet explains how to create a Canvas which has a Rectangle UI element defined
inside it:
Code
Snippet:
<Page
x:Class=”CanvasDemo.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using: CanvasDemo”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008”
xmlns:mc=”http://schemas.openxmlformats.org/ markup-compatibility/2006”
mc:Ignorable=”d”>
<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<Canvas Background=”Black”>
<Rectangle Canvas.Left=”100” Canvas.Top=”50” Fill=”Red” Width=”50”
Height=”150” />
</Canvas>
</Grid>
</Page

The output of Canvas is as follows:

StackPanel
The StackPanel container is applied to align the child elements either horizontally or vertically.
The user can specify the Orientation property of the child element in the StackPanel. You
can specify the Height and Width properties of the control. If you specify orientation as
Horizontal, then all the elements will be arranged in horizontal order. There are two options –
Horizontal or Vertical.
Following step-by-step procedure shows how to create a vertical StackPanel of

items:
Create a blank application by selecting File  New Project  Blank App (XAML).
Enter name of the project as StackPanelDemo and click OK.

Following Code Snippet explains how to create a Orientation property of StackPanel in

vertical:
Code
Snippet:
<Page
x:Class=”StackPanelDemo.MainPage”
xmlns:local=”using:StackPanelDemo”
xmlns:mc=”http://schemas.openxmlformats.org/markup-ompatibility/2006”
<StackPanel Margin=”20”>
<Rectangle Fill=”Blue” Width=”25” Height=”25” Margin=”10” />
<Rectangle Fill=”Green” Width=”25” Height=”25” Margin=”10” />
<Rectangle Fill=”Red” Width=”25” Height=”25” Margin=”10” />
<Rectangle Fill=”Yellow” Width=”25” Height=”25” Margin=”10” />
</StackPanel>
</Page>

The output of Stack panel is as follows:

Grid
The Grid panel is utilized to set the controls in array dimensions similar to multi-row and
multi-column layouts. The user can specify a Grid’s row and column definitions by using the
RowDefinitions and ColumnDefinitions properties within the Grid element. The
user can specify the Grid.Column and Grid.Row properties, and set the number of rows
and columns that should be there in the current Grid.
The step-by-step procedure to use a Grid control is as follows:

Create a blank application by selecting File  New Project  Blank App
(XAML).
Enter name of the project as GridDemo and click OK.

Following Code Snippet explains how to create Grid with columns and rows:
Code
Snippet:
<Page
x:Class=” GridDemo.MainPage”
xmlns:local=”using:App25”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006”
<Grid Grid.Column=”4” Grid.Row=”2” Background=”Beige” Opacity=”10”
Visibility=”Visible”>
<Button Content=”Click Me 1” HorizontalAlignment=”Left” Margin=”59,27,0,0”
VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue”
Foreground=”White”/>

Code Snippet
(Cont):



</Grid>
</Page>

The output of Grid is as follows:

VariableSizedWrapGrid
VariableSizedWrapGrid is used to style the grid layout panel for each tile or cell, which
change their sizes based on contents in it. The elements are arranged in rows or columns and
are automatically wrapped until the MaximumRowsOrColumns value is reached.
Each cells size is specified using ItemHeight and ItemWidth (in pixels). Child elements can
use VariableSizedWrapGrid.ColumnSpan and
VariableSizedWrapGrid.RowSpan (values as cell counts) to adjust inside the screen.
WrapGrid and VirtualizingStackPanel are panels that can only be used to display
items in an ItemsControl.
The step-by-step procedure to use a VariableSizedGrid control is as follows:

Create a blank application by selecting File  New Project  Blank App (XAML).
Enter name of the project as VariableSizedGridDemo and click OK.

Code
Snippet:
<Page
x:Class=” VariableSizedWrapGridDemo.MainPage”
xmlns:mc=”http://schemas.openxmlformats.org/ markup- compatibility/2006”
<VariableSizedWrapGrid Orientation=”Horizontal”>
<Rectangle Width=”150” Height=”400” Margin=”50” Fill=”Blue” />
<Rectangle Width=”150” Height=”50” Margin=”5” Fill=”Red” />
<Rectangle Width=”150” Height=”150” Margin=”15” Fill=”Green” />
<Rectangle Width=”150” Height=”300” Margin=”5” Fill=”Red” />
<Rectangle Width=”150” Height=”180” Margin=”5” Fill=”Yellow” />
</VariableSizedWrapGrid>
</Grid>
</Page>

The output of VariableSizedWrapGrid is as follows:

Snapping and Resizing [1-2]
When the user needs to access more than one task at a time, he/she can snap the screen.
The default width of a snap screen is 320px wide. To create a snap screen, the user has to
navigate the mouse pointer to the upper-left part of the screen and drag the thumbnail to
the right. The user must design the apps, which look good when viewed in any size, so that
the app can support different resolutions and orientations.
Note - Windows 8 allows snapping feature when the screen resolution is more than 1366 x 768. In
Windows 8.1, the minimum resolution is not required. It works with all resolution types.
The user either can change the size of some apps or can display many apps on single screen. The
minimum height of an app always fits the height of the screen.

Snapping and Resizing [2-2]
Support for Window Resizing:

The user can change the size of the window to any width they require. Windows 8 handles both
orientations automatically. The user only needs to consider how the app’s size affects its layout.
Windows apps can run on different resolutions from a small tablet to a laptop or desktop. The
result is that on these large resolutions, there is more space and on the smaller screen, there is
less space. However, Windows automatically adjusts the screen as per the screen size of the
device on which this application is viewed.

Creati ng User Interfaces with XAML
The user interface is reusable.
The main problems within the presentation layer of the application lies under
business logic, business services, and data.
To create and use these components, the user must understand fundamental UI
concepts.
The UI also provides tools for designing user interfaces in app. UIs can make use of
resources defined in XAML.

Accessing Resources in XAML [1-4]
A resource can be accessed and used anywhere in the application. Brushes and styles are the
best instances of resources. Virtually, anything can be changed to a resource.
Solid, Gradient, or Tile brush can be created as a resource and used in the application. The
user can assign resources at object-level, document-level, dictionary-level, and application-
level. The resource editors help the user to produce a resource file with .resw extension.
Following steps show how to use the TextBlock, TextBox, and Button controls and
how to write the code to handle the Button_Click event:
Create a blank application by selecting File  New Project Blank App (XAML).
Enter name of the project as EventHandlingDemo and click OK.

Code
Snippet:
<Page
x:Class=”EventHAndlingDemo.MainPage”
xmlns:local=”using: EventHAndlingDemo “
xmlns:mc=”http://schemas.openxmlformats.org/ markup-compatibility/2006”
<Grid Background=”Beige”>
<TextBlock Text=”Message” Height=”40” Width=”200” Margin=”20”
VerticalAlignment=”Top” HorizontalAlignment=”Left” Foreground=”Blue”
FontSize=”30”/>
<TextBox Name=”MyName” Height=”40” Width=”300” VerticalAlignment=”Top”
HorizontalAlignment=”Left” Margin=”160,20”/>
<Button Content=”Click Me” Margin=”470,20” VerticalAlignment=”Top”

Height=”40” Width=”100” Background=”Green” Click=”Button_Click”/>
</Grid>
</Page>

Double-click the button control or open MainPage.xaml.cs file and add the code as
shown in the following Code Snippet:
Code
Snippet:
public sealed partial class MainPage : Page

{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MyName.Text = “Welcome To Aptech Ltd.”;
}
}

The output of EventHandlingDemo program is as follows:

Resource Dicti onary [1-6]
Resource dictionary has a collection of objects (resources) inside the dictionary, which can be
developed by the user using the programming code in C#. The ResourceDictionary has
two properties, namely, FrameworkElement.Resources and
Application.Resources. Generally, the user prescribes
FrameworkElement.Resources value inside the root element of the app page.
Resource dictionary can be divided into Styles, Templates, Colors, Brushes, and Transmutes. The
MergedDictionary can be used to merge many dictionaries and refers to the external file
as shown in the following figure:

Following example shows how to create a resource dictionary. The resource files can be
accessed through the Windows.ApplicationModel.Resources.ResourceLoader
namespace.
Create a new project named DictionaryDemo.
Right-click Project  Add  New Item as shown in the following figure.

Select Resource Dictionary option. Enter name of the dictionary as

MyDictionary.xaml as shown in the following figure:

Double-click MyDictionary.xaml as shown in the following figure:

Enter the code as shown in Code Snippet into the dictionary file,
MyDictionary.xaml.
Code
Snippet:
<ResourceDictionary
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
<SolidColorBrush x:Key=”scbColor” Color=”#800800”/>
</ResourceDictionary>

Add the code as shown in Code Snippet to MainPage.xaml file. This is where
the Resource Dictionary will be applied.
Code
Snippet:
<Page
x:Class=”DictionaryDemo.MainPage”
xmlns:local=”using:DictionaryDemo”
xmlns:local=”using:DictionaryDemo.DictionaryDemo_XamlTypeInfo”
<TextBlock Text=”Hello World” Foreground=”{StaticResource scbColor}”
FontSize=”30” Margin=”573,78,593,0” Height=”50” Width=”200”
VerticalAlignment=”Top”/>
</Grid>
</Page>

Changing Appearance of XAML Controls [1-3]
Using the visual properties from the resource dictionary, the user can
define styles for any controls.
Each control contains many properties such as background color,

foreground color, font, alignment, and so on.
For customizing the controls, the template can be created using

ControlTemplate class.

First, create a page CheckBoxDemo.xaml and add the code as shown in Code Snippet.
Code
Snippet:
<Page
x:Class=”CheckBoxDemo.MainPage”
<CheckBox Content=”CheckBox” IsThreeState=”True” Margin=”100”/>
</Grid>
</Page>

The output of Control Template is as follows:

Presenti ng Data in XAML
The user can bind the data using simple methods in C# to interact with the controls. For example,
the ForeColor of a TextBox can be called through SolidColorBrush to change the style of
the value, which can be change of its data. Code Snippet shows how to assign the color for
TextBox. The binding source is a property of the Style class.
Code
Snippet:
<TextBox x:Name=”MyTextBox” Text=”Text” Foreground=”{Binding Brush1}”/>

// Create an instance of the Style class
// that implements INotifyPropertyChanged.
MyColors textcolor = new Style ();
// Brush1 is set to be a SolidColorBrush with the value Red.
textcolor.Brush1 = new SolidColorBrush(Colors.Red);
// Set the DataContext of the TextBox MyTextBox.
txtSample.DataContext = textcolor;

Navigati ng Between Pages in a Windows Store App [1-9]
When an app is created, the user must ensure that there is support for page navigation
between pages. There are some predefined templates, which are preinstalled in Visual Studio
2013 for navigation. Following steps show how to navigate within the pages in the
application:
 Create a blank application named PageNavigation.
 Add two pages named Navigate1.xaml and Navigate2.xaml, using the option
as shown in the following figure:

 Design the page by creating two buttons inside MainPage.xaml as shown in the following
figure:

 Add the code as shown in Code Snippet to MainPage.xaml file.
Code
Snippet:

<Button Content=”First Page” HorizontalAlignment=”Left” Margin=”536,160,0,0”
VerticalAlignment=”Top” Height=”130” Width=”261” Click=”Button1_Click”/>
<Button Content=”Second Page” HorizontalAlignment=”Left”
Margin=”536,398,0,0” VerticalAlignment=”Top” Height=”130” Width=”261”
Click=”Button2_Click”/>
</Grid>

 Add the code as shown in Code Snippet in MainPage.xaml.cs file.
Code
Snippet:
private void Button1_Click (object sender, RoutedEventArgs e)

{
this.Frame.Navigate(typeof(Navigate1), null);
}
private void Button2_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(Navigate2), null);
}

 The output of the PageNavigation program is as follows:

 Add the code as shown in Code Snippet to Navigate1.xaml file.
Code
Snippet:

<Button Content=”Go Back to Home” HorizontalAlignment=”Left”
VerticalAlignment=”Top” Margin=”644,394,0,0” Height=”95” Width=”190”
Click=”Button_Click”/>
<TextBlock HorizontalAlignment=”Left” Margin=”540,201,0,0”
TextWrapping=”Wrap” Text=”Welcome to Page 1” VerticalAlignment=”Top”
Height=”89” Width=”526” FontSize=”48”/>
</Grid>

 Add the code as shown in Code Snippet to Navigate1.xaml.cs file.
Code
Snippet:
private void Button_Click (object sender, RoutedEventArgs e)

{
this.Frame.Navigate(typeof(MainPage), null);
}

 The output of the PageNavigation application Page 2 is as follows :

 Add the code as shown in Code Snippet into page Navigate2.xaml.
Code
Snippet:
Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<Button Content=”Go Back to Home” HorizontalAlignment=”Left”
VerticalAlignment=”Top” Margin=”644,394,0,0” Height=”95” Width=”190”
Click=”Button_Click”/>
<TextBlock HorizontalAlignment=”Left” Margin=”540,201,0,0”
TextWrapping=”Wrap” Text=”Welcome to Page 2” VerticalAlignment=”Top”
Height=”89” Width=”526” FontSize=”48”/>
</Grid>
 Add the code as shown in Code Snippet into Navigate2.xaml.cs file.
Code
Snippet:
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(MainPage), null);
}

Animati ons and Transiti ons
Animations and transitions are the most essential thing for

better user experience in Windows 8 apps.
Animations should be shown when there is a need for it. If

there is any update or a task running in the background, then
animations are shown.
The developer should develop applications to impress the

app user by providing proper animations and transitions.

Creati ng Animati ons and Transiti ons in a Windows
Store App [1-2]
Following Code Snippet explain how to create a simple animation.
Code
Snippet:
<StackPanel>
<StackPanel.Resources>
Storyboard x:Name=”EnterStoryboard”>
<FadeOutThemeAnimation Storyboard.TargetName=”ftaRect” />
</Storyboard>
<Storyboard x:Name=”ExitStoryboard”>
<FadeInThemeAnimation Storyboard.TargetName=” ftaRect” />
</Storyboard>
</StackPanel.Resources>
<Rectangle x:Name=”ftaRect” PointerEntered=”Rectangle_Click”
PointerExited=”Rectangle_Click2”
Fill=”Gray” Width=”100” Height=”300” />
</StackPanel>

Creati ng Animati ons and Transiti ons in a Windows
Store App [2-2]
Code Snippet
(Cont):
private void Rectangle_Click(object sender, PointerRoutedEventArgs e)

{
EnterStoryboard.Begin();
}
private void Rectangle_Click1(object sender, PointerRoutedEventArgs e)
{
ExitStoryboard.Begin();
}
The output of the Storyboard on loading is as follows:
If the user loads the same

page again, the rectangle
disappears.

Appropriate and Inappropriate Content Transiti ons
While creating empty container, the user can use content transitions
to create new items.
The user can move the content from one part of the container to
another part using content transitions.
This transition is already in-built in the container. When an animation
is displaying the content from the left side, then the new content
must come from the right.
Arrange each content logically. When there is more than one
container, then update them by triggering all together with transition
animation.
Whenever the whole page changes, the user must not use content
transition animations, instead the user can call the Page transition
animations.
Use Fade animations to refresh the content instead of refreshing the
container.

Creati ng Key Frame Animati ons [1-6]
Key frame animations are specified with the animation timeline and it is declared by using
different sub classes for each animation. If the user targets Double data type values for
animation, then he/she must have animation types such as Linear, Easing, Discrete, or
Spline.
The user can AutoReverse

set the
Timeline When the key frame reaches the end of the animation. Then, it
property repeats the frames in the reverse order.
based on the
key frame for
setting the BeginTime
Duration such The user can set the start time of the timeline for the animation
as: inside the app.
FillBehavior
This does not have any effect. It controls what should be done
when it reaches the last key frame.

RepeatBehavior:
If the user sets the property as Forever, the timeline animation

will be played continuously.
If the user sets the property to a certain count, the timeline

animation will be played up to the count.
If the user sets the Duration, inside the timeline, then it will
repeat up to the duration specified.
SpeedRatio:
It is a property, which is not used in most often. It
sets the speed ratio of the animation.

Linear Key Frame

In linear key frame animation, the animation progresses at a constant rate of the segment
duration. Code Snippet shows how to create a linear key frame.
Code
Snippet:
<StackPanel>
<Storyboard x:Name=”SampleBoard”>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName=”myRect”
Storyboard.TargetProperty=”(UIElement.RenderTransform).
(ScaleTransform.ScaleY)”>
<LinearDoubleKeyFrame Value=”1” KeyTime=”0:0:0” />
<LinearDoubleKeyFrame Value=”1.2” KeyTime=”0:0:4” />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</StackPanel>

Discrete Key Frame

In discrete key frame animation, the animation function jumps from one value to the
next without interpolation. It sets a new value depending on the animation in the UI.
Code Snippet shows how to create a Discrete Key Frame.
Code
Snippet:
<Storyboard x:Name=” SampleBoard”>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName=”TestTransform”
Storyboard.TargetProperty=”X”
Duration=”0:0:10” EnableDependentAnimation=”True”>
<DiscreteDoubleKeyFrame Value=”400” KeyTime=”0:0:4” />
SplineDoubleKeyFrame KeySpline=”0.6,0.0 0.9,0.00” Value=”0”
KeyTime=”0:0:6” />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Easing Key Frame

This works based on the calculation provided by the user. Easing has a set of functions,
some of which are listed as follows:
BackEase: In this type of easing function, the animation goes slightly

backward before it begins to animate in the indicated path.
CircleEase: In this type of easing function, the animation moves using a

circular path.
BounceEase: In this type of easing function, the animation adds a bouncing

effect.
ElasticEase: In this type of easing function, an animation is created that is

similar to a spring oscillator back and forth until it stops.
SineEase: In this type of easing function, an animation is created that moves

using a sine formula.

Code Snippet shows how to create an easing key frame.

Code
Snippet:
<StackPanel x:Name=”LayoutRoot” Background=”White”>

<Storyboard x:Name=”SampleBoard”>
<DoubleAnimation From=”30” To=”200” Duration=”00:00:3”
Storyboard.TargetName=”myRect”
Storyboard.TargetProperty=”(UIElement.RenderTransform).
(ScaleTransform.ScaleY)”>
<DoubleAnimation.EasingFunction>
<BounceEase Bounces=”2” EasingMode=”EaseIn” Bounciness=”2” />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Rectangle x:Name=”myRect” Fill=”Blue” Width=”200” Height=”30” />
</StackPanel>

Functi ons in Animati ons [1-3]
The various functions related to animations are as follows:
Page Transitions
The page will be animated within the view, which means it
will be shown at the time of each transition. Page Transitions
have their own Application Programming Interfaces (APIs)
namely, enterPage and exitPage.
Fade In/Out
The controls or UI will be animated
using Fade In/Out. The Fade In/Out
Content Transitions have their own APIs namely, fadeIn
and fadeOut.
The contents in the page will be
animated independently. Content
Transitions have their own APIs
namely, enterContent and
exitContent.

Crossfade
When there is a change inside content, Expand/Collapse
this crossfade functionality will be
called smoothly. It uses crossfade When the user hovers over the content,
API. it will expand the sub content. Collapse
animation is called when the mouse is
hovering out the content. This
Expand/Collapse uses
createExpandAnimation and
createCollapseAnimation API.
Reposition
To show the content to a new position, the Pointer Up/Down
Reposition animation function is used. The When the mouse is hovered over a tile,
Reposition function uses the the animation is invoked. This Pointer
createRepositionAnimation API. Up/Down uses pointerUp and
pointerDown API.

Show/Hide Popup
To show or hide the contextual UI, the Show/Hide Popup
animation is called. This uses showPopup and hidePopup API.
This is shown when the mouse is moved to the bottom of the page,
inside any app.
Show/Hide Panel
Show/Hide EdgeUI To show or hide the panel, the

Show/Hide Panel animation is
To show or hide the Edge based UI, called. This uses showPanel and
the Show/Hide EdgeUI animation is hidePanel API. This is shown
called. This uses showEdgeUI when the mouse is moved to the
and hideEdgeUI API. left side of the page, inside any
app.

Working with Transiti ons and Transformati ons [1-9]
When the user navigates from one page to another within the app, a splash screen/some animation is
shown. This kind of animations is called Transitions. To give a fluid UI to the user, there is a built-in
Transition class in Windows 8.
Code
Snippet:
<Grid Background=”{StaticResource ApplicationPageBackgroundBrush}”>

<Grid.Resources>
<Style x:Key=”btnStyle” TargetType=”Button”>
<Setter Property=”Transitions”>
<Setter.Value>
<TransitionCollection>
. . .
. . .
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button Style=”{StaticResource btnStyle}”
Content=”Transition Animation is applied” />
</Grid>

The transitions types are as follows:
AddDeleteThemeTransition
ContentThemeTransition
TransitionCollection Class
This class is called when there is more than one object.
EdgeUIThemeTransition
The code shows how to call the
TransitionCollection class and get the
EntranceThemeTransition objects in a list.
public sealed class trsnCol:
PopupThemeTransition
IList<Transition>,
IEnumerable<Transition>
ReorderThemeTransition
RepositionThemeTransition

The TransitionCollection class types are as follows:
Border.ChildTransitions
ContentControl.ContentTransitions
ContentPresenter.ContentTransitions
ItemsControl.ItemContainerTransitions
ItemsPresenter.FooterTransitions
ItemsPresenter.HeaderTransitions
ListViewBase.FooterTransitions
ListViewBase.HeaderTransitions
Panel.ChildrenTransitions
Popup.ChildTransitions
SettingsFlyoutTemplateSettings.ContentTransitions
UIElement.Transitions

Transformation
Consider an example that shows how to transfer data from one page to another.
Create a blank application.
Create two pages named First.xaml and Second.xaml.
Code
Snippet:
<Page
x:Class=”navigation.page1”
xmlns:local=”using:navigation”
<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

Code Snippet
(Cont):
<StackPanel>
<TextBlock Name=”txtSample” Text=”User Name” FontSize=”22” Margin=”50”
Height=”50”Width=”150”/>
</StackPanel>
<StackPanel Orientation=”Vertical” Margin=”100”>
<StackPanel Orientation=”Horizontal” >
<TextBlock Name=”txtb_f_name” Text=”Please enter your Name” FontSize=”22”/>
<TextBox Name=”txtF_name” Height=”50” Width=”150”></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row=”1” Margin=”550”>
<HyperlinkButton x:Name=” btnProceed” Content=”Next Page”
FontSize=”22”Margin=”110” Width=”500” Click=”btnProceed_Click”/>
</StackPanel>
</Grid>
</Page>

In the FirstPage.xaml.cs file, write the code as shown in Code Snippet.
Code
Snippet:
private void btn1_Click(object sender, RoutedEventArgs e)

{
this.Frame.Navigate(typeof(page2),txtF_name.Text);
//for navigating the second page and transfer the value of textbox from 1st
page to 2nd page.
}

In Second.xaml page, write the code as shown in Code Snippet.
Code
Snippet:
<Page x:Class=”navigation.page2”
xmlns:local=”using:navigation”
<Grid Background=”{StaticResource
ApplicationPageBackgroundThemeBrush}”>
<StackPanel Margin=”463,20,-463,-20”>
<TextBlock Name=”lbl” Text=”Secondpage” FontSize=”22”/>
</StackPanel>

Code Snippet
(Cont):
<StackPanel Orientation=”Vertical” Margin=”200,300,0,0”>

<StackPanel Orientation=”Horizontal”>
<TextBlock Name=”txtbname” Text=”User Name” FontSize=”22”></TextBlock>
<TextBox Name=”txtgetname” Width=”300” Height=”50” TextChanged=
“txtgetname_TextChanged”></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row=”1” Margin=” 550,200,0,0”>
<HyperlinkButton Name=”btnget” Content=”Back to first Page” FontSize=”22”
Click=”btnget_Click”></HyperlinkButton>
</StackPanel> </Grid> </Page>

In Second.xaml.cs file, write the code as shown in Code Snippet.
Code
Snippet:
protected override void OnNavigatedTo(NavigationEventArgs e){string s =

e.Parameter as string; if (!string.IsNullOrWhiteSpace(s)) {
txtgetname.Text = s; } else { txtgetname.Text = “Text can’t be blank on

first page “; }}
private void btnget_Click(object sender, RoutedEventArgs e)
{ this.Frame.Navigate(typeof(First));

Summary
Windows Store is a Windows 8 based platform that allows for the distribution and
purchase of apps designed for Windows 8.
App bars are applied to perform actions on substances, such as filtering results or
navigating within the app or deleting photos.
In Windows Store apps, you can use XAML to create various types of containers and
controls.
User can create a snap screen by navigating the mouse pointer to the top left of the
screen and dragging the thumbnail to the right.
Windows apps can run on different resolutions from a small tablet to a laptop or
desktop.
By using resource dictionaries, the code in Windows Store apps can be made reusable.
A ResourceDictionary has two properties, namely, FrameworkElement.Resources and
Application.Resources to take the values.

Windows Store Apps Essentials

Uploaded by

Copyright:

Available Formats

You might also like

Windows Store Apps Essentials

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Windows Store Apps Essentials

Uploaded by

Copyright:

Available Formats

Advanced Windows Store Apps Development – I

Windows Store Apps Essentials

 Describe Windows Store Apps essentials

 Explain the process of creating UIs with XAML

 Define animations and transitions

 Describe the process to use animation functions

© Aptech Ltd. Windows Store Apps Essentials/Session 1 2

Minimum requirements for developing Windows Store apps are as follows:

Microsoft Visual Studio Express 2012 or higher

Microsoft .NET Framework 4.5 or higher

A developer license registration

© Aptech Ltd. Windows Store Apps Essentials/Session 1 3

The architecture for Windows 8 is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 4

The features of Windows 8 are as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 5

© Aptech Ltd. Windows Store Apps Essentials/Session 1 6

© Aptech Ltd. Windows Store Apps Essentials/Session 1 7

© Aptech Ltd. Windows Store Apps Essentials/Session 1 8

© Aptech Ltd. Windows Store Apps Essentials/Session 1 9

© Aptech Ltd. Windows Store Apps Essentials/Session 1 10

Swipe to the right edge of the screen to

© Aptech Ltd. Windows Store Apps Essentials/Session 1 11

Swipe to the right side of the screen to view

© Aptech Ltd. Windows Store Apps Essentials/Session 1 12

There are mainly two types of layouts in XAML:

Absolute layout controls are used to position your objects

© Aptech Ltd. Windows Store Apps Essentials/Session 1 13

© Aptech Ltd. Windows Store Apps Essentials/Session 1 14

© Aptech Ltd. Windows Store Apps Essentials/Session 1 15

The output of Canvas is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 16

Following step-by-step procedure shows how to create a vertical StackPanel of

Enter name of the project as StackPanelDemo and click OK.

Add the code as shown in Code Snippet to MainPage.xaml.

© Aptech Ltd. Windows Store Apps Essentials/Session 1 17

Following Code Snippet explains how to create a Orientation property of StackPanel in

© Aptech Ltd. Windows Store Apps Essentials/Session 1 18

The output of Stack panel is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 19

The step-by-step procedure to use a Grid control is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 20

© Aptech Ltd. Windows Store Apps Essentials/Session 1 21

<Button Content=”Click Me 4” HorizontalAlignment=”Left” Margin=”331,27,0,0”

<Button Content=”Click Me 5” HorizontalAlignment=”Left” Margin=”620,27,0,0”

<Button Content=”Click Me 6” HorizontalAlignment=”Left” Margin=”620,189,0,0”

© Aptech Ltd. Windows Store Apps Essentials/Session 1 22

The output of Grid is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 23

The step-by-step procedure to use a VariableSizedGrid control is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 24

© Aptech Ltd. Windows Store Apps Essentials/Session 1 25

The output of VariableSizedWrapGrid is as follows:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 26

© Aptech Ltd. Windows Store Apps Essentials/Session 1 27

Support for Window Resizing:

© Aptech Ltd. Windows Store Apps Essentials/Session 1 28

The user interface is reusable.