building appsinsilverlight4 part_1
TRANSCRIPT
![Page 1: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/1.jpg)
Building Applications with
Silverlight 4 -Part 1
Dennis J. Perlot
![Page 2: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/2.jpg)
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
![Page 3: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/3.jpg)
3rd Monday of each month
NERD Center Microsoft Offices Cambridge, MA Farmington, CT
First Meeting Oct 18th 6:00pm in Cambridge
Announcing
![Page 4: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/4.jpg)
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
![Page 5: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/5.jpg)
Free Training
Free Coffee
Free Food
You care about user interface
Why are you here?
![Page 6: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/6.jpg)
Disclaimer
Apologies
Examples of Bad UI
![Page 7: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/7.jpg)
Tab Tab Tab Tab
![Page 8: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/8.jpg)
Busy Busy Busy
![Page 9: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/9.jpg)
Reduce Complexity
![Page 10: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/10.jpg)
Density
![Page 11: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/11.jpg)
Just Ignore It
![Page 12: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/12.jpg)
Even More Bad UI
![Page 13: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/13.jpg)
Attempt at Useful Error Message
![Page 14: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/14.jpg)
The most useless error message
![Page 15: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/15.jpg)
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
![Page 16: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/16.jpg)
User Interface DesignerInteractions, colors, fonts, etc.
Information ArchitectLogical organization of application
User Experience DesignerTotal experience including install, call center, etc.
Different levels
![Page 17: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/17.jpg)
Don’t Make Me ThinkBy Steve Krug
Why Software SucksBy David Platt
Read These Books!
![Page 18: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/18.jpg)
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
![Page 19: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/19.jpg)
BackgroundWhat new in version 4Controls and Templates Data bindingWCF/RIA
And lots of demos
Silverlight
![Page 20: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/20.jpg)
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
![Page 21: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/21.jpg)
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
![Page 22: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/22.jpg)
Additional Out of Browser featuresToast Notifications COM Inter OpElevated trustLocal file system access
More OOB
![Page 23: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/23.jpg)
Silverlight Architecture
![Page 24: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/24.jpg)
Silverlight requires browser plug-in
Plug-in available forInternet ExplorerFire Fox Safari ChromeOperaSea MonkeyMono – under dev
Where will it run?
![Page 25: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/25.jpg)
Visual Studio 2010Silverlight 4 runtime plug-inSilverlight 4 toolkitWCF RIA toolkitExpression Blend 4
Or Use Web Platform Installer
What do I need ?
![Page 26: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/26.jpg)
Web Platform Installer
![Page 27: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/27.jpg)
Web Platform Installer
![Page 28: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/28.jpg)
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
![Page 29: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/29.jpg)
Text Box <TextBox …. />Button <Button .... />Check Box <CheckBox .…/>Radio Button <RadioButton …. /> Combo Box <ComboBox …. />
And many, many more
Traditional Controls
![Page 30: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/30.jpg)
Margin=Left, Top, Right, Bottom
Many FlavorsMargin = “5,5,5,5”Margin = “5,5” Left / Right, Top/ BottomMargin = “5” All get same value
Margins
![Page 31: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/31.jpg)
CanvasLeft, Right, Bottom, Top positioning of elements
GridTabular row/column layout – like HTML tables
Stack PanelArranges child elements vertically or horizontally
Layout Controls
![Page 32: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/32.jpg)
It Starts with a Silverlight App
![Page 33: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/33.jpg)
Hello World
Demo
![Page 34: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/34.jpg)
And we get…
![Page 35: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/35.jpg)
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
![Page 36: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/36.jpg)
<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
![Page 37: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/37.jpg)
<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
![Page 38: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/38.jpg)
Implicit and Named Styles
Demo
![Page 39: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/39.jpg)
And we get
![Page 40: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/40.jpg)
Property of TextBlock
Determines visible limit
Truncates text exceeding width
Places Ellipsis to indicate more…
Text Trimming
![Page 41: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/41.jpg)
Text Trimming
Demo
![Page 42: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/42.jpg)
And we get
![Page 43: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/43.jpg)
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
![Page 44: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/44.jpg)
Mouse Right Click and Wheel
Demo
![Page 45: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/45.jpg)
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
![Page 46: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/46.jpg)
<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
![Page 47: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/47.jpg)
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?
![Page 48: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/48.jpg)
EKG like AnimationOrPlanet Orbits
Demo
![Page 49: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/49.jpg)
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
![Page 50: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/50.jpg)
Binding Types
Binding Target Binding Source
Dependency Object Object
Dependency PropertyPropertyTwoWay
OneWay
OneWayToSource
![Page 51: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/51.jpg)
<Label Content="{Binding path=PropertyName}"
<Label Content="{Binding Path=BizFunction}“
ControlName.DataContext = Object;
ListBox1.DataContext = List <T>;
Data Binding
![Page 52: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/52.jpg)
Slider to text box demo
Demo
![Page 53: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/53.jpg)
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
![Page 54: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/54.jpg)
Bold fields are bound data
Data Templates
![Page 55: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/55.jpg)
<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
![Page 56: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/56.jpg)
Lots of optionsLots of confusionWCF/RIA Recommended for SilverlightRich tooling support in VS 2010Project Template support
Web Services
![Page 57: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/57.jpg)
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
![Page 58: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/58.jpg)
WCF/RIA with Northwind database
Demo
![Page 59: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/59.jpg)
Every developer’s favorite:The Data Grid
and nowThe Data Form
Demo
![Page 60: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/60.jpg)
All XAML in Silverlight?Not yet, just a subset
How can I quickly change the look and feel?Use Styles
Common Questions
![Page 61: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/61.jpg)
What about deployment?Nothing special needed on web serverUse Publish to web serverHosting page detects if Silverlight installed
Common Questions
![Page 62: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/62.jpg)
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
![Page 63: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/63.jpg)
What abut design patterns?UnityMEF – Multiple Extensible FrameworkMV-VM – Model View – View ModelMV-VM lightPrism
Common Questions
![Page 64: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/64.jpg)
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
![Page 65: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/65.jpg)
Scott Guthrie (ScottGu)Silverlight
John PapaJesse LibertyTim Heuer
Expression BlendAdam Kinney
BLOGS
![Page 66: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/66.jpg)
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
![Page 67: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/67.jpg)
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
![Page 68: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/68.jpg)
BI Dashboard Prototype
Combat Explorer
Demos (if we have time)
![Page 69: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/69.jpg)
and hopefully some answers
Questions
![Page 70: Building appsinsilverlight4 part_1](https://reader035.vdocuments.net/reader035/viewer/2022081514/55ba95ccbb61eb524a8b46de/html5/thumbnails/70.jpg)
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