silverlight presentation mar 2008 prepared by alex pwc
Post on 26-Mar-2015
224 Views
Preview:
TRANSCRIPT
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
Silverlight Introduction:Silverlight Introduction:
http://silvelight.nethttp://silvelight.net
Silverlight Introduction:Silverlight Introduction:
http://www.microsoft.com/expression/products/overview.aspx?key=blendhttp://www.microsoft.com/expression/products/overview.aspx?key=blend
Silverlight Work Flow:Silverlight Work Flow:
Silverlight Work Flow:Silverlight Work Flow:
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
Silverlight Installation:Silverlight Installation:
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:Silverlight Installation:
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) :
Silverlight Installation:Silverlight Installation:
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 :
Silverlight Installation:Silverlight Installation:
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
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 :
Use Bitmap graphic in Blend :
The picture you selected will add to your project list :
Blend Sample :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
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.
Blend Sample :Blend Sample :
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 :Blend Sample :
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.
Blend Sample :Blend Sample :
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 :Blend Sample :
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 :Blend Sample :
Sample link :
L:\Files\Microsoft\SilverLight\Samples\SilverlightBasicSample
Blend Sample :Blend Sample :
Use Visual Studio 2008 create Silvelight with Web Project ,First Open VS 2008 :
Visual Studio Sample :Visual Studio Sample :
Visual Studio Sample :Visual Studio Sample :
New Project > Visual C# > Silverlight Application :
Visual Studio Sample :Visual Studio Sample :
Project Type choose “Web Application Project” and Ok, then open the develop
environment :
Visual Studio Sample :Visual Studio Sample :
Visual Studio Sample :Visual Studio Sample :
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 :Visual Studio Sample :
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/
Adobe CS work with Expression:Adobe CS work with Expression:
Reference : • http://theconverted.ca/
Reference : • http://theconverted.ca/
Adobe CS work with Expression:Adobe CS work with Expression:
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
Alex.Y.Zhao@cn.pwc.com
top related