follow-app BOOTCAMP 2: Introduction to silverlight

An Introduction to
Silverlight

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

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 SDK

5 Windows Phone 5

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 6

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 7

Silverlight display elements

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

8 Windows Phone 8

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

Button

9 Windows Phone 9

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

1 Windows Phone 10
0

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

1 Windows Phone 11
1

Grid container element
. . .
. . .
</Grid>

 Grid is a container into which you can position display elements

1 Windows Phone 12
2

TextBox element
. . .
. . .
</Grid>

 TextBox is used for text entry
 TextBlock can be used for text display

1 Windows Phone 13
3

Button element
. . .
. . .
</Grid>

 Button is used for user actions and generates events when activated

1 Windows Phone 14
4

Button element
. . .
. . .
</Grid>

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

1 Windows Phone 15
5

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

1 Windows Phone 16
6

Demo

Demo 1: The Silverlight
Adding Machine

17

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

1 Windows Phone 18
8

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
changes

1 Windows Phone 19
9

Using a StackPanel
<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

2 Windows Phone 20
0

Demo

Demo 2: Orientation Handling

21

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

2 Windows Phone 22
2

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

2 Windows Phone 23
3

Demo

Demo 3: Complete
Adding
Machine

24

Application Chrome
System 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 tasks
2 Windows Phone 26
6

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

App Bar & Landscape

2 Windows Phone
9

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

3 Windows Phone
1

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

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

3 Windows Phone
3

Demo

ApplicationBar, Page Navigation and Pivot
Control

34

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 page

3 Windows Phone 35
5

Bonus
(and really good to know)

Silverlight Toolkit for Windows
Phone 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

3
7

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 project

3 Windows Phone
8

follow-app BOOTCAMP 2: Introduction to silverlight

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (8)

Similar to follow-app BOOTCAMP 2: Introduction to silverlight

Similar to follow-app BOOTCAMP 2: Introduction to silverlight (20)

More from QIRIS

More from QIRIS (14)

Recently uploaded

Recently uploaded (20)

follow-app BOOTCAMP 2: Introduction to silverlight