building appsinsilverlight4 part_1
TRANSCRIPT
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