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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Introduction to Silverlight for Windows Phone

Similar a Introduction to Silverlight for Windows Phone (20)

Más de Dave Bost

Más de Dave Bost (20)

Último

Último (20)

Introduction to Silverlight for Windows Phone