an introduction to silverlight matt harrington developer evangelist, microsoft...
Post on 29-Dec-2015
216 Views
Preview:
TRANSCRIPT
An Introduction to Silverlight
Matt HarringtonDeveloper Evangelist, Microsoftbit.ly/mattharrington, @mh415October 20, 2011
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 5
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
Windows Phone 6
Metro Templates and Components Visual Studio
provides a set of Metro project templates
Each of them maps onto a particular style of application
6
Windows Phone 7
Application Types and Templates
The three application types provide quite different user experiences
Select the one that you feel is the most appropriate
7
Windows Phone 8
Silverlight display elements
Application title Page title First number Plus text Second number Equals button Result text
8
Windows Phone 9
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
FrameworkElement
TextBlock
TextBox ContentControl
ButtonBase
Button
Control
9
Windows Phone 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 application
10
Windows Phone 11
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>
11
Windows Phone 12
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>
12
Windows Phone 13
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>
13
Windows Phone 14
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>
14
Windows Phone 15
<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
Windows Phone 16
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();}
16
Demo
Demo 1: The Silverlight Adding Machine
17
Windows Phone 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 screen
18
Windows Phone 19
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"
19
Windows Phone 20
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>
20
Demo
Demo 2: Orientation Handling
21
Windows Phone 22
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;}
22
Windows Phone 23
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" ...
23
Demo
Demo 3: Complete Adding Machine
24
ApplicationBar
Windows Phone 26
Application ChromeSystem 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
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 menuHit ellipsis to bring up the menu
Use white foreground on transparent background for icons
System will colorize button according to users selected theme
Application Bar
27
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>
28
Windows Phone
ApplicationBar paints on side of screen in landscape
Has built-in animation when page switches orientation
App Bar & Landscape
29
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
31
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
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
Demo
ApplicationBar, Page Navigation and Pivot Control
34
Windows Phone 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 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
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 Refreshed ~3 months
Bug fixes New controls
silverlight.codeplex.com
37
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
top related