follow-app BOOTCAMP 2: Introduction to silverlight
Upcoming SlideShare
Loading in...5
×
 

follow-app BOOTCAMP 2: Introduction to silverlight

on

  • 770 views

 

Statistics

Views

Total Views
770
Views on SlideShare
616
Embed Views
154

Actions

Likes
0
Downloads
20
Comments
0

1 Embed 154

http://www.qiris.org 154

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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

follow-app BOOTCAMP 2: Introduction to silverlight Presentation Transcript

  • 1. An Introduction toSilverlight
  • 2. 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 Navigation2 Windows Phone
  • 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.aspx4 Windows Phone
  • 5. 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 SDK5 Windows Phone 5
  • 6. Metro Templates andComponents Visual Studio provides a set of Metro project templates Each of them maps onto a particular style of application6 Windows Phone 6
  • 7. Application Types and Templates The three application types provide quite different user experiences Select the one that you feel is the most appropriate7 Windows Phone 7
  • 8. Silverlight display elements Application title Page title First number Plus text Second number Equals button Result text8 Windows Phone 8
  • 9. 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 Button9 Windows Phone 9
  • 10. 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 application1 Windows Phone 100
  • 11. 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 components1 Windows Phone 111
  • 12. 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 elements1 Windows Phone 122
  • 13. 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 display1 Windows Phone 133
  • 14. 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 activated1 Windows Phone 144
  • 15. 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 specified1 Windows Phone 155
  • 16. 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 result1 Windows Phone 166
  • 17. DemoDemo 1: The SilverlightAdding Machine 17
  • 18. 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 screen1 Windows Phone 188
  • 19. 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 changes1 Windows Phone 199
  • 20. 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 components2 Windows Phone 200
  • 21. DemoDemo 2: Orientation Handling 21
  • 22. 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 well2 Windows Phone 222
  • 23. 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 numbers2 Windows Phone 233
  • 24. DemoDemo 3: CompleteAddingMachine 24
  • 25. ApplicationBar
  • 26. 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. IsVisible = false; Application Bar  Area where applications can display buttons for the most common tasks  Can display pop-up menu for less common tasks2 Windows Phone 266
  • 27. Application Bar27
  • 28. 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 288
  • 29. App Bar & Landscape2 Windows Phone9
  • 30. Page Navigation
  • 31. 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 bar3 Windows Phone1
  • 32. 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 Phone2
  • 33. 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 behaviour3 Windows Phone3
  • 34. DemoApplicationBar, Page Navigation and PivotControl 34
  • 35. 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 page3 Windows Phone 355
  • 36. Bonus (and really good to know)
  • 37. 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.com37
  • 38. 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 project3 Windows Phone8