Silverlight Presentation Mar 2008 Prepared by Alex PWC

Silverlight PresentationSilverlight Presentation

Mar 2008Prepared by AlexMar 2008Prepared by Alex

Silverlight Introduction: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.

Silverlight Introduction: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.

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.

Silverlight Introduction:Silverlight Introduction:

http://www.microsoft.com/silverlighthttp://www.microsoft.com/silverlight

http://www.microsoft.com/silverlight

http://www.microsoft.com/silverlight


http://silvelight.nethttp://silvelight.net

http://silvelight.net/

http://silvelight.net/


http://www.microsoft.com/expression/products/overview.aspx?key=blendhttp://www.microsoft.com/expression/products/overview.aspx?key=blend

http://www.microsoft.com/expression/products/overview.aspx?key=blend




Silverlight Work Flow:Silverlight Work Flow:



Now Silverlight can connect Microsoft SQL and SharePoint use Linq etc.

Reference :

http://www.infoq.com/cn/news/2008/03/SilverLight-SharePoint

http://msdn2.microsoft.com/en-us/sharepoint/cc303301.aspx

http://www.codeplex.com/ssblueprints/Release/ProjectReleases.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:Front-end Tools & Clients:

Microsoft Expression Series :

Design , Blend , Media , Web ;

Microsoft Expression Series :

Design , Blend , Media , Web ;

Front-end Tools & Clients:Front-end Tools & Clients:

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 :Back-end Tools :

Microsoft Visual Studio 2008 :Microsoft Visual Studio 2008 :

Back-end Tools :Back-end Tools :

Comparison:Comparison:

Microsoft RIA VS Adobe RIA:Microsoft RIA VS Adobe RIA:

Adobe & Microsoft RIA Tools Design & Dev-Flow:Adobe & Microsoft RIA Tools Design & Dev-Flow:

Silverlight Installation: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)

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

Software Required:

Frontend : Expression Blend

Version : 2.5 March Preview

Backend : Visual Studio 2008Version : 9.0.21022.8 RTM

Software Required:

Frontend : Expression Blend

Version : 2.5 March Preview

Backend : Visual Studio 2008Version : 9.0.21022.8 RTM


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.


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.aspx?key=blend2dot5

.Net framework 3.5 :

L:\Files\Microsoft\NET Framework\3.5\dotNETfx35.exehttp://www.microsoft.com/downloads/details.aspx?

FamilyID=333325fd-ae52-4e35-b531-508d977d32a6&DisplayLang=en

Install Visual Studio IDE tool (recommend newer version) :Install Visual Studio IDE tool (recommend newer version) :


L:\Files\Microsoft\Visual Studio 2008\en_visual_studio_team_system_2008_team_suite_x86_x64wow_dvd_X14-26461.iso

L:\Files\Microsoft\Visual Studio 2008\en_visual_studio_team_system_2008_team_suite_x86_x64wow_dvd_X14-26461.iso

Other required tools , SDK and Documents :Other required tools , SDK and Documents :


Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 (contains SDK, runtime libraries and

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

Documentation:http://www.microsoft.com/downloads/details.aspx?FamilyID=1840cab5-196c-4264-b55d-562242a72625&DisplayLang=en

L:\Files\Microsoft\SilverLight\Silverlight2.0\SilverlightCHM

http://msdn2.microsoft.com/en-us/vs2008/default.aspx



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.

Create Silverlight Use Blend:Create Silverlight Use Blend:

Blend Samples 1:Blend Samples 1:Silverlight Introduction:Silverlight Introduction:

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:Blend Sample 1:

Use Bitmap graphic in Blend :

The picture you selected will add to your project list :


The picture you selected will add to your project list :

Blend Sample :Blend Sample :


Double click will put it into main page, in design view, resize it:


Double click will put it into main page, in design view, resize it:



Do a copy and use “Properties > Transform > Flip Y axis” :


Do a copy and use “Properties > Transform > Flip Y axis” :


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.


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 :


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 :


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.


Use Bitmap graphic in Blend :And next let’s 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 let’s 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 :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” :


Use Bitmap graphic in Blend :And now “Timeline recording is on”, and let’s 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 let’s 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 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”


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” :


Sample link :

L:\Files\Microsoft\SilverLight\Samples\SilverlightBasicSample


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

Visual Studio Sample :Visual Studio Sample :


New Project > Visual C# > Silverlight Application :


Project Type choose “Web Application Project” and Ok, then open the develop

environment :



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”:


Drag a silverlight control to “Design view” is not available but support in “Xaml view” :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:Adobe CS work with Expression:

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=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=64• http://www.mikeswanson.com/swf2xaml/

• http://www.mikeswanson.com/xamlexport/


Reference : • http://theconverted.ca/

Reference : • http://theconverted.ca/


Sample link : L:\Files\Microsoft\SilverLight\Samples\SilverightTemplate

Template Showcase:Template Showcase:

Silverlight Animate Menu : L:\Files\Microsoft\SilverLight\Samples\Silverlight2Menu\Silverlight2Menu\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\SilverlightDataGridPressureTest_Web\SilverlightDataGridPressureTestTestPage.html

Silverlight 2.0 Internal Controls:

L:\Files\Microsoft\SilverLight\Samples\SilverlightInternalControls\SilverlightDemoHost\SilverlightDemoTestPage.html

Template Showcase:Template Showcase:

Thanks!Thanks!

GTS Applications TeamGTS Applications Team

[email protected]