Welcome to BESUG The Belgian Silverlight User Group

1. Welcome to BESUGThe Belgian Silverlight User Group Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina Blog: www.snowball.be Mail: gill.cleeren@ordina.be

2. Welcome to BESUG! • Silverlight… What is it? • XAML • With a Visual Studio/Blend demo • Silverlight 2 features • Controls demo • Showcasing • Q&A

3. Silverlight… What is it?

4. Microsoft Silverlight is a cross-browser, cross-platform implementation of .NET for building and delivering the next generation of media experiences & rich interactive applications for the Web.

5. 3 Ps of Silverlight Productivity Performance Portability

6. Silverlight givesyouproductivty

7. Silverlight givesyou performance

8. Silverlight givesyouportability

9. Whycan’t we befriends? Designer Developer

10. Again… Whycan’t we befriends? Request Designer Developer Logic User interface Data sources User interface Logic Response

11. Let’sbefriends… XAML XAML Designer Developer

12. A word on the developerexperience • Full CLR • Trimmed-downversion of .NET classlibrary • Full support from Visual Studio 2008 usingtemplates

13. A word on the designer experience • ExpressionBlend is the tool for designers (sometimesdevelopers as well!) • Gradients, blurs, animations… all the stuff designers like! • Automaticallycreates XAML • Project schema is samefrom Visual Studio

14. Someother important talkingpoints • Remember: it’s a client-sidetechnology • Requires plug-in to beinstalled (Lessthan 5MB) • Buildfor web and desktop (WPF) • Richcontrol set, best forLOBs • Seefurther • Supports HD playback

15. Silverlight Roadmap • Silverlight V1 Shipped Q307 • Silverlight V2 Shipped a few weeks back • Silverlight control toolkit shipped last week • More being added constantly • Goal is at least 50 controls • Silverlight for mobile is coming • Same code running on mobile devices

16. XAML • XAML = eXtensible Application Markup Language, pronounced as “Zammel”

17. Fastest-ever XAML course <Grid> <TextBlockFontSize="32" Text="Hello world" /> </Grid> • = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world";

18. Fastest-ever XAML course <Rectangle Canvas.Top=”25” Canvas.Left=”25” Width=”200” Height=”150”> <Rectangle.Fill> <SolidColorBrush Color=”Black” /> </Rectangle.Fill> </Rectangle> <Rectangle Width=”200” Height=”150” > <Rectangle.Fill> <LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”> <LinearGradientBrush.GradientStops> <GradientStop Color=”Red” Offset=”0” /> <GradientStop Color=”Black” Offset=”1” /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

19. Attached Property Syntax <Canvas> <RectangleCanvas.Top="25"/> </Canvas> • Top property only make sense inside a Canvas • When we add new container panels, do we have to add new properties to Rectangle? • Solution: Use attached properties to add flexible, container specific customization

20. Code-behind • Name your controls so you can use it in code • Visual Studio automatically declares field for all x:name elements <Button x:Name=“MyButton”/> public void Page_Loaded(sender, MouseEventArgs e) { MyButton.Content = “Push Me!”; }

21. More code-behind • Event handlers can be wired up declaratively in XAML: • Or explictly within the code-behind file • VB – using the "Handles" keyword • C# -- programmatically within the Page_Loaded event handler <Button x:Name=“MyButton” Content=“Push Me” Click=“MyButton_Click“/> public void MyButton_Click(object sender, RoutedEventArgs e) { // todo: add code }

22. A finalnote… UseXAML wherepossible!Otherwise, you’llget a team of sad designers and developers…

23. Blending it all together: A demo! Using Visual Studio 2008 and Blend 2

24. Silverlight 2 Runtime Features • 2D, Graphics • Audio, Video • Animations • Text, Text Input • Controls • Layout • Styles/Templates • Data Binding • Networking • HTTP/S and Sockets • .NET Support • C# and VB.NET • LINQ • XML APIs • Generics • HTML Integration • Local storage • Crypto APIs (AES) • Threading

25. Controls and the controls toolkit • A control: Re-usable UI elements that encapsulate UI and behavior and enable re-use and composition • Vitalfor building business applications • Notavailable in Silverlight 1.0! • Controls toolkit: Out-of-band release (open-source) of extra controls via www.codeplex.com/silverlight

26. Some Built-in Controls in Silverlight 2 • Core Controls: • Border • Image • MediaElement • MultiScaleImage • ToolTip • ScrollViewer • Dropdown list • Navigation Controls: • HyperlinkButton • Popup • Form Controls: • TextBox • Button • Toggle/Repeat Button • CheckBox • RadioButton • ListBox • Layout Controls: • StackPanel • Grid / GridSplitter • Canvas • Large Controls: • Calendar • DataGrid • Slider • DateTimePicker • Shapes: • Ellipse • Rectangle • Line • TextBlock • Path

27. Sample control usage <Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” /> Button b = new Button(); b.Width = 150; b.Height = 50; b.Content = “Push Me";

28. Controls toolkit • Collection of Silverlight controls, components and utilities made available outside the normal Silverlight release cycle • Community driven: source is available, you can submit bugs and feature requests • First release contains: • Source • Unit tests • Samples • Documentation • 12 new controls for charting, styling… • Theming

29. Controls toolkit example • AutoCompleteBox • NumericUpDown • Viewbox • Expander • ImplicitStyleManager • Charting • TreeView • DockPanel • WrapPanel • Label • HeaderedContentControl • HeaderedItemsControl

30. Theming support Shiny Blue Shiny Red RainierPurple Rainier Orange ExpressionDark ExpressionLight

31. Silverlight 2 controls Standard controls and the control toolkit

32. Silverlight In Action Showcasing

33. Summary • Silverlight is a platform for building RichInteractiveapplications • Strong tooling support, bothfordevelopers and designers withworkflowbetween the 2 • Extendedcontrol toolset thatwill keep ongrowing

34. Resources • General • www.silverlight.net • weblogs.asp.net/scottgu • blogs.msdn.com/tims • silverlight.net/blogs/jesseliberty • Personal • www.snowball.be • gill.cleeren@ordina.be

35. Q&A Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina www.snowball.be gill.cleeren@ordina.be

36. Thank youThe Belgian Silverlight User Group Gill CleerenMicrosoft Regional Director BeneluxMVP ASP.NETSoftware architect Ordina www.snowball.be gill.cleeren@ordina.be

37. Ifyou are interested… • Want to help us? • Want to join? Register @ www.besug.be orsend mail to info@besug.be