1. Silverlight Presentation Mar 2008 Prepared by Alex PWC

2. Silverlight Introduction: Microsoft Silverlight is a cross-browser, cross- platform, and cross-device plug-in for delivering the next generation of.NET based media experiences and rich interactive applications for the Web. Now new version released (Version: 2.0.30226.2 ), you know Silverlight 2.0 bring more wonderful updates to us. Designer can use Blend to design colorful graphics and animations they want. And Developer can use Visual Studio to develop silverlight applications. Microsoft Silverlight is a cross-browser, cross- platform, and cross-device plug-in for delivering the next generation of.NET based media experiences and rich interactive applications for the Web. Now new version released (Version: 2.0.30226.2 ), you know Silverlight 2.0 bring more wonderful updates to us. Designer can use Blend to design colorful graphics and animations they want. And Developer can use Visual Studio to develop silverlight applications. PWC

3. Silverlight Introduction: By using Expression Studio and Visual Studio, designers and developers can collaborate more effectively using the skills they have today to light up the Web of tomorrow. PWC

4. Silverlight Introduction: PWC http://www.microsoft.com/silverlight

5. Silverlight Introduction: PWC http://silvelight.net

6. Silverlight Introduction: PWC http://www.microsoft.com/expression/products/overview.asp x?key=blend http://www.microsoft.com/expression/products/overview.asp x?key=blend

7. PWC Silverlight Work Flow:

8. PWC

9. Silverlight Work Flow: PWC Now Silverlight can connect Microsoft SQL and SharePoint use Linq etc. Reference : http://www.infoq.com/cn/ne ws/2008/03/SilverLight- SharePoint http://msdn2.microsoft.com /en- us/sharepoint/cc303301.as px http://www.codeplex.com/s sblueprints/Release/Projec tReleases.aspx?ReleaseId =10626

10. Adobe CS : Photoshop Illustrator Dreamweaver Fireworks Flash IDE (Runtime) AIR Desktop Adobe CS : Photoshop Illustrator Dreamweaver Fireworks Flash IDE (Runtime) AIR Desktop Front-end Tools & Clients: PWC

11. Microsoft Expression Series : Design, Blend, Media, Web ; Microsoft Expression Series : Design, Blend, Media, Web ; Front-end Tools & Clients: PWC

12. Adobe CS : Flex, Ajax, FMS, LiveCycle (before is FDS), CF, S7 ; Adobe CS : Flex, Ajax, FMS, LiveCycle (before is FDS), CF, S7 ; Back-end Tools : PWC

13. Microsoft Visual Studio 2008 : Back-end Tools : PWC

14. Comparison: Microsoft RIA VS Adobe RIA: PWC Adobe & Microsoft RIA Tools Design & Dev-Flow:

15. Silverlight Installation: User Client Required : A Silverlight Runtime Plug-In :(About 4.5 MB) User Client Required : A Silverlight Runtime Plug-In :(About 4.5 MB) PWC Silverlight 2 Beta 1 runtime for Windows: http://silverlight.dlservice.microsoft.com/download/6/6/3/663404e9-990d-4b74- 873c-c4611aea2133/Silverlight.2.0.exe L:\Files\Microsoft\SilverLight\Silverlight2.0\Silverlight.2.0 Runtime.exe

16. Software Required: Frontend : Expression Blend Version : 2.5 March Preview Backend : Visual Studio 2008 Version : 9.0.21022.8 RTM Software Required: Frontend : Expression Blend Version : 2.5 March Preview Backend : Visual Studio 2008 Version : 9.0.21022.8 RTM Silverlight Installation: PWC

17. Install Blend IDE tool (recommend newer version) : Note :.Net framework 3.5 is must. Install Blend IDE tool (recommend newer version) : Note :.Net framework 3.5 is must. Silverlight Installation: PWC Blend 2.5 March Preview : L:\Files\Microsoft\Expression\Blend 2.5 March Preview\Blend2.5.en.msi http://www.microsoft.com/expression/products/download.a spx?key=blend2dot5.Net framework 3.5 : L:\Files\Microsoft\NET Framework\3.5\dotNETfx35.exe http://www.microsoft.com/downloads/details.aspx?FamilyI D=333325fd-ae52-4e35-b531- 508d977d32a6&DisplayLang=en

18. Install Visual Studio IDE tool (recommend newer version) : Silverlight Installation: PWC L:\Files\Microsoft\Visual Studio 2008\en_visual_studio_team_system_2008_team_s uite_x86_x64wow_dvd_X14-26461.iso

