<<  An Introduction to Cost Terms and Purposes An introductory guide to OED ONLINE  >>
An Introduction to Silverlight
An Introduction to Silverlight
Topics
Topics
An Introduction to Silverlight
An Introduction to Silverlight
Windows Phone and Metro
Windows Phone and Metro
Tools for the job : Design
Tools for the job : Design
Metro Templates and Components
Metro Templates and Components
Application Types and Templates
Application Types and Templates
Silverlight display elements
Silverlight display elements
Silverlight element class hierarchy
Silverlight element class hierarchy
Elements in AddingMachine
Elements in AddingMachine
Elements and XAML
Elements and XAML
Grid container element
Grid container element
TextBox element
TextBox element
Button element
Button element
Button element
Button element
Button click event handler
Button click event handler
Demo 1: The Silverlight Adding Machine
Demo 1: The Silverlight Adding Machine
Best Practice: Keyboard use
Best Practice: Keyboard use
Selecting Orientations
Selecting Orientations
Using a StackPanel
Using a StackPanel
Demo 2: Orientation Handling
Demo 2: Orientation Handling
Handling errors
Handling errors
Configuring the input scope
Configuring the input scope
Demo 3: Complete Adding Machine
Demo 3: Complete Adding Machine
ApplicationBar
ApplicationBar
Application Chrome System Tray and Application Bar
Application Chrome System Tray and Application Bar
Application Bar
Application Bar
Application Bar in Xaml
Application Bar in Xaml
App Bar & Landscape
App Bar & Landscape
Page Navigation
Page Navigation
Frame and Page
Frame and Page
Page Navigation
Page Navigation
Navigating Back
Navigating Back
ApplicationBar, Page Navigation and Pivot Control
ApplicationBar, Page Navigation and Pivot Control
Review
Review
Bonus
Bonus
Silverlight Toolkit for Windows Phone
Silverlight Toolkit for Windows Phone
NuGet
NuGet

: An Introduction to Silverlight. : Larry Lieberman. : An Introduction to Silverlight.pptx. zip-: 5217 .

An Introduction to Silverlight

An Introduction to Silverlight.pptx
1 An Introduction to Silverlight

An Introduction to Silverlight

Matt Harrington Developer Evangelist, Microsoft bit.ly/mattharrington, @mh415

October 20, 2011

2 Topics

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 An Introduction to Silverlight
4 Windows Phone and 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://msdn.microsoft.com/en-us/library/hh202915.aspx

4

5 Tools for the job : Design

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 Metro Templates and Components

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 Application Types and Templates

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 Silverlight display elements

Silverlight display elements

Application title Page title First number Plus text Second number Equals button Result text

8

8

9 Silverlight element class hierarchy

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 Elements in AddingMachine

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 Elements and XAML

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

11

12 Grid container element

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

12

13 TextBox element

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

13

14 Button element

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

14

15 Button element

Button element

Click is the button clicked event which is bound to the method specified

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

15

15

16 Button click event handler

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

16

17 Demo 1: The Silverlight Adding Machine

Demo 1: The Silverlight Adding Machine

17

18 Best Practice: Keyboard use

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 Selecting Orientations

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

19

20 Using a StackPanel

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

20

21 Demo 2: Orientation Handling

Demo 2: Orientation Handling

21

22 Handling errors

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

22

23 Configuring the input scope

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

23

24 Demo 3: Complete Adding Machine

Demo 3: Complete Adding Machine

24

25 ApplicationBar

ApplicationBar

26 Application Chrome System Tray and Application Bar

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

Application Bar

Use the ApplicationBar instead of creating your own menu system

Up to 4 buttons plus optional menu Hit ellipsis to bring up the menu

Dont fill all 4 slots if not needed

Use white foreground on transparent background for icons System will colorize button according to users selected theme

27

28 Application Bar in Xaml

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

28

29 App Bar & Landscape

App Bar & Landscape

ApplicationBar paints on side of screen in landscape

Has built-in animation when page switches orientation

29

30 Page Navigation

Page Navigation

31 Frame and Page

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 Page Navigation

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 Navigating Back

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 ApplicationBar, Page Navigation and Pivot Control

ApplicationBar, Page Navigation and Pivot Control

34

35 Review

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

Bonus

(and really good to know)

37 Silverlight Toolkit for Windows Phone

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 NuGet

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

An Introduction to Silverlight
http://900igr.net/prezentacija/bez_uroka/an-introduction-to-silverlight-237457.html
c

1
900igr.net > > > An Introduction to Silverlight