Introduction to Silverlight

An Introduction to Silverlight

Ed DonahueAcademic Developer Evangelist

[email protected] | @creepyed

2

Ed DonahueSalsa dancerLight joggerCasual cyclistSwimmerTriathlete (for those counting)Computer science majorLover of monospaced fontsSupporter of womenin techMicrosoft Academic Developer Evangelist

[email protected] | www.creepyed.com | @creepyed

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 Demos available here: http://bit.ly/EdDemos

Windows Phone

Looking for training kits?

Windows Phone 7 Mango Training Kit

http://bit.ly/wp7mangotraining

Windows Phone 5

Help moving from other platforms? Leverage your iPhone dev skills

http://bit.ly/ios2wp7

Leverage your Android dev skills

http://bit.ly/android2wp7

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://bit.ly/DesignGuideWP7

Windows Phone

Tools for the job : Graphical Design Good planning 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

Windows Phone

Metro Templates and Components Visual Studio

provides a set of Metro project templates

Each of them maps onto a particular style of application

Windows Phone

Application Types and Templates

The three application types provide quite different user experiences

Select the one that you feel is the most appropriate

Windows Phone

Silverlight display elements

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

Windows Phone

Elements in AddingMachine

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

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

Windows Phone

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>

Windows Phone

Grid container element

Grid is a container into which you can position display elements


Windows Phone

TextBox element

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


Windows Phone

Button element

Button is used for user actions and generates events when activated


Windows Phone


Button element

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

Windows Phone

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();}

Demo

The Silverlight Adding Machine

21

Windows Phone

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

Windows Phone

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"

Windows Phone

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>

Demo

Orientation Handling

25

Windows Phone

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;}

Windows Phone

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" ...

Demo

Complete Adding Machine

28

ApplicationBar

Windows Phone

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.IsVisi

ble = false; Application Bar

Area where applications can display buttons for the most common tasks

Can display pop-up menu for less common tasks

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

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>

Windows Phone

ApplicationBar paints on side of screen in landscape

Has built-in animation when page switches orientation

App Bar & Landscape

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

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) );}

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();}

Demo

ApplicationBar and Page Navigation

38

Windows Phone

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

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

Introduction to Silverlight

Technology

Transcript of Introduction to Silverlight