1. Welcome! AppDev’s Silverlight 4 for Visual Studio 2010 Using Visual Basic Instructor: Bill Hatfield Copyright 2010, AppDev Products, LLC. All Rights Reserved.

2. Introducing Silverlight 4! Copyright 2010, AppDev Products, LLC. All Rights Reserved.

3. Objectives Introduce Silverlight Investigate XAML and the XAML designer in Visual Studio 2010 Learn about XAML controls, properties, and events Work with container controls, dependency properties, and the Grid control Copyright 2010, AppDev Products, LLC. All Rights Reserved.

4. Agenda Introducing Silverlight Introducing XAML and the Silverlight Designer Investigating XAML Introducing Content and Grid Controls Copyright 2010, AppDev Products, LLC. All Rights Reserved.

5. Introducing Silverlight Cross-browser, cross-platform plug-in Create rich interactive applications (RIAs) for the Web Originally seen as a competitor to Flash Lightweight runtime (under 5 MB) Based on XAML Quick demonstration: http://www.microsoft.com/silverlight Copyright 2010, AppDev Products, LLC. All Rights Reserved.

6. Copyright 2010, AppDev Products, LLC. All Rights Reserved. Why Silverlight? Delivers the best of both worlds: Leverages .NET Framework Creates rich Internet experiences Provides class library support for rapid development

7. Why Silverlight? Beyond HTML Keeps users engaged Combines animation, video, vector graphics, perspective 3D, effects, features like Deep Zoom Fastest Web Experiences Put any CPU to work Multi-threading support Tap into 100+ Controls Silverlight allows you to skin controls using mark-up Easier to have controls fit your task or brand Copyright 2010, AppDev Products, LLC. All Rights Reserved.

8. Why Silverlight? Highest quality media Up to 1080p true HD-quality video Uses H.264 (MP4) or WMV with Smooth Streaming Mac, Windows, and Linux Works with every major operating system All major browsers Go out of Browser Can install applications on desktop Run apps seamlessly without connectivity Copyright 2010, AppDev Products, LLC. All Rights Reserved.

9. Evolution of Silverlight Silverlight 1 Support for scripting languages only Interesting layout capabilities Great for streaming videos Silverlight 2 Support for .NET Framework and CLR Data binding Isolated storage Support for calling services Cross-domain network access Copyright 2010, AppDev Products, LLC. All Rights Reserved.

10. Silverlight 3 Navigation Framework Build apps with multiple pages Navigation via links More controls and layout capabilities Modal windows Element-to-element binding Data validation Ability to run outside the browser Copyright 2010, AppDev Products, LLC. All Rights Reserved.

11. Silverlight 4 Printing support Several new controls, including DataGrid Enhanced data binding, including drag and drop “Toast” notification windows Offline DRM For trusted applications COM Interop Reading/writing user’s special folders New interface for requesting application privileges Copyright 2010, AppDev Products, LLC. All Rights Reserved.

12. Silverlight Development Tools Visual Studio 2008 (Silverlight 3) Download the Silverlight 3 Toolkit No visual designer Visual Studio 2010 (Silverlight 3 or 4) Build Silverlight applications out of the box Full tooling Download Silverlight 4 Expression Blend 3 (and now 4!) Powerful tool for building layout, animation, effects Bit of a learning curve (made for designers) Not free, but included in MSDN subscriptions Copyright 2010, AppDev Products, LLC. All Rights Reserved.

13. Getting Started Verify that Silverlight has been installed Navigate to: http://www.microsoft.com/silverlight/get-started/install/default.aspx Can also use Control Panel to verify version Copyright 2010, AppDev Products, LLC. All Rights Reserved.

14. Getting Started Build Silverlight solutions in Visual Studio Suggestion: Consider using Expression Blend for more complex styling, templating, animations, and so on Three types of Silverlight projects Silverlight Application template creates simple application Silverlight Navigation Application template provides a jumpstart for more sophisticated multi-page apps Silverlight Library creates DLL Makes it easier to partition logic and features Copyright 2010, AppDev Products, LLC. All Rights Reserved.

