Introduction to Silverlight for Windows Phone

An Introduction to
Silverlight
Dave Bost
dave.bost@microsoft.com
http://davebost.com | @davebost

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 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
4 Windows Phone

Tools for the job : Graphical
Design separates the
 Great design
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
5 interface
Windows Phone 5

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 6

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 7

Silverlight display elements

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

8 Windows Phone 8

Silverlight element class hierarchy
FrameworkElement

 The Silverlight class hierarchy is quite
complex
TextBlock Control
 Everything is based on the
FrameworkElement class which
contains the fundamental properties
TextBox ContentControl
of all elements
 You can derive your own
components if you wish ButtonBase

Button

9 Windows Phone 9

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

1 Windows Phone 10
0

Elements and XAML
<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>

 XAML is the markup language that describes the Silverlight UI
components

1 Windows Phone 11
1

Grid container element
. . .
. . .
</Grid>

 Grid is a container into which you can position display elements

1 Windows Phone 12
2

TextBox element
. . .
. . .
</Grid>

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

1 Windows Phone 13
3

Button element
. . .
. . .
</Grid>

 Button is used for user actions and generates events when activated

1 Windows Phone 14
4

Button element
. . .
. . .
</Grid>

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

1 Windows Phone 15
5

Button click event handler
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();
}

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

1 Windows Phone 16
6

Demo

Demo 1: The
Silverlight
Adding Machine
17

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

1 Windows Phone 18
8

Selecting Orientations
SupportedOrientations="Portrait"

SupportedOrientations="PortraitOrLandscape"

 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

1 Windows Phone 19
9

Using a StackPanel
<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>

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

2 Windows Phone 20
0

Demo

Demo 2: Orientation Handling

21

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

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

2 Windows Phone 22
2

Configuring the input scope
<TextBox InputScope="Number" ...

 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

2 Windows Phone 23
3

Demo

Demo 3: Complete
Adding
Machine
24

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.IsVisib
le = false;
 Application Bar
 Area where applications can display
buttons for the most common tasks
 Can display pop-up menu for less
common tasks

2 Windows Phone 26
6

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>

2 Windows Phone 28
8

App Bar & Landscape

2 Windows Phone
9

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 Windows Phone
1

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 Windows Phone
2

Navigating Back
 Application can provide controls to
navigate
back to preceding page
private void button1_Click(
object sender, RoutedEventArgs e)
{
NavigationService.GoBack();
}

 The hardware Back key will also
navigate back to preceding page
 No code required – built-in behaviour

3 Windows Phone
3

Demo

ApplicationBar, Page Navigation and
Pivot Control
34

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

3
The uri can contain simple text messages
Windows Phone 35
5
 Pages can share larger objects in the App.xaml page

Bonus
(and really good to know)

Silverlight Toolkit for Windows
Phone the Microsoft Silverlight team
A product of
 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

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 Windows Phone
8

Introduction to Silverlight for Windows Phone

More Related Content

What's hot

Similar to Introduction to Silverlight for Windows Phone

More from Dave Bost

Recently uploaded

Introduction to Silverlight for Windows Phone