silverlight 4
Post on 19-Nov-2014
1.128 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
Supote Phunsakul Microsoft MVP Twitter @SoftEngine http://codetoday.net http://on.fb.me/silverlightth
Silverlight
2
But first the Big Picture… ".NET At The Core”
3
What Is User Experience?
4
Designer-Developer Productivity
Designers design Developers add business logic
5
Designer-Developer Productivity
• Microsoft Tools for Designer & Developers
• Declarative Programming through XAML
• Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain)
Designers design
With XAML designers &
developers can streamline
their collaboration
Developers add business logic
6
Declarative Programming Through XAML
XAML = Extensive Application Markup Language • Easily toolable, declarative markup • Code and content are separate • Can be rendered in the browser / standalone application
Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100;
C# Dim b1 As New Button b1.Content = "OK" b1.Background = New _ SolidColorBrush(Colors.LightBlue) b1.Width = 100
VB.NET <Button Width="100"> OK <Button.Background> LightBlue </Button.Background> </Button>
XAML
7
What’s Silverlight?
Cross-browser, Cross-platform Technology.
Lightweight download.
Provides a rich model for 2D & 3D drawing.
Including buttons, text boxes, lists, grid and etc.
Have a time-based animation model.
Provides playback of Media Audio, Video.
Includes a scaled-down version of the CLR.
8
What’s Silverlight?
Cross-Browser Cross-Platform
Media Experiences
Rich Interactive Applications
Plugin
9
Silverlight and Flash RIA – Rich Internet Application
VS.
10
History of Silverlight
Silverlight 1.0 Beta
Silverlight 1.1 Alpha
Silverlight 1.0 Silverlight 2 Beta
Silverlight 3 Beta Silverlight 3 Silverlight 4 Beta
Silverlight 2
Silverlight 4
MIX 07 Sep 07 MIX 08
MIX 09 Jul 09 PDC 09
Oct 08
March 10
11
Tools for { Developer }
http://www.microsoft.com/express/download/
Microsoft Silverlight 4 Tools
2010
12
Tools for { Designer }
Expression Studio 4.0 http://www.microsoft.com/expression
13
How to Develop Silverlight?
Designer/Video Editor
Designers
Developer
Developers
UX/Interactive Designer
Visual Designer
VS Project
CSS
XHTML
JavaScript
14
Silverlight 5 Beta Feature
15
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
16
Multi-Column and Linked Text
Flow text from RichTextBox to RichTextBoxOverflow
Link as many as you want
Flow around other elements
Selection works across elements
17
Character Spacing
For text-heavy layout, headlines
Control spacing
between characters (Tracking)
between lines
Character Spacing expressed as 1/1000 of font size
Set on anything derived from Control or TextElement
18
Text Awesomeness
19
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
20
Operating System Windows Before
Use the Popup and ChildWindow classes
Constrained to Silverlight drawing surface
No multi-display support
Silverlight 5
Popup and ChildWindow still supported
Enhanced WindowClass for real OS Windows
21
Native OS Windows
22
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
23
ClickCount
Unlimited click count (double, triple, etc)
Multi-click gestures are common MS Word uses double-click to select word, triple click to select paragraph
Safari 3, Firefox 3, & IE7: triple click selects all text within an element
Silverlight Implementation Supports 1 to n clicks
Some tricks required if you want both n and n+x clicks
24
Double-Click
25
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
26
Binding in Style Setters
Style setters can now be data bound
Change the source object’s values and the styles change
Source Object
Style View
View
View
27
Binding in Style Setters
28
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
29
RelativeSource FindAncestor
Access elements in the visual tree outside of a template
Know exactly how many parents to traverse? AncestorLevel
Common example: ComboBox in a ListBox ‘s ItemTemplate
ComboBox ‘s ItemsSource needs to access DataContext outside the ItemTemplate
30
RelativeSource FindAncestor
DataContext ViewModel
DataContext Book
ItemsSource needs ViewModel.Deals!
31
RelativeSource FindAncestor
32
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
33
Custom Markup Extensions
Run your own code from custom markup attributes
When you want to extend XAML
34
Custom Markup Extensions
35
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
36
Data Binding Debugging
Set breakpoints in XAML on bindings
Hit breakpoints at runtime just as you would with code
Use conditional breakpoints
Inspect values, sources, errors etc.
Walk into Converter code
37
Data Binding Debugging … in XAML !
38
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
39
Implicit Data Templates
Like regular data templates, but … implicit Does for templates what implicit styles did for styles
Like implicit styles, tied to a data type Classes/Structs, not interfaces
Use in any content control or items control Reuse chunks of UI throughout application - automatically
40
Regular (Explicit) Data Templates
class Tweet : TimelineItem {…} class DirectMessage : TimelineItem {…} class Notification : TimelineItem {…} … TimelineItem[] items = new TimelineItems[] { new Tweet(“Pete Brown”, “pete.png”, “…”), new Tweet(“Jon Galloway”, “jon.png” , “…”), new Tweet(“Joe Stagner”, “joe.png” , “…”), new Tweet(“Jesse Liberty”, “jesse.png” , “…”) };
Data DataTemplate
Pete Brown
Jesse Liberty
Joe Stagner
Jon Galloway
Resulting Presentation
41
New Implicit Data Templates
class Tweet : TimelineItem {…} class DirectMessage : TimelineItem {…} class Notification : TimelineItem {…} … TimelineItem[] items = new TimelineItems[] { new Tweet(“Pete Brown”, “pete.png”, “…”), new Tweet(“Jon Galloway”, “jon.png” , “…”), new DirectMessage(“Joe Stagner”, “joe.png” , “…”), new Notification(“Jesse Liberty”, “jesse.png” , “…”) };
Data Implicit Data Templates
Pete Brown
Jesse Liberty
Joe Stagner
Jon Galloway
Resulting Presentation
Tweet
DirectMessage
Notification
42
Implicit Data Templates
43
Multi-Column Linked Text
Character Spacing
Windows
Click Count
Binding in style setters
Ancestor RelativeSource
Custom Markup Extensions
XAML binding debugging
Implicit data templates
3D
44
3D
Why 3D Microsoft’s continued commitment to enhancing Silverlight and serving the needs of .NET developers
A top request from our customers (ranked 3rd on user voice)
A leap forward in terms of visualizations, performance, and interactivity
Modern devices are 3D ready
Based on XNA
Features to be split between runtime and SDK libraries
45
46
Target Applications
Data visualization*
3D charts and reports
Scatter points
Geographic overlays
Science & astronomy
Education & training
Marketing & advertising
Business*
Manufacturing
Industrial processes
Home design
Realty & virtual tours
Customer support
Medical
Games & simulation * Enterprise focus for Silverlight 5
47
3D
48
Also Coming Post-Beta
P/Invoke
64 bit Support
PivotViewer
XAML Visuals
Trick Play for Video/Audio
Lots of additional 3D features Anti-aliasing, render target textures, more
Vector-based printing
More
49
What Next?
Silverlight 5 to ship by the end of the calendar year
Silverlight 5 beta available now Visit http://silverlight.net
Build awesome stuff!
top related