15. WPF vs. Silverlight Microsoft provides two technologies for client-side applications: WPF and Silverlight Both allow you to create client applications Both use XAML to design the interface WPF has entire .NET Framework behind it Silverlight works with a small subset of Framework Copyright 2010, AppDev Products, LLC. All Rights Reserved.

16. WPF vs. Silverlight WPF: Ships as part of .NET Framework (3.0 and later) Runs only on Windows (XP or better) Runs as a stand-alone Windows app or as a Web Browser app (XBAP) XBAPs require the .NET Framework on the client (where the browser is running) Browser compatibility: IE only in .NET 3.0; IE and Firefox in .NET 3.5 and later Provides richest functionality Full support for 3D graphics Copyright 2010, AppDev Products, LLC. All Rights Reserved.

17. WPF vs. Silverlight Silverlight: Ships independently; isn’t part of .NET Framework Is typically hosted in a Web browser Broad browser support including IE, Firefox, Safari Cross-platform - Runs on Windows, Mac, Linux clients Provides a subset of WPF’s features And only small subset of .NET Framework Which do you use? Depends on target audience, technological needs, preferred deployment Copyright 2010, AppDev Products, LLC. All Rights Reserved.

18. An Inconvenient Truth (or Two) Far more difficult to create a decent-looking application in XAML Because the bar is so much lower in other environments Developers creating applications in XAML generally create ugly applications Good XAML applications require graphic designers On the other hand… Far easier to create great-looking application Because Windows and Web forms are so limited Also check out Microsoft Expression Studio Copyright 2010, AppDev Products, LLC. All Rights Reserved.

19. Silverlight and XAML Silverlight and XAML: The same thing? XAML is XML-based grammar that can be used to declaratively define Silverlight applications Can also use Silverlight libraries and code the interface XAML <-> Silverlight libraries are not a one-to-one mapping Some names in used in creating a Silverlight interface in XAML don’t match exactly with the corresponding library class/collection/property names Copyright 2010, AppDev Products, LLC. All Rights Reserved.

20. Agenda Introducing Silverlight Introducing XAML and the Silverlight Designer Investigating XAML Introducing Content and Grid Controls Copyright 2010, AppDev Products, LLC. All Rights Reserved.

21. Introducing XAML Build Silverlight solutions in Visual Studio Use Expression Blend for sophisticated styling, templating, animations, and more Silverlight projects Silverlight Application template creates simple application Outputs XAP file, downloaded by the Silverlight runtime Silverlight Navigation Application template provides a jumpstart for multi-page apps Silverlight Library creates DLL Makes it easier to partition logic and features Copyright 2010, AppDev Products, LLC. All Rights Reserved.

22. Additional Silverlight 4 Projects Silverlight 4 adds more project types: Silverlight Business Application Includes login and membership WCF RIA Services Class Library Focus on Silverlight Application template in this course Visual Studio 2010 doesn’t include all Silverlight controls Download Silverlight Toolkit to get the rest http://www.codeplex.com/Silverlight Copyright 2010, AppDev Products, LLC. All Rights Reserved.

23. Your First Silverlight Application Pages 1-8 to 1-10 Copyright 2010, AppDev Products, LLC. All Rights Reserved.

24. Agenda Introducing Silverlight Introducing XAML and the Silverlight Designer Investigating XAML Introducing Content and Grid Controls Copyright 2010, AppDev Products, LLC. All Rights Reserved.

25. Investigating XAML XAML is simple But provides several different ways to set property values Simple Properties/Type Converters Complex Properties Markup Extensions Attached Properties Copyright 2010, AppDev Products, LLC. All Rights Reserved.

26. Simple Properties/Type Converters Dragging Button control onto design surface creates several properties Markup counts on Button class providing Content, Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width properties Some properties are simple strings Content and Name properties Others are more complex Copyright 2010, AppDev Products, LLC. All Rights Reserved.

