Windows Phone 8 - 3 Building WP8 Applications
-
Upload
oliver-scheer -
Category
Technology
-
view
768 -
download
1
Transcript of Windows Phone 8 - 3 Building WP8 Applications
![Page 1: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/1.jpg)
Oliver Scheer
Senior Technical Evangelist
Microsoft Deutschland
http://the-oliver.com
Building Windows PhoneApplications
![Page 2: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/2.jpg)
AgendaDesigning Windows Phone Applications
This module follows on from the previous, in which we go through the essential knowledge you need to build an application
In this module:• Page navigation• Application Bar• Handling Page Orientation Changes• Handling Different Screen Resolutions• Localization• Windows Phone Toolkit• Page Transitions
![Page 3: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/3.jpg)
Page Navigation
![Page 4: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/4.jpg)
• Frame• Top-level container control• PhoneApplicationFrame class• Contains the page control and system
elements such as system tray and
application bar
• Page• Fills entire content region of the frame• PhoneApplicationPage-derived class• Contains a title•Optionally surfaces its own application bar
Frame and Page
![Page 5: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/5.jpg)
Page Navigation
•XAML apps on Windows Phone use a
page-based navigation model• Similar to web page model• Each page identified by a URI• Each page is essentially stateless
private void HyperlinkButton_Click_1( object sender, RoutedEventArgs e) { NavigationService.Navigate( new Uri("/SecondPage.xaml", UriKind.Relative)); }
![Page 6: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/6.jpg)
Navigating Back
• Application can provide controls to
navigate back to preceding page
• The hardware Back key will also navigate
back to preceding page• No code required – built-in behaviour
private void Button_Click_1( object sender, RoutedEventArgs e) { NavigationService.GoBack(); }
![Page 7: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/7.jpg)
Overriding Back Key
•May need to override Back hardware key if ‘back to previous page’ is not
logical behaviour• For example, when displaying a popup panel•User would expect Back key to close the panel,
not the page
![Page 8: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/8.jpg)
Overriding the Back Key
8
<phone:PhoneApplicationPage x:Class="PhoneApp1.MainPage" … shell:SystemTray.IsVisible="True" BackKeyPress="PhoneApplicationPage_BackKeyPress">
In code: private void PhoneApplicationPage_BackKeyPress(object sender, System.ComponentModel.CancelEventArgs e) { e.Cancel = true; // Tell system we've handled it
// Hide the popup... ... }
![Page 9: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/9.jpg)
Passing Data Between Pages
• Can pass string data between pages using query strings
•On destination page
private void passParam_Click(object sender, RoutedEventArgs e) { NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" + textBox1.Text, UriKind.Relative)); }
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e) { base.OnNavigatedTo(e);
string querystringvalue = ""; if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue)) textBlock1.Text = querystringvalue; }
![Page 10: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/10.jpg)
Passing Objects Between Pages
• Often, you will pass a data object from one page to
another• E.g., user selects an item in a list and navigates to a
Details page
• One solution is to store your ViewModel (that is, data)
in your App class• Global to whole application
• Pass the ID of the selected item in query string // Navigate to the new page NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));
![Page 11: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/11.jpg)
Handling Non Linear Navigation
• Design your app navigation strategy carefully!
• If you navigate from ‘third page’ to ‘main page’
and your user then presses the Back key, what
happens?• User expects app to exit• App actually navigates back to Third Page
• Solution for Windows Phone 7.0 was complex code
to handle back navigation correctly, or the Non-
Linear Navigation Recipe library from AppHub
•Windows Phone APIs:• NavigationService.RemoveBackEntry()
11
![Page 12: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/12.jpg)
NavigationService.RemoveBackEntry()
• When ‘Third Page’ navigates back to MainPage, put a marker in the query string
• In OnNavigatedTo() in MainPage, look for the marker and if present, remove the ‘ Third
Page’, ‘SecondPage’ and original instance of ‘MainPage’ from the navigation history stack
12
NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative));
protected override void OnNavigatedTo(NavigationEventArgs e) { if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New && NavigationContext.QueryString.ContainsKey("homeFromThird")) { NavigationService.RemoveBackEntry(); // Remove ThirdPage NavigationService.RemoveBackEntry(); // Remove SecondPage NavigationService.RemoveBackEntry(); // Remove original MainPage } base.OnNavigatedTo(e); }
![Page 13: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/13.jpg)
Demo 1: Page Navigation
13
![Page 14: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/14.jpg)
ApplicationBar
![Page 15: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/15.jpg)
System TraySystem owned indicator area that displays system-level status informationApps can show/hideMicrosoft.Phone.Shell.SystemTray.IsVisible = false;
Application BarArea where applications can display buttons for
the most common tasksCan display pop-up menu for less common tasks
Application Chrome System Tray and Application Bar
![Page 16: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/16.jpg)
Don’t fill all 4 slots if not needed
Use the ApplicationBar instead of creating your own menu system
Up to 4 buttons plus optional menuSwipe up the bar to bring up the menu
Swipe up the bar to bring up the menu
Use white foreground on transparent background for icons
System will colorize button according to users selected theme
ApplicationBar
![Page 17: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/17.jpg)
ApplicationBar in Xaml
17
<phone:PhoneApplicationPage x:Class="CRMapp.MainPage“ …> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar x:Name="AppBar" Opacity="1.0" IsMenuEnabled="True"> <shell:ApplicationBar.Buttons> <shell:ApplicationBarIconButton x:Name="NewContactButton" IconUri="Images/appbar.new.rest.png" Text="New" Click="NewContactButton_Click"/> <shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png" Text="Find" Click="SearchButton_Click"/> </shell:ApplicationBar.Buttons> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data" Click="GenerateMenuItem_Click" /> <shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data" Click="ClearMenuItem_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
![Page 18: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/18.jpg)
ApplicationBar and Landscape
ApplicationBar paints on side of screen in landscape
Has built-in animation when page switches orientation
![Page 19: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/19.jpg)
If Application Bar opacity is less than 1, displayed page will be the size of the screen Application Bar overlays screen content
If Opacity is 1, displayed page is resized to the area of the screen not covered by the Application Bar
ApplicationBar Opacity
19
![Page 20: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/20.jpg)
ApplicationBar Design in Blend – and now in VS Too!
![Page 21: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/21.jpg)
Demo 2: Designing
an ApplicationBar
21
![Page 22: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/22.jpg)
Handling Screen Orientation Changes
![Page 23: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/23.jpg)
23
Phone UI Design – Orientation
• This application does not work in landscape mode at the moment
•Not all applications do, or need to
• You can configure applications to support portrait or landscape
![Page 24: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/24.jpg)
New Device Tab in Visual Studio 2012
• View Designer in Portrait or Landscape
04/12/202324
![Page 25: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/25.jpg)
25
Selecting Orientations
• A XAML property for the phone application page lets you select the orientation
options available
• Your application can bind to an event which is fired when the orientation changes
SupportedOrientations="Portrait"
SupportedOrientations="PortraitOrLandscape"
![Page 26: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/26.jpg)
Layout May Need Altering
04/12/202326
Layout unaltered
Layout optimised for landscape
![Page 27: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/27.jpg)
27
Using a Grid to Aid Landscape Layout
• In the Grid, the second column is unused in Portrait
<phone:PivotItem Header="recipe"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>... </Grid>
Row 0
Row 1
Row 2
Row 3
Column 0
![Page 28: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/28.jpg)
28
Move Elements in Landscape Layout
• In Landscape, the recipe description moves into the second row and the second column and
the third row of the grid is now unused. Since that row’s Height is “*”, it shrinks to zero.
<phone:PivotItem Header="recipe"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>... </Grid>
Row 0
Row 1
Row 2
Row 3
Column 0 Column 1
![Page 29: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/29.jpg)
Moving Elements
private void PhoneApplicationPage_OrientationChanged(object sender,
OrientationChangedEventArgs e) {
if (this.Orientation == PageOrientation.LandscapeLeft || this.Orientation ==
PageOrientation.LandscapeRight)
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 1);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1);
}
else
{
DirectionsScrollViewer.SetValue(Grid.RowProperty, 2);
DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0);
}
}
04/12/202329
![Page 30: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/30.jpg)
Demo 4: Orientation Handling
![Page 31: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/31.jpg)
Supporting Multiple Screen Resolutions
![Page 32: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/32.jpg)
3 Screen Resolutions
WVGA800 x 48015:9
WXGA1280 x 76815:9
720p1280 x 72016:9
![Page 33: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/33.jpg)
04/12/2023Microsoft confidential33
•Well, No…
• As developers, we work with device independent pixels•OS applies a scale factor to the actual resolution
So I Have to Do Three Different UIs?
Resolution Aspect ratio Scale Factor Scaled resolution
WVGA 800 x 480 15:9 1.0x scale 800 x 480
WXGA 1280 x 768 15:9 1.6x scale 800 x 480
720p 1280 x 720 16:91.5x scale, 80 pixels
taller (53 pixels, before scaling)
853 x 480
![Page 34: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/34.jpg)
Scaled Resolutions
WVGA WXGA 720p
800
800 853
480480
480
![Page 35: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/35.jpg)
04/12/2023Microsoft confidential35
• Set Grid Row Height to “Auto” to size
according to the controls placed within
it
• Set Grid Row Height to “*” to take up
all the rest of the space
• If you size multiple rows using “*”,
available space is divided up evenly
between them
Use “Auto” and “*” on Grid Rows To Ensure Good Layout
<Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>... </Grid>
![Page 36: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/36.jpg)
04/12/2023Microsoft confidential36
Adaptive Layout Using Grid
WVGA 720p
Image height sized explicitly at 240px
Bottom row is “Auto” so sized to hold a
TextBlock
Directions row is “*” so gets everything that’s left – ends up taller on
720p
![Page 37: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/37.jpg)
04/12/2023Microsoft confidential37
• In most cases, you should supply images targeting the WXGA (1280 x 768)
screen• WXGA assets are of the highest quality• Will automatically scale down on WVGA phones• Still look great on 720p (1280 x 720)
• If you want, you can include images at each of the three resolutions in your
project• E.g. MyImage.wvga.png, MyImage.wxga.png and MyImage.720p.png• At runtime, get Application.Current.Host.Content.ScaleFactor to determine
the resolution of the screen on the current phone, returns 100 for WVGA, 160 for
WXGA and 150 for 720p• Write code to load image at runtime appropriate for the current screen resolution
Images
![Page 38: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/38.jpg)
04/12/2023Microsoft confidential38
• To add a splash screen to your project suitable for all resolutions, add a file as
content called SplashScreenImage.jpg at 768 x 1280 resolution• The framework automatically scales it to the correct size on different resolution
screens
• If you want to provide pixel-perfect splash screens for all resolutions, add
images with the following names:• SplashScreenImage.Screen-WVGA.jpg• SplashScreenImage.Screen-WXGA.jpg• SplashScreenImage.Screen-720p.jpg
• In addition to these images, you must still include the default
SplashScreenImage.jpg file
Splash Screens
![Page 39: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/39.jpg)
04/12/2023Microsoft confidential39
• You must supply app icon and tile images sized for WXGA
• The framework automatically scales to the correct size for WVGA and 720p
App Icon and Tiles
Tile size WXGA
Application Icon 100 × 100
Small 159 × 159
Medium 336 × 336
Large 691 × 336
![Page 40: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/40.jpg)
Demo 4: Screen Resolutions
40
![Page 41: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/41.jpg)
Introduction to Localization
![Page 42: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/42.jpg)
•Windows Phone 8 supports 50 display languages (shipped
with the phone depending on market and country/region)
and selectable by the user on the language+region
section of the Settings page•Windows Phone 7.1 supported only 24
•Windows Phone 8 allows you to build apps that read from
right to left
Windows Phone 8 Language Support
04/12/2023
![Page 43: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/43.jpg)
• Every new project you create in Visual Studio 2012 has a
class included called LocalizedStrings• Simply provides programmatic access to resources• An instance of this is create in App.xaml in the Application
Resources with the key LocalizedStrings
• Every new project also includes a resources file:
Resources\AppResources.resx• Some strings already defined in here• Create all your string literals in here to support localization
• All new projects also included commented-out code in
MainPage.xaml.cs to setup a localized Application Bar
New Project Templates Have Localization Support Built In
04/12/2023
![Page 44: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/44.jpg)
04/12/2023Microsoft confidential44
•Databind the Text property of
your TextBlock and other controls
to the StaticResource with a
key of LocalizedStrings • That is an instance of the
LocalizedStrings class• It provides access to string
resources
Accessing String Resources from XAML
![Page 45: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/45.jpg)
04/12/2023Microsoft confidential45
•Double-click project properties to open the Properties editor
•On the Application tab• Check each of the
languages your app
will support
• Save the Project Properties• Visual Studio creates new
AppResources files for each
selected language/culture
Add Support for Additional Languages
![Page 46: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/46.jpg)
04/12/2023Microsoft confidential46
• Visual Studio adds a resource file for each additional language that the app will
support. Each resource file is named using the correct culture/language name,
as described in Culture and language support for Windows Phone in the
documentation
• For example: • For the culture Spanish (Spain), file is AppResources.es-ES.resx.• For the culture German (Germany), file is AppResources.de-DE.resx.
• Supply appropriate translations in each resource file
Translate the Additional Languages Resource Files
![Page 47: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/47.jpg)
04/12/2023Microsoft confidential47
•Double-click WMAppManifest.xml to open the manifest editor
•On the Packaging tab• Set the Default Language
to the language of your
default resources• This identifies the language of the
strings in the default resources file.
For example, if the strings in the
default resources file are English
(United Kingdom) language strings,
you would select English (United Kingdom) as the Neutral Language for the
project
Define the Default Language
![Page 48: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/48.jpg)
Demo 5: Localization
![Page 49: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/49.jpg)
The Windows Phone Toolkit
![Page 50: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/50.jpg)
Windows Phone Toolkit
• A product of the Microsoft Windows Phone team
• Formerly known as the ‘Silverlight Toolkit’
• The Windows Phone Toolkit adds new functionality ‘out of band’ from the official
product control set
• Includes full open source code, samples, documentation, and design-time support
for controls for Windows Phone
• Refresh every three months or so
•Bug fixes•New controls
50
![Page 51: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/51.jpg)
How to Get the Windows Phone Toolkit
• http://phone.codeplex.com
•Get source code, including
the sample application
•No MSI! – Install binaries
from NuGet only
![Page 52: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/52.jpg)
NuGet
• Package management system for .NET
• Simplifies incorporating third-party libraries
•Developer focused
• Free, open source
•NuGet client is included in Visual
Studio 2012 – including Express Editions!
•Use NuGet to add libraries such as
the Windows Phone Toolkit to projects
![Page 53: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/53.jpg)
Controls in the Windows Phone Toolkit
![Page 54: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/54.jpg)
ContextMenu
![Page 55: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/55.jpg)
DatePicker and TimePicker
55
![Page 56: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/56.jpg)
ToggleSwitch
56
![Page 57: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/57.jpg)
WrapPanel
57
![Page 58: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/58.jpg)
ListPicker
•WP7 ComboBox
•Dropdown list for small
number of items
• Full screen selector for longer
lists
![Page 59: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/59.jpg)
…And Many More
• Custom MessageBox
• Rating control
• AutoCompleteBox
• ExpanderView
•HubTile
•…more…
•Download the source from http://Silverlight.codeplex.com, build the sample
application and deploy to emulator or device
04/12/202359
![Page 60: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/60.jpg)
Page Transitions and TiltEffect
![Page 61: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/61.jpg)
Page Transitions
• Easy way to add page transitions to your app similar to
those in the built-in apps
•Different transitions are included• Roll, Swivel, Rotate, Slide and Turnstile
• Start by using the TransitionFrame control from the
Windows Phone Toolkit instead of the default
PhoneApplicationFrame• Set in InitializePhoneApplication() method in
App.Xaml.cs:
![Page 62: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/62.jpg)
Enabling Transitions on a Page
• Declare namespace for Windows Phone Toolkit assembly
• Under <phone:PhoneApplicationPage> root element, add transition you want
![Page 63: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/63.jpg)
TiltEffect
• Add additional visual feedback for control interaction
• Instead of simple states such as Pressed or Unpressed, controls with TiltEffect
enabled provide motion during manipulation• For example, Button has a subtle 3D effect and appears to move into the
page when pressed and bounce back again when released
• Easy to enable TiltEffect for all controls on a page
• Also can apply to individual controls
![Page 64: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/64.jpg)
Demo 6: Page Transitions and TiltEffect
64
![Page 65: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/65.jpg)
Review
• Navigation to pages is performed on the basis of a URI (Uniform Resource Indicator) values
• The back button normally navigates back to the previous page, but this can be overridden
• The URI can contain a query string to pass contextual string data
• Support for Localization is incorporated into the project templates
• Supporting different screen resolutions is simplified because they are scaled to a near-identical
effective resolution.
• Supply images scaled for WXGA and they will be scaled down automatically for lower screen
resolutions.
• The Windows Phone Toolkit is an out of band method for Microsoft to release additional tools and
libraries outside of Visual Studio release cycles• http://silverlight.codeplex.com
• The toolkit includes Page transitions and TiltEffect with which you can add common animations
to your applications
![Page 66: Windows Phone 8 - 3 Building WP8 Applications](https://reader036.fdocuments.in/reader036/viewer/2022062405/5560b62cd8b42af43b8b49ea/html5/thumbnails/66.jpg)
The information herein is for informational purposes only an represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be
interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
© 2012 Microsoft Corporation.
All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.