Upload
ed-donahue
View
1.081
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Brief introduction to Silverlight. Slides presented at Windows Phone Camps in 2011. Demos are available here: http://bit.ly/EdDemos
Citation preview
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
Metro
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
<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
TextBox element
TextBox is used for text entry TextBlock can be used for text display
<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
Button element
Button is used for user actions and generates events when activated
<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 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
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