Part 1 of 2 part talk on building Silverlight apps

1. Building Applications
with
Silverlight 4 -Part 1
Dennis J. Perlot

2. Speaker.Bio.ToString
Dennis J. Perlot
Many years experience
Computer Science/Engineering degree
Artificial Intelligence/Machine Learning
Smithsonian Innovators Award
Instructor for Franklins.Net
Technology Community Advocate
Speaker/ Technology Evangelist

3. Announcing
3rd Monday of each month
NERD Center Microsoft Offices
Cambridge, MA Farmington, CT
First Meeting Oct 18th 6:00pm in Cambridge

4. Housekeeping
PLEASE
Set phone to silent/vibrate
Hold questions to insure we can get through the material
70+ Slides 10 Demos
I will be here all day if we run out of time

5. Why are you here?
Free Training
Free Coffee
Free Food
You care about user interface

6. Examples of Bad UI
Disclaimer
Apologies

7. Tab Tab Tab Tab

8. Busy Busy Busy

9. Reduce Complexity

10. Density

11. Just Ignore It

12. Even More Bad UI

13. Attempt at Useful Error Message

14. The most useless error message

15. User Interface is Important
To end users interface is the system
User frustration leads to abandonment
Good User Interface is now expected
Applications rejected if lacking
“User Centered Design” groups
Many moving to User Experience (UX)

16. Different levels
User Interface Designer
Interactions, colors, fonts, etc.
Information Architect
Logical organization of application
User Experience Designer
Total experience including install, call center, etc.

17. Read These Books!
Don’t Make Me Think
By Steve Krug
Why Software Sucks
By David Platt

18. Design Toolbox
http://www.microsoft.com/design/toolbox/
Tutorials to help developers with design
Sample Titles:
Introduction to Design Composition
Balance: White Space and Visual Weight
Understanding Hue, Saturation and Value
The Psychology of Color
Understanding the Concept of Themes and Gestalt

19. Silverlight
Background
What new in version 4
Controls and Templates
Data binding
WCF/RIA
And lots of demos

20. History
WPF/E – E for Everywhere
Prior working name
Silverlight
Version 1.0 – March 2007
Layout, video, 2D, java script
Version 2.0 – Sept 2008
Standard controls, sockets, .NET languages
Version 3.0 – July 2009
60 Controls, 1080p, out of browser
Version 4.0 – April 2010
Printing, elevated trust

21. New Stuff
What is new with Silverlight 4?
Many Incremental Improvements
Rich Text Box
Web Cam and Microphone
Text Trimming
Right Mouse Button and Wheel Support
Visual Studio 2010
Houston, we have a design surface!

22. More OOB
Additional Out of Browser features
Toast Notifications
COM Inter Op
Elevated trust
Local file system access

23. Silverlight Architecture

24. Where will it run?
Silverlight requires browser plug-in
Plug-in available for
Internet Explorer
Fire Fox
Safari
Chrome
Opera
Sea Monkey
Mono – under dev

25. What do I need ?
Visual Studio 2010
Silverlight 4 runtime plug-in
Silverlight 4 toolkit
WCF RIA toolkit
Expression Blend 4
Or Use Web Platform Installer

26. Web Platform Installer

27. Web Platform Installer

28. XAML
eXtensible Application Markup Language
Must be Well Formed
Used for WPF and Silverlight
Think of it as HTML on steroids
Ctrl k+d is your friend

29. Traditional Controls
Text Box <TextBox …. />
Button <Button .... />
Check Box <CheckBox .…/>
Radio Button <RadioButton …. />
Combo Box <ComboBox …. />
And many, many more

30. Margins
Margin=Left, Top, Right, Bottom
Many Flavors
Margin = “5,5,5,5”
Margin = “5,5” Left / Right, Top/ Bottom
Margin = “5” All get same value

31. Layout Controls
Canvas
Left, Right, Bottom, Top positioning of elements
Grid
Tabular row/column layout – like HTML tables
Stack Panel
Arranges child elements vertically or horizontally

32. It Starts with a Silverlight App

33. Demo
Hello World

34. And we get…

35. You Got To Have Style
Styles leverage setter properties
Tied to control type
Quickly change “Look and Feel”
Add as many as needed
Named Styles
Controls definition references explicitly
Implicit Styles
Think of as default styles

36. Named Styles
<Style x:Key="DefaultLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="10"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>
<Style x:Key=“GreenLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Foreground" Value="DarkGreen"/>
<Setter Property="Background" Value="LightGreen"/>
<Setter Property=“HorizontalAlignment" Value=“Center"/>
</Style>
<Label x:Name=“LabelName” Style="{StaticResource DefaultLabelStyle}" >
<Label x:Name=“LabelName” Style="{StaticResource GreenLabelStyle}" >

37. Implicit Styles
<Application.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Height" Value="55"/>
</Style>
</Application.Resources>
<Button Content="Button" Width="100"/>

38. Demo
Implicit and Named Styles

39. And we get

40. Text Trimming
Property of TextBlock
Determines visible limit
Truncates text exceeding width
Places Ellipsis to indicate more…

