1. An Introduction to Silverlight Matt Harrington Developer Evangelist, Microsoft bit.ly/mattharrington, @mh415 October 20, 2011

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

3. Windows Phone

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

5. Windows Phone Tools for the job : 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

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

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

8. Windows Phone Silverlight display elements  Application title  Page title  First number  Plus text  Second number  Equals button  Result text 8 8

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

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

11. Windows Phone Elements and XAML  XAML is the markup language that describes the Silverlight UI components 11 <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" />... 11

12. Windows Phone Grid container element  Grid is a container into which you can position display elements 12 <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" />... 12

13. Windows Phone TextBox element  TextBox is used for text entry  TextBlock can be used for text display 13 <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" />... 13

14. Windows Phone Button element  Button is used for user actions and generates events when activated 14 <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" />... 14

15. Windows Phone <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" />... Button element  Click is the button clicked event which is bound to the method specified 15 15

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

17. Demo Demo 1: The Silverlight Adding Machine 17

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

19. 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" 19

20. Windows Phone Using a StackPanel  To automatically handle orientation change we can use a StackPanel container that will stack the display components 20 20

21. Demo Demo 2: Orientation Handling 21

22. 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; } 22

23. 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"... 23

24. Demo Demo 3: Complete Adding Machine 24

25. ApplicationBar

26. 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  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 26

27. Application Bar 27

28. Windows Phone Application Bar in Xaml 28 <phone:PhoneApplicationPage x:Class=“MyApp.MainPage” … > 28

29. Windows Phone App Bar & Landscape 29

30. Page Navigation

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

32. Windows Phone Page Navigation  Silverlight 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) ); } 32

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

34. Demo ApplicationBar, Page Navigation and Pivot Control 34

35. 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 a URI (Uniform Resource Indicator) values  The back button navigates back to the source page  The URI can contain a query string  Pages can share larger objects in the App.xaml page 35 35

36. Bonus (and really good to know)

37. 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  Refreshed ~3 months  Bug fixes  New controls  silverlight.codeplex.com 37

38. Windows Phone NuGet  Package management system for.NET  Simplifies incorporating 3rd party libraries  Developer focused  Free, open source  Install using the Visual Studio Extension Manager  Use NuGet to add libraries such as the Silverlight Toolkit to your project 38