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
<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
2
Windows Phone
TextBox element
TextBox is used for text entry
TextBlock can be used for text display
13
<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
3
Windows Phone
Button element
Button is used for user actions and generates events when activated
14
<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
4
Windows Phone
<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 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