19. Other required tools, SDK and Documents : Silverlight Installation: PWC Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 (contains SDK, runtime libraries andVisual Studio 2008 VS2008 add-on) http://www.microsoft.com/downloads/details.aspx?FamilyID=e0bae58e-9c0b-4090-a1db- f134d9f095fd&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight 1.1 Tools Alpha for Visual Studio 2008 SDK: http://www.microsoft.com/downloads/details.aspx?FamilyID=4e03409a-77f3-413f-b108- 1243c243c4fe&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight 1.1 Tools Alpha for Visual Studio 2008 http://www.microsoft.com/downloads/details.aspx?FamilyID=4e03409a-77f3-413f-b108- 1243c243c4fe&DisplayLang=en Documentation: http://www.microsoft.com/downloads/details.aspx?FamilyID=1840cab5-196c-4264-b55d- 562242a72625&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight2.0\SilverlightCHM http://www.microsoft.com/downloads/details.aspx?FamilyID=1840cab5-196c-4264-b55d- 562242a72625&DisplayLang=en

20. Blend Samples 1: How to use Blend to create a vector graphic and make it animate? Firstly, create new project,be sure choose Visual C# in language list. Blend Samples 1: How to use Blend to create a vector graphic and make it animate? Firstly, create new project,be sure choose Visual C# in language list. PWC Create Silverlight Use Blend:

21. Blend Samples 1: Silverlight Introduction: PWC

22. Use Bitmap graphic in Blend : Make sure your Bitmap save as from PS or FW is *.jpg or *.png format are Blend Bitmap support, right click your project and select Add Existing Item Use Bitmap graphic in Blend : Make sure your Bitmap save as from PS or FW is *.jpg or *.png format are Blend Bitmap support, right click your project and select Add Existing Item Blend Sample 1: PWC

23. Use Bitmap graphic in Blend : The picture you selected will add to your project list : Use Bitmap graphic in Blend : The picture you selected will add to your project list : Blend Sample : PWC

24. Use Bitmap graphic in Blend : Double click will put it into main page, in design view, resize it: Use Bitmap graphic in Blend : Double click will put it into main page, in design view, resize it: Blend Sample : PWC

25. Use Bitmap graphic in Blend : Do a copy and use Properties > Transform > Flip Y axis : Use Bitmap graphic in Blend : Do a copy and use Properties > Transform > Flip Y axis : Blend Sample : PWC

26. Use Bitmap graphic in Blend : Then choose shadow image and select Brush > Opacity Mask > Gradient Brush,set the black brush Alpha to 0%: Then set the Opacity in Appearance to 60% or lower then upper image. Use Bitmap graphic in Blend : Then choose shadow image and select Brush > Opacity Mask > Gradient Brush,set the black brush Alpha to 0%: Then set the Opacity in Appearance to 60% or lower then upper image. Blend Sample : PWC

27. Use Bitmap graphic in Blend : Press F5 test project and you will see your silverlight work : Use Bitmap graphic in Blend : Press F5 test project and you will see your silverlight work : Blend Sample : PWC

28. Use Bitmap graphic in Blend : And we can use left tool bar > TextBlock > TextBlock to add some text : Use Bitmap graphic in Blend : And we can use left tool bar > TextBlock > TextBlock to add some text : Blend Sample : PWC

29. Use Bitmap graphic in Blend : Adjust alignments of Text and If you interest in you can use Split view the XAML codes. Use Bitmap graphic in Blend : Adjust alignments of Text and If you interest in you can use Split view the XAML codes. Blend Sample : PWC

30. Use Bitmap graphic in Blend : And next lets look how to make it move and add some interactive events : Open Window > Interaction > Object and Timeline rename image and Text list. Then we add new storyboard named Bitmap_In for animation. Use Bitmap graphic in Blend : And next lets look how to make it move and add some interactive events : Open Window > Interaction > Object and Timeline rename image and Text list. Then we add new storyboard named Bitmap_In for animation. Blend Sample : PWC

31. Use Bitmap graphic in Blend : Hold Ctrl key and select Bitmap and its shadow, right click Group info > Grid to Make it Group and named BitG : Use Bitmap graphic in Blend : Hold Ctrl key and select Bitmap and its shadow, right click Group info > Grid to Make it Group and named BitG : Blend Sample : PWC

32. Use Bitmap graphic in Blend : And now Timeline recording is on, and lets add motion in timeline just like we did in flash before, preview animation use Play button: Use your imagination create rest object animations. Use Bitmap graphic in Blend : And now Timeline recording is on, and lets add motion in timeline just like we did in flash before, preview animation use Play button: Use your imagination create rest object animations. Blend Sample : PWC

33. Use Bitmap graphic in Blend and work with Visual Studio : Press F5 we can not see animations ? Why ? How can we do next ? Now we should understand design works is over,temporarily. ---And development work start, open Project list,double click Page.xaml.cs : Open edit tool, here recommend use Visual Studio 2008 Use Bitmap graphic in Blend and work with Visual Studio : Press F5 we can not see animations ? Why ? How can we do next ? Now we should understand design works is over,temporarily. ---And development work start, open Project list,double click Page.xaml.cs : Open edit tool, here recommend use Visual Studio 2008 Blend Sample : PWC

34. Use Bitmap graphic in Blend and work with Visual Studio : Default the graphics we created in Blend is a partial class of User Control, now adding some codes, write Bitmap_In and let it motion begin when Page loaded,then right click project to View in Browser : Use Bitmap graphic in Blend and work with Visual Studio : Default the graphics we created in Blend is a partial class of User Control, now adding some codes, write Bitmap_In and let it motion begin when Page loaded,then right click project to View in Browser : Blend Sample : PWC