27. Type Converters Height and Width properties? Properties are numeric Markup supplies values as strings Along the line, some code must convert Works because Integer class provides built-in conversion from string Other properties even more complex: HorizontalAlignment and VerticalAlignment? Need to convert from string (Bottom, Center, Stretch, or Top; Center, Left, Right, Stretch) to enumerated values Copyright 2010, AppDev Products, LLC. All Rights Reserved.

28. Type Converters Margin adds own set of issues Can supply a single value (all four sides) Can supply two values (left/right and top/bottom) Can supply four values (left, top, right, bottom) Margin property is a Thickness structure Contains four integers Setting property calls constructor for Thickness structure Requires converter to read the comma-delimited string and convert to a call to the constructor Copyright 2010, AppDev Products, LLC. All Rights Reserved.

29. Complex Properties Type converters work well Some properties can’t be represented by single value Want to specify background of a Grid control as a linear gradient? Can’t represent the behavior with a single value Properties of elements that are themselves objects with properties require special care Represent as nested elements Named Parent.Property (Grid.Background) Copyright 2010, AppDev Products, LLC. All Rights Reserved.

30. DEMO Page 1-22: Complex Properties, Try It Out! Copyright 2010, AppDev Products, LLC. All Rights Reserved.

31. Markup Extensions Usually, standard XAML markup provides functionality you need Sometimes not possible to set property value at design time Some properties must be set dynamically, at runtime Need to use markup extension Allows you to set property in non-standard way Can specify markup extension as nested element, or as attribute As attribute, always surrounded with { } Indicating value supplied at runtime Copyright 2010, AppDev Products, LLC. All Rights Reserved.

32. Markup Extensions Declarative binding requires markup extension: Can also express using child element: Copyright 2010, AppDev Products, LLC. All Rights Reserved. Property= "{Binding ElementName=ObjectName, Path="PropertyName}" <Object.Property> <Binding ElementName="ObjectName", Path=PropertyName"/> </Object.Property>

33. DEMO Markup extension/binding Copyright 2010, AppDev Products, LLC. All Rights Reserved.

34. Attached Properties Nest a control within a Grid Specify its row and column with Grid.Row and Grid.Column properties Where did these come from? Child control doesn't supply! Grid adds these to all its child controls In other words, they're attached properties Properties appear as properties of the class But they're defined in a different class (Grid, in this case) Copyright 2010, AppDev Products, LLC. All Rights Reserved.

35. Attached Properties Specific syntax: DefiningType.PropertyName Grid.Row Aren't actually properties Converted to method calls by compiler Defining class must provide GetPropertyName and SetPropertyName methods Grid.GetRow and Grid.SetRow Technique hides what's really going on Calling method in defining class? Does Grid keep track of all its children's coordinates? Copyright 2010, AppDev Products, LLC. All Rights Reserved.

36. Attached Properties Of course, Grid doesn't keep track of all its children's coordinates Child controls all inherit from DependencyObject Defined to maintain an unlimited number of dependency properties Parent (Grid) maintains a single instance of a field for each property Grid.RowProperty for Grid.Row, for example Child maintains its own value for that property Copyright 2010, AppDev Products, LLC. All Rights Reserved.

37. Attached Properties Calling parent control's GetPropertyName and SetPropertyNamemethods equivalent to calling GetValue and SetValue methods of child object To retrieve Grid.Row property of TextBox named DemoTextBox, use expression like: Copyright 2010, AppDev Products, LLC. All Rights Reserved. DemoTextBox.GetValue(Grid.RowProperty)

38. Agenda Introducing Silverlight Introducing XAML and the Silverlight Designer Investigating XAML Introducing Content and Grid Controls Copyright 2010, AppDev Products, LLC. All Rights Reserved.

39. Content and Grid Controls Many controls inherit from ContentControl (including Button) and can contain other controls Button with image and text? No problem! ListBox containing a bunch of TextBox controls? No problem! Copyright 2010, AppDev Products, LLC. All Rights Reserved.

