follow-app BOOTCAMP 2: Introduction to silverlight

An Introduction to Silverlight

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

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 5

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

6 6

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

7 7

Windows Phone

Silverlight display elements

Application title

Page title

First number

Plus text

Second number

Equals button

Result text

8 8

Windows Phone

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

9

FrameworkElement

TextBlock

TextBox ContentControl

ButtonBase

Button

Control

9

Windows Phone

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 1

0

Windows Phone

Elements and XAML

XAML is the markup language that describes the Silverlight UI components

11

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

1

1

Windows Phone

Grid container element

Grid is a container into which you can position display elements

12


1

2

Windows Phone

TextBox element

TextBox is used for text entry

TextBlock can be used for text display

13


1

3

Windows Phone

Button element

Button is used for user actions and generates events when activated

14


1

4

Windows Phone


Button element

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

15 1

5

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

16

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

1

6

Demo

Demo 1: The Silverlight Adding Machine

17

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

18 1

8

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

19

SupportedOrientations="Portrait"

SupportedOrientations="PortraitOrLandscape"

1

9

Windows Phone

Using a StackPanel

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

20

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

2

0

Demo

Demo 2: Orientation Handling

21

Windows Phone

Handling errors

A program can catch errors as on the desktop

There is also a MessageBox mechanism as well

22

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

2

2

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

23

<TextBox InputScope="Number" ...

2

3

Demo

Demo 3: Complete Adding Machine

24

ApplicationBar

Windows Phone

Application Chrome

System Tray and Application Bar

System Tray

System owned indicator area that displays system-level status information

Apps can show/hide

Microsoft.Phone.Shell.SystemTray.

IsVisible = false;

Application Bar

Area where applications can display buttons for the most common tasks

Can display pop-up menu for less common tasks

26 2

6

Application Bar

2

7

Windows Phone

Application Bar in Xaml

28

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

2

8

Windows Phone

App Bar & Landscape

2

9

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

3

1

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

3

2

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

3

3

Demo

ApplicationBar, Page Navigation and Pivot Control

34

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

35 3

5

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

3

7

Windows Phone

NuGet

Package management system for .NET

Simplifies incorporating 3rd party libraries

Developer focused

Free, open source

Install NuGet using the Visual Studio

Extension Manager

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

3

8

Education

follow-app BOOTCAMP 2: Introduction to silverlight