Introduction to Silverlight
Upcoming SlideShare
Loading in...5
×
 

Introduction to Silverlight

on

  • 1,406 views

Brief introduction to Silverlight. Slides presented at Windows Phone Camps in 2011.

Brief introduction to Silverlight. Slides presented at Windows Phone Camps in 2011.

Demos are available here: http://bit.ly/EdDemos

Statistics

Views

Total Views
1,406
Views on SlideShare
1,404
Embed Views
2

Actions

Likes
0
Downloads
24
Comments
0

2 Embeds 2

http://a0.twimg.com 1
https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 2 Introduction to Silverlight on Windows Phone2.1 Silverlight Background2.1.1 Origins of Silverlight2.1.2 Silverlight elements2.1.2.1 UI/Code Separation2.1.2.2 XAML2.1.2.3 Visual Studio vs Expression Blend2.1.2.4 Silverlight on other platforms2.2 Silverlight Components2.3 Using the Toolbox and Design Surface2.4 Manipulating Components Properties2.5 Text Input Components2.6 Text Output Components2.7 Using XAML to design a User Interface2.8 Introduction to Layout in Silverlight2.9 Components and Events
  • Make the points that:It doesn’t matter if you are not a good designer, Silverlight is designed to make it easy to leverage design skills from those who areSilverlight on the phone makes it easy to use pre-built components in the Metro style to make applications that look like those built into the phone.Make the point that the Metro style is actually becoming more ingrained in Windows, and that it will play an increasing role in Windows products beyond the phone platform.
  • Make the points that:It doesn’t matter if you are not a good designer, Silverlight is designed to make it easy to leverage design skills from those who areSilverlight on the phone makes it easy to use pre-built components in the Metro style to make applications that look like those built into the phone.Make the point that the Metro style is actually becoming more ingrained in Windows, and that it will play an increasing role in Windows products beyond the phone platform.
  • Make the point that the design guidelines are well worth reading. In fact you can’t call yourself a phone developer until you have read them.
  • Make the point that we will be going into more detail on expression blend in the Advanced Silverlight section, for now we are going to focus on how Silverlight works.
  • Once you have picked your theme you can then create an application based on that.
  • Make the point that these are fundamentally the same, in that they are created and managed in exactly the same way.Also make the point that the screens above have been entirely created by the Silverlight templates that are provided as part of Visual StudioThe folder Application Types provides each of the above projects, if you have time to show them in action you can.
  • Make the point that each of these items are described in the XAML that is created to describe the screen
  • All GUIs work like this. Make the point that these are descen
  • Make the point that XAML is text based. It is what Expression Blend produces and it is also produced by the design surface in Visual Studio.
  • Make the point that some containers will perform the layout for you automatically (for example StackPanel). We will be using these later.
  • Make the point that there are TextBlocks for displaying output and TextBox for user entry
  • Make the point that lots of other user actions can generate events (text changed in TextBox etc.
  • Make the point that this text in the XAML must line up with a method called equalsButton_Click in the code behind the form. Otherwise the program will not build.Of course when you use Visual Studio to bind an event hander this name and the hander code is created automatically.
  • This is the code that runs when the equals button is clicked.
  • Use Visual Studio to open the AddingMachineproject in Demo 01 AddingMachineEnsure that the target for the deployment is the Windows Phone 7 EmulatorRun the program.Enter the values of 2 and 2 into the emulator and press equals. Note that the value 4 is displayed.Open the MainPage.xaml.cs source file. (While the program is still running)Put a breakpoint on the first line of the equalsButton_Click methodPress equalsNote that the program stops at the breakpoint.Make the point that you can insert breakpoints into running programs even when the program is running in the device.Step over the assignments of the v1 and v2Rest the cursor over v1 and show that VS displays the value in the variable.Open the Immediate Window in Visual StudioEnter the statementv1=99Run the program on. Note that the program displays the result 101 now.Make the point, again, that this will work on the device too.
  • This is an important point. Some applications are needlessly hard to use because of the way that the soft keyboard overlays vital controls – in this case the equals button.
  • This is in the <phone:PhoneApplicationPageelement in the form design XAML for MainPage.XAML
  • Make the point that if we use the absolute grid positioning our elements are in the wrong place when orientation changes. But a StackPanel container will respond to any particular display dimension.Find out more, including using ScrollViewer and Grid, here:http://bit.ly/t9MwJL
  • Use Visual Studio to open the AddingMachineproject in Demo 02 Orientation AddingMachineEnsure that the target for the deployment is the Windows Phone 7 EmulatorRun the program.Change the orientation from Portrait to landscape. Note that the program still works OK.Make the point that it only changes orientation because the SupportedOrientation property is set correctly.Open up MainPage.xaml (while the program is still running)Put a breakpoint on PhoneApplicationPage_OrientationChanged (while the program is still running)Change the orientation from landscape to portraitNote that the breakpoint is now hit.Make the point that we could add all kinds of custom code here to reposition elements if we wanted to.
  • Make the point that at the moment this code is badly written in that any errors are not handled at all. This should be familiar to anyone who has written desktop applications. Make the point that the message box is as shown, and that there are versions that return OK/Cancel type responses too.Make sure that everyone understands how the exceptions work, and what happens when an invalid number is entered.
  • Of course, by now someone will have told you that the best way to stop the user entering text is to only provide them with a numeric keyboard, as above.Ask the question, do you still need to check for text entry?Answer: Yes, because the user might be typing on a phone that has a physical keyboard and they could use that to enter text instead of numbers. (actually need to check this)Make the point that the soft keyboard can be configured in lots of other ways too, things like whether it is displayed in shift mode first, which layout is used etc etc.
  • Use Visual Studio to open the AddingMachineproject in Demo 03 Complete AddingMachineEnsure that the target for the deployment is the Windows Phone 7 EmulatorRun the program.Click the top text box and note that the soft keyboard comes up with numeric entry.Press the Pause/Break keyboard and explain that this is how you toggle the physical keyboard on the emulator.Enter the value “one”Click equals and note that the error is displayed.Change the value to a digit, and enter a value into the bottom text box.Click equals.Note that the value is displayed as you would expect.If you have time:Mention that one reason for using these standard components is that they can respond correctly to changes in the colour scheme of the phone.Select Debug>Stop Running from Visual StudioSelect the Emulator program.In the emulator, move to the Settings page.Select ThemeSet the Background value to LightExplain that we can adjust some of the settings of the emulator, including the colour of the display and the background scheme.Click Back to leave the Theme settings.Click Back to return to the programs page.Run the AddingMachineprogram on this page. Explain that we can run any of the programs “inside” the emulator as it maintains a Windows Phone filestore until it is shut down.Note that the colour of the text and the buttons has been changed to work correctly in the new background.Make the point that if you design your own custom colour scheme it must work when the background and colour schemes are changed.

Introduction to Silverlight Introduction to Silverlight Presentation Transcript

  • AnIntroduction toSilverlightEd DonahueAcademic Developer Evangelisted.donahue@microsoft.comcreepyed.com | @creepyed
  • Ed DonahueSalsa dancerLight joggerCasual cyclistSwimmerTriathlete (for thosecounting)Computer science majorLover of monospacedfontsSupporter of womenin techMicrosoft AcademicDeveloper Evangelist 2ed.donahue@microsoft.com | www.creepyed.com | @creepyed
  • 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
  • Help moving from otherplatforms? Leverage your iPhone dev skills http://bit.ly/ios2wp7 Leverage your Android dev skills http://bit.ly/android2wp7 Windows Phone 5
  • Metro
  • 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 : GraphicalDesign separates theGood planning 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 andComponents 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 <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 Windows Phone
  • Grid container element <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> Grid is a container into which you can position display elements Windows Phone
  • TextBox element <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> TextBox is used for text entry TextBlock can be used for text display Windows Phone
  • Button element <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 is used for user actions and generates events when activated Windows Phone
  • Button element <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> Click is the button clicked event which is bound to the method specified Windows Phone
  • 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 Windows Phone
  • DemoThe Silverlight Adding Machine 21
  • 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 OrientationsSupportedOrientations="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 Windows Phone
  • Using a StackPanel <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> To automatically handle orientation change we can use a StackPanel container that will stack the display components Windows Phone
  • DemoOrientation Handling 25
  • 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 Windows Phone
  • 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 Windows Phone
  • DemoComplete AddingMachine 28
  • ApplicationBar
  • 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.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 Windows Phone
  • Application Bar
  • 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
  • App Bar & Landscape Windows Phone
  • Page Navigation
  • 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 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 Windows Phone
  • DemoApplicationBar and Page Navigation 38
  • 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 Windows Phone Pages can share larger objects in the App.xaml page
  • Bonus (and really good to know)
  • Silverlight Toolkit for WindowsPhone 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