40. Working with Layout Controls Several controls useful for laying out other controls DockPanel Allocates an edge for each child control Useful for defining rough layout StackPanel Stacks children horizontally or vertically Useful internal to other controls (Button, for example) Copyright 2010, AppDev Products, LLC. All Rights Reserved.

41. Working with Layout Controls Grid Arranges children in a grid No need for fixed sizes or positions Rescales when resized Canvas No layout logic Manually control each aspect of layout Copyright 2010, AppDev Products, LLC. All Rights Reserved.

42. List Box as Container DEMO Copyright 2010, AppDev Products, LLC. All Rights Reserved.

43. Working with the Grid Control DEMO Copyright 2010, AppDev Products, LLC. All Rights Reserved.

44. Dependency Properties In standard .NET code, property is defined using two procedures “setter” and “getter” More complex mechanism here Workflow uses same mechanism Dependency properties allow for: Styling Automatic data binding Animation Change notification and more… Copyright 2010, AppDev Products, LLC. All Rights Reserved.

45. DependencyObject Class DependencyProperty class acts as base for the properties DependencyObject is base for classes that can consume and expose dependency properties XAML classes expose far more properties than the corresponding prior classes Need some internal plumbing to handle Copyright 2010, AppDev Products, LLC. All Rights Reserved.

46. Investigating DependencyProperty .NET maintains internal dictionary of classes and the properties they expose DependencyProperty instance defined as a static/shared member of a class In constructor, code registers property, its type, and hosting class with .NET Can optionally create standard .NET property that wraps up the dependency property Copyright 2010, AppDev Products, LLC. All Rights Reserved.

47. Declaring the Property Copyright 2010, AppDev Products, LLC. All Rights Reserved. VB: Public Shared IsAvailableProperty As DependencyProperty C#: public static DependencyProperty IsAvailableProperty;

48. In Constructor Copyright 2010, AppDev Products, LLC. All Rights Reserved. [Visual Basic] MyClass.IsAvailableProperty = _ DependencyProperty.Register("IsAvailable", _ GetType(Boolean), GetType(MyClass)) [C#] MyClass.IsAvailableProperty = DependencyProperty.Register("IsAvailable", typeof(bool), typeof(MyClass))

49. Property Wrapper Copyright 2010, AppDev Products, LLC. All Rights Reserved. [Visual Basic] Public Property IsAvailable() As Boolean Get Return _ CType(GetValue(MyClass.IsAvailableProperty), Boolean) End Get Set(ByVal value As Boolean) SetValue(MyClass.IsAvailableProperty, value) End SetEnd Property

50. Property Wrapper Copyright 2010, AppDev Products, LLC. All Rights Reserved. [C#] public bool IsAvailable{ get { return (bool) GetValue(MyClass.IsAvailableProperty); } set { SetValue(MyClass.IsAvailableProperty, value) }}

51. Using Attached Properties Button control doesn’t expose Grid.Column or Grid.Row Yet these attributes exist in the XAML markup These are attached properties Properties added by container, when hosted Retrieve and set using DependencyObject.GetValue and DependencyObject.SetValue Copyright 2010, AppDev Products, LLC. All Rights Reserved.

52. Working with Attached Properties Copyright 2010, AppDev Products, LLC. All Rights Reserved. [Visual Basic] Dim row As Integer = CType(DemoButton.GetValue(Grid.RowProperty), Integer) DemoButton.SetValue(Grid.RowProperty, row + 1) [C#] int row = (int)DemoButton.GetValue(Grid.RowProperty); DemoButton.SetValue(Grid.RowProperty, row + 1);

53. Interacting with the Grid Add code to move button to new row Copyright 2010, AppDev Products, LLC. All Rights Reserved.

54. Running Out of Browser Silverlight applications distributed through browser But applications can be run locally: no connection! Even when run locally Silverlight apps use only small subset of .NET Framework Apps are still sandboxed Can’t do anything destructive unless granted permission explicitly No connectivity required Simple to install and uninstall Copyright 2010, AppDev Products, LLC. All Rights Reserved.

55. Running Out of Browser DEMO Copyright 2010, AppDev Products, LLC. All Rights Reserved.