introduction to silverlight for windows phone

An Introduction to Silverlight

Dave Bostdave.bost@microsoft.comhttp://davebost.com | @davebost

Windows Phone

Topics

The Metro design style Silverlight Components Creating a Silverlight Application Silverlight and XAML Introduction to Silverlight Layout Components and Events Silverlight Project Templates ApplicationBar Page Navigation

2

Windows Phone

Windows Phone

Windows Phone and Metro

To make life easier for us the Metro style is “baked in” to the Windows developer tools

The default appearance, behaviour and fonts of the user elements all match the style

If you want to find out more about Metro on phone you can read the “User Experience Design Guidelines”

http://msdn.microsoft.com/en-us/library/hh202915.aspx

4

Windows Phone 5

Tools for the job : Graphical Design Great design separates the

graphical design aspects from the programming

The designer works on the look and feel of the application

The programmer implements the required behaviours

Silverlight is designed to support this

A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface

A version of Blend for the phone is supplied as part of the phone SDK

5

Windows Phone 6

Metro Templates and Components Visual Studio

provides a set of Metro project templates

Each of them maps onto a particular style of application

6

Windows Phone 7

Application Types and Templates

The three application types provide quite different user experiences

Select the one that you feel is the most appropriate

7

Windows Phone 8

Silverlight display elements

Application title Page title First number Plus text Second number Equals button Result text

8

Windows Phone 9

Silverlight element class hierarchy The Silverlight class hierarchy is

quite complex Everything is based on the

FrameworkElement class which contains the fundamental properties of all elements

You can derive your own components if you wish

FrameworkElement

TextBlock

TextBox ContentControl

ButtonBase

Button

Control

9

Windows Phone 10

Elements in AddingMachine

The adding machine actually contains three different types of Silverlight display element

TextBox Used to receive user input from the keyboard

TextBlock Used to display messages to the user

Button Used to cause events in the application

10

Windows Phone 11

Elements and XAML

XAML is the markup language that describes the Silverlight UI components

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . .</Grid>

11

Windows Phone 12

Grid container element

Grid is a container into which you can position display elements

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . .</Grid>

12

Windows Phone 13

TextBox element

TextBox is used for text entry TextBlock can be used for text display

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . .</Grid>

13

Windows Phone 14

Button element

Button is used for user actions and generates events when activated

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . .</Grid>

14

Windows Phone 15

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> . . . <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> . . .</Grid>

Button element

Click is the button clicked event which is bound to the method specified

15

Windows Phone 16

Button click event handler

The event hander for the button takes the values out of the textboxes, parses them and then calculates and displays the result

private void equalsButton_Click(object sender, RoutedEventArgs e){ float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text);

float result = v1 + v2;

resultTextBlock.Text = result.ToString();}

16

Demo

Demo 1: The Silverlight Adding Machine

17

Windows Phone 18

Best Practice: Keyboard use

It is best if the user can still press the equals button when the keyboard is displayed

This means the equals button should be moved up the screen

18

Windows Phone 19

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"

19

Windows Phone 20

Using a StackPanel

To automatically handle orientation change we can use a StackPanel container that will stack the display components

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <StackPanel> <TextBox Height="72" HorizontalAlignment="Center" .../> <TextBlock Height="56" HorizontalAlignment="Center" .../> <TextBox Height="72" HorizontalAlignment="Center" .../> <Button Content="equals" Height="72" ...> <TextBlock Height="46" HorizontalAlignment="Center" .../> </StackPanel></Grid>

20

Demo

Demo 2: Orientation Handling

21

Windows Phone 22

Handling errors

A program can catch errors as on the desktop There is also a MessageBox mechanism as well

try{ v1 = float.Parse(firstNumberTextBox.Text); v2 = float.Parse(secondNumberTextBox.Text);}catch{ MessageBox.Show("Invalid number"); return;}

22

Windows Phone 23

Configuring the input scope

If all you want from the user is a number it is dangerous to allow them to enter text as well

You can add to the XAML to specify that the keyboard only accepts numbers

<TextBox InputScope="Number" ...

23

Demo

Demo 3: Complete Adding Machine

24

ApplicationBar

Windows Phone 26

Application ChromeSystem Tray and Application Bar System Tray

System owned indicator area that displays system-level status information

Apps can show/hide Microsoft.Phone.Shell.SystemTray.Is

Visible = false; Application Bar

Area where applications can display buttons for the most common tasks

Can display pop-up menu for less common tasks

26

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 menuUse white foreground on transparent background for icons

System will colorize button according to users selected theme

Application Bar

27

Windows Phone

Application Bar in Xaml<phone:PhoneApplicationPage x:Class=“MyApp.MainPage” … >

<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar x:Name="AppBar" 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>

28

Windows Phone

ApplicationBar paints on side of screen in landscape

Has built-in animation when page switches orientation

App Bar & Landscape

29

Page Navigation

Windows Phone

Frame and Page Frame

Top-level container control PhoneApplicationFrame class Contains the page control and

system elements such as system tray and application bar

Page Fills the entire content region of

the frame PhoneApplicationPage-derived

class Contains a title Optionally surfaces its own

application bar

31

Windows Phone

Page Navigation

Silverlight on Windows Phone uses a Page-based navigation model

Similar to web page model Each page identified by a URI Each page is essentially stateless

private void hyperlinkButton1_Click( object sender, RoutedEventArgs e){ NavigationService.Navigate( new Uri("/SecondPage.xaml", UriKind.RelativeOrAbsolute) );}

32

Windows Phone

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 button1_Click( object sender, RoutedEventArgs e){ NavigationService.GoBack();}

33

Demo

ApplicationBar, Page Navigation and Pivot Control

34

Windows Phone 35

Review

Windows Phone applications use Silverlight to express the design of their user interface

The design is expressed in a XAML text file that identifies and configures display elements

Elements can also be manipulated as code objects There are a set of Silverlight templates for applications and elements

based on the Metro design You can create multiple Silverlight pages and add them to your project Navigation to pages is performed on the basis of uri (Uniform Resource

Indicator) values The back button normally navigates back to the source page, but this

can be overridden The uri can contain simple text messages Pages can share larger objects in the App.xaml page

35

Bonus

(and really good to know)

Silverlight Toolkit for Windows Phone A product of the Microsoft Silverlight team The Silverlight Toolkit adds tons of additional controls ‘out of

band’ from the official product control set Includes full open source code, samples, documentation, and

design-time support for controls Refresh every 3 months or so

Bug fixes New controls

http://silverlight.codeplex.com

37

Windows Phone

NuGet

Package management system for .NET Simplifies incorporating 3rd party libraries Developer focused Free, open source

Install NuGet using the Visual Studio ExtensionManager

Use NuGet to add libraries such as the Silverlight Toolkit to your project

38

Q&A