35. Sample link : L:\Files\Microsoft\SilverLight\Samples\SilverlightBasicSample Blend Sample : PWC

36. Use Visual Studio 2008 create Silvelight with Web Project,First Open VS 2008 : Visual Studio Sample : PWC

37. Visual Studio Sample : PWC New Project > Visual C# > Silverlight Application :

38. Visual Studio Sample : PWC Project Type choose Web Application Project and Ok, then open the develop environment :

39. Visual Studio Sample : PWC

40. Visual Studio Sample : PWC 1 solution with 2 projects, one for UI, another is our standard project, just need drag a silverlight control to the normal aspx page and set the source path to CliendBin\*.xap, xap is a compiled silveright browser plug-in look like Adobe flash *.swf:

41. Visual Studio Sample : PWC Drag a silverlight control to Design view is not available but support in Xaml view : Add event and coding control in C# file. Design view is read only here. R-click xaml file and Open in Expression Blend to Adjust alignments or design.

42. Bitmap and Vector to XAML: 1.Design a picture in Photoshop and Fireworks, save as Flash support image file format (*.psd, *.png, *.jpg, *.gif …),High quality suggest *.psd file. 2.Open Bitmap file in Flash CS3, choose Trace Bitmap, Flash will auto generate vector graphic trace from Bitmap, fill colour, draw path, then adjust the quality, and export to Adobe Illustrator *.ai. (make sure you have been added plug-in L:\Files\Adobe\CS2Xaml\XAMLExport.aip to X:\Program Files\adobe\Adobe Illustrator CS2\Plug-ins\Extensions). 3.In Illustrator, erase unnecessary paths,and save to standard *.ai file, or AI file is written out in PDF compatible format. (Illustrator also is a vector tool,you can direct design graphic in Illustrator for silverlight use) 4.Open Expression Design, import *.ai file and fix some unused borders and paths, then save as XAML for Blend and Visual Studio use. Bitmap and Vector to XAML: 1.Design a picture in Photoshop and Fireworks, save as Flash support image file format (*.psd, *.png, *.jpg, *.gif …),High quality suggest *.psd file. 2.Open Bitmap file in Flash CS3, choose Trace Bitmap, Flash will auto generate vector graphic trace from Bitmap, fill colour, draw path, then adjust the quality, and export to Adobe Illustrator *.ai. (make sure you have been added plug-in L:\Files\Adobe\CS2Xaml\XAMLExport.aip to X:\Program Files\adobe\Adobe Illustrator CS2\Plug-ins\Extensions). 3.In Illustrator, erase unnecessary paths,and save to standard *.ai file, or AI file is written out in PDF compatible format. (Illustrator also is a vector tool,you can direct design graphic in Illustrator for silverlight use) 4.Open Expression Design, import *.ai file and fix some unused borders and paths, then save as XAML for Blend and Visual Studio use. Adobe CS work with Expression: PWC

43. Reminder : Note that not everything will be imported from Illustrator into Design, for example effects or custom brushes might have to be rasterized or lost but for all the normal geometry with color fills, gradients etc, this import method will work great. Reference - http://ux.artu.tv/?p=64http://ux.artu.tv/?p=64 http://www.mikeswanson.com/swf2xaml/ http://www.mikeswanson.com/xamlexport/ Reminder : Note that not everything will be imported from Illustrator into Design, for example effects or custom brushes might have to be rasterized or lost but for all the normal geometry with color fills, gradients etc, this import method will work great. Reference - http://ux.artu.tv/?p=64http://ux.artu.tv/?p=64 http://www.mikeswanson.com/swf2xaml/ http://www.mikeswanson.com/xamlexport/ Adobe CS work with Expression: PWC

44. Reference : http://theconverted.ca/ Reference : http://theconverted.ca/ Adobe CS work with Expression: PWC

45. Sample link : L:\Files\Microsoft\SilverLight\Samples\SilverightTemplate PWC Template Showcase:

46. Silverlight Animate Menu : L:\Files\Microsoft\SilverLight\Samples\Silverlight2Menu\Silverlight2 Menu\bin\Debug\Default.html Silverlight 1.1 VS 2.0(Images Deep Zoom): L:\Files\Microsoft\SilverLight\Samples\Silverlight 1.1 VS 2.0(ImgZoom)\ZoomRef_Web\ZoomRefTestPage.html Silverlight DataGrid : L:\Files\Microsoft\SilverLight\Samples\SilverlightDataGridPressureTest\Silv erlightDataGridPressureTest_Web\SilverlightDataGridPressureTestTestPa ge.html Silverlight 2.0 Internal Controls: L:\Files\Microsoft\SilverLight\Samples\SilverlightInternalControls\Silverlight DemoHost\SilverlightDemoTestPage.html PWC Template Showcase:

47. Thanks! GTS Applications Team PWC Alex.Y.Zhao@cn.pwc.com