Silverlight Presentation Mar 2008 Prepared by Alex PWC

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: ), 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: ), 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

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

Silverlight Introduction: PWC

Silverlight Introduction: PWC

Silverlight Introduction: PWC x?key=blend x?key=blend

PWC Silverlight Work Flow:

PWC

Silverlight Work Flow: PWC Now Silverlight can connect Microsoft SQL and SharePoint use Linq etc. Reference : ws/2008/03/SilverLight- SharePoint /en- us/sharepoint/cc as px sblueprints/Release/Projec tReleases.aspx?ReleaseId =10626

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

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

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

Microsoft Visual Studio 2008 : Back-end Tools : PWC

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

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: 873c-c4611aea2133/Silverlight.2.0.exe L:\Files\Microsoft\SilverLight\Silverlight2.0\Silverlight.2.0 Runtime.exe

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

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 spx?key=blend2dot5.Net framework 3.5 : L:\Files\Microsoft\NET Framework\3.5\dotNETfx35.exe D=333325fd-ae52-4e35-b d977d32a6&DisplayLang=en

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_X iso

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) f134d9f095fd&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight 1.1 Tools Alpha for Visual Studio 2008 SDK: c243c4fe&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight 1.1 Tools Alpha for Visual Studio c243c4fe&DisplayLang=en Documentation: a72625&DisplayLang=en L:\Files\Microsoft\SilverLight\Silverlight2.0\SilverlightCHM a72625&DisplayLang=en

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:

Blend Samples 1: Silverlight Introduction: PWC

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visual Studio Sample : PWC

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:

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.

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

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 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 Adobe CS work with Expression: PWC

Reference : Reference : Adobe CS work with Expression: PWC

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

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:

Thanks! GTS Applications Team PWC