Building Applications with

Silverlight 4 -Part 1

Dennis J. Perlot

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

Speaker.Bio.ToString

3rd Monday of each month

NERD Center Microsoft Offices Cambridge, MA Farmington, CT

First Meeting Oct 18th 6:00pm in Cambridge

Announcing

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

Housekeeping

Free Training

Free Coffee

Free Food

You care about user interface

Why are you here?

Disclaimer

Apologies

Examples of Bad UI

Tab Tab Tab Tab

Busy Busy Busy

Reduce Complexity

Density

Just Ignore It

Even More Bad UI

Attempt at Useful Error Message

The most useless error message

To end users interface is the systemUser frustration leads to abandonment

Good User Interface is now expectedApplications rejected if lacking

“User Centered Design” groups

Many moving to User Experience (UX)

User Interface is Important

User Interface DesignerInteractions, colors, fonts, etc.

Information ArchitectLogical organization of application

User Experience DesignerTotal experience including install, call center, etc.

Different levels

Don’t Make Me ThinkBy Steve Krug

Why Software SucksBy David Platt

Read These Books!

http://www.microsoft.com/design/toolbox/Tutorials to help developers with design Sample Titles:

Introduction to Design CompositionBalance: White Space and Visual WeightUnderstanding Hue, Saturation and ValueThe Psychology of Color Understanding the Concept of Themes and Gestalt

Design Toolbox

BackgroundWhat new in version 4Controls and Templates Data bindingWCF/RIA

And lots of demos

Silverlight

WPF/E – E for EverywherePrior working name

SilverlightVersion 1.0 – March 2007

Layout, video, 2D, java scriptVersion 2.0 – Sept 2008

Standard controls, sockets, .NET languagesVersion 3.0 – July 2009

60 Controls, 1080p, out of browserVersion 4.0 – April 2010

Printing, elevated trust

History

What is new with Silverlight 4?Many Incremental ImprovementsRich Text BoxWeb Cam and MicrophoneText TrimmingRight Mouse Button and Wheel Support

Visual Studio 2010Houston, we have a design surface!

New Stuff

Additional Out of Browser featuresToast Notifications COM Inter OpElevated trustLocal file system access

More OOB

Silverlight Architecture

Silverlight requires browser plug-in

Plug-in available forInternet ExplorerFire Fox Safari ChromeOperaSea MonkeyMono – under dev

Where will it run?

Visual Studio 2010Silverlight 4 runtime plug-inSilverlight 4 toolkitWCF RIA toolkitExpression Blend 4

Or Use Web Platform Installer

What do I need ?

Web Platform Installer

Web Platform Installer

eXtensible Application Markup LanguageMust be Well Formed

Used for WPF and Silverlight

Think of it as HTML on steroids

Ctrl k+d is your friend

XAML

Text Box <TextBox …. />Button <Button .... />Check Box <CheckBox .…/>Radio Button <RadioButton …. /> Combo Box <ComboBox …. />

And many, many more

Traditional Controls

Margin=Left, Top, Right, Bottom

Many FlavorsMargin = “5,5,5,5”Margin = “5,5” Left / Right, Top/ BottomMargin = “5” All get same value

Margins

CanvasLeft, Right, Bottom, Top positioning of elements

GridTabular row/column layout – like HTML tables

Stack PanelArranges child elements vertically or horizontally

Layout Controls

It Starts with a Silverlight App

Hello World

Demo

And we get…

Styles leverage setter propertiesTied to control type

Quickly change “Look and Feel” Add as many as needed

Named StylesControls definition references explicitly

Implicit StylesThink of as default styles

You Got To Have Style

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

Named 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"/>

Implicit Styles

Implicit and Named Styles

Demo

And we get

Property of TextBlock

Determines visible limit

Truncates text exceeding width

Places Ellipsis to indicate more…

Text Trimming

Text Trimming

Demo

And we get

Right Mouse button supportContext menuEasy with Silverlight 4 toolkit

Mouse Wheel support

Must handle events or get passed alongMouse down and Mouse up

Mouse Support

Mouse Right Click and Wheel

Demo

Easier to do than prior to WPF StoryboardsAnimations Begin Time, Duration, Auto ReverseVary value of a property double, single, color, point

Trigger EventEasing Functions

Animations

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

Animation

System.Windows.Forms.TimerWinForms development, runs on WinForm UI thread

System.Timers.TimerBy 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

Draw Loop But which Timer?

EKG like AnimationOrPlanet Orbits

Demo

BindingsTie control properties to data sources or other propertiesDeclarative through XAML (or programmatic)

Data ContextData flows from parent to child controls

Data TemplatesKey for data bindingSet of elements to be applied repeatedlyLike ASP.NET repeater control

Data Binding

Binding Types

Binding Target Binding Source

Dependency Object Object

Dependency PropertyPropertyTwoWay

OneWay

OneWayToSource

<Label Content="{Binding path=PropertyName}"

<Label Content="{Binding Path=BizFunction}“

ControlName.DataContext = Object;

ListBox1.DataContext = List <T>;

Data Binding

Slider to text box demo

Demo

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>

Data Templates

Bold fields are bound data

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>

Data Templates

Lots of optionsLots of confusionWCF/RIA Recommended for SilverlightRich tooling support in VS 2010Project Template support

Web Services

ADO.NET Entity FrameworkData ModelGenerate from Database

Domain Service ClassWCF services that encapsulate the business logic Exposes a set of operations

Business Application TemplateBuilt in authentication

WCF RIA

WCF/RIA with Northwind database

Demo

Every developer’s favorite:The Data Grid

and nowThe Data Form

Demo

All XAML in Silverlight?Not yet, just a subset

How can I quickly change the look and feel?Use Styles

Common Questions

What about deployment?Nothing special needed on web serverUse Publish to web serverHosting page detects if Silverlight installed

Common Questions

What about performance?Define goalsMeasure early and oftenMinimize the byte countWatch depth of logical treeWill take advantage of hardware like GPU, Pixel Shader, Vertex Shader, etc. Watch the XAP sizeEnable application library caching

Common Questions

What abut design patterns?UnityMEF – Multiple Extensible FrameworkMV-VM – Model View – View ModelMV-VM lightPrism

Common Questions

http://www.silverlight.netchannel9.msdn.com/shows/silverlighttvhttp://live.visitmix.comhttp://www.Silverlightshow.net

Window Presentation Foundation Unleashed – Adam Nathan

Silverlight 3 Programmers Reference - Wrox

Resources

Scott Guthrie (ScottGu)Silverlight

John PapaJesse LibertyTim Heuer

Expression BlendAdam Kinney

BLOGS

1. Go to http://www.silverlight.net/getstarted and download the components you need2. Work your way through #1-5 in the “Start Learning Silverlight” section on that same page3. Take a look http://jesseliberty.com/Tags/gettingstarted4. 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.

Jesse Liberty advice

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 Sucksby David Platt

Understanding Comics – The Invisible Artby Scott McCloud

UI Reading List

BI Dashboard Prototype

Combat Explorer

Demos (if we have time)

and hopefully some answers

Questions

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.

10 Things Silverlight Dev Must Know