41. Demo
Text Trimming

42. And we get

43. Mouse Support
Right Mouse button support
Context menu
Easy with Silverlight 4 toolkit
Mouse Wheel support
Must handle events or get passed along
Mouse down and Mouse up

44. Demo
Mouse Right Click and Wheel

45. Animations
Easier to do than prior to WPF
Storyboards
Animations
Begin Time, Duration, Auto Reverse
Vary value of a property double, single, color, point
Trigger Event
Easing Functions

46. Animation
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>

47. Draw Loop But which Timer?
System.Windows.Forms.Timer
WinForms development, runs on WinForm UI thread
System.Timers.Timer
By default runs on a worker thread but supports a
SynchronizationObject which can be set to a UI object
meaning the timer runs on the UI thread
System.Threading.Timer
Recommended for Silverlight

48. Demo
EKG like Animation
Or
Planet Orbits

49. Data Binding
Bindings
Tie control properties to data sources or other properties
Declarative through XAML (or programmatic)
Data Context
Data flows from parent to child controls
Data Templates
Key for data binding
Set of elements to be applied repeatedly
Like ASP.NET repeater control

50. Binding Types
Binding Target Binding Source
Dependency Object Object
OneWay
Dependency Property
TwoWay Property
OneWayToSource

51. Data Binding
<Label Content="{Binding path=PropertyName}"
<Label Content="{Binding Path=BizFunction}“
ControlName.DataContext = Object;
ListBox1.DataContext = List <T>;

52. Demo
Slider to text box demo

53. Data Templates
Template is really it’s own design surface
<DataTemplate x:Key="BizTemplate">
<StackPanel>
<Label Content="Business Score: "/>
<Label FontWeight="Bold"
Content="{Binding Path=BusinessScore}"/>
</StackPanel>
</DataTemplate>

54. Data Templates
Bold fields are bound data

55. Data Templates
<DataTemplate x:Key="AttackerTemplate">
<Border BorderBrush="Red" BorderThickness="1" Width="300">
<StackPanel Orientation="Horizontal" >
<TextBlock Text="Name: " />
<TextBlock FontWeight="Bold"
Text="{Binding Path=Name}"/>
<TextBlock Text=" BS : "/>
<TextBlock FontWeight="Bold"
Text="{Binding Path=BallisticSkill}"/>
</StackPanel>

56. Web Services
Lots of options
Lots of confusion
WCF/RIA Recommended for Silverlight
Rich tooling support in VS 2010
Project Template support

57. WCF RIA
ADO.NET Entity Framework
Data Model
Generate from Database
Domain Service Class
WCF services that encapsulate the business logic
Exposes a set of operations
Business Application Template
Built in authentication

58. Demo
WCF/RIA with Northwind database

59. Demo
Every developer’s favorite:
The Data Grid
and now
The Data Form

60. Common Questions
All XAML in Silverlight?
Not yet, just a subset
How can I quickly change the look and feel?
Use Styles

61. Common Questions
What about deployment?
Nothing special needed on web server
Use Publish to web server
Hosting page detects if Silverlight installed

62. Common Questions
What about performance?
Define goals
Measure early and often
Minimize the byte count
Watch depth of logical tree
Will take advantage of hardware like GPU, Pixel Shader,
Vertex Shader, etc.
Watch the XAP size
Enable application library caching

63. Common Questions
What abut design patterns?
Unity
MEF – Multiple Extensible Framework
MV-VM – Model View – View Model
MV-VM light
Prism

64. Resources
http://www.silverlight.net
channel9.msdn.com/shows/silverlighttv
http://live.visitmix.com
http://www.Silverlightshow.net
Window Presentation Foundation Unleashed – Adam Nathan
Silverlight 3 Programmers Reference - Wrox

65. BLOGS
Scott Guthrie (ScottGu)
Silverlight
John Papa
Jesse Liberty
Tim Heuer
Expression Blend
Adam Kinney

66. Jesse Liberty advice
1. Go to http://www.silverlight.net/getstarted and download the
components you need
2. Work your way through #1-5 in the “Start Learning Silverlight”
section on that same page
3. Take a look http://jesseliberty.com/Tags/gettingstarted
4. Take a look at the Silverlight How-Do-I videos, picking subjects
that seem interesting to you.
5. Join the http://forums.silverlight.net/forums/14.aspx
They are the very best place to get fast answers.

67. UI Reading List
About Face 1, About Face 2, About Face 3,
The Inmates are Running the Asylum
by Alan Cooper
Don’t Make Me Think
by Steve Krug
Why Software Sucks
by David Platt
Understanding Comics – The Invisible Art
by Scott McCloud

68. Demos (if we have time)
BI Dashboard Prototype
Combat Explorer

69. Questions
and hopefully some answers

70. 10 Things Silverlight Dev Must Know
9. How to Hand-Code XAML
8. How to Use Expression Blend
7. How to Write Value Converters
6. Threading
5. Async Programming
4. An Architectural Pattern (like MVVM or similar)
3. The Layout System
2. Dependency Properties
1. Binding
0. Our limitations, and when to call in a designer.