神魂顛倒 Web 前端: silverlight demo

顯示具有 silverlight demo 標籤的文章。顯示所有文章

MSN 10週年網站--使用Silverlight

網址：http://10.msn.com.tw/

故宮清明上河圖的新世代 - Silverlight 2 Beta 搶先體驗

三月初，我們帶著 Taiwan National Palace Museum 故宮博物院的寶貴典藏 - 清院本「清明上河圖」遠征 Las Vegas，讓老外認識中華文化之美。當然不會是帶著原稿，而是以微軟最新 RIA 技術 Silverlight 2 Beta 所製作的網路版本，讓老外大開眼界。如今正式的英文版本已經上線，歡迎大家立即體驗 Deep Zoom 技術無段放大的快感，讓您超深入細細品玩這幅曠世奇珍的真實面貌！只要以滑鼠滾輪，就能夠改變圖面顯示比例，按住滑鼠左鍵並移動，就可以拖曳圖面位置。

上方還有快速故事導覽 ICON，直接深入精彩處直接觀賞。點選古玩攤，還會有小遊戲出現喔！

以下是相關的網址：故宮清院本「清明上河圖」Silverlight 2 搶先體驗（英文版）http://learnet.npm.gov.tw/silverlight/

(安裝注意事項) (周旺暾提供)

沒有裝 Silverlight 2 Beta1 的使用者，第一次進去會看到要求安裝 Silverlight 的畫面，安裝過程中會出現 Silverlight 2 Beta1 的安裝畫面。如果使用者電腦沒有 Silverlight 舊的版本，安裝完成之後，就能夠正常執行。但是若使用者電腦裡有任何舊的版本 (1.0 或 1.1 Alpha)，安裝完成之後，會出現錯誤訊息(如圖2)。這時必須要關閉瀏覽器視窗再重新開啟，就能看到 Silverlight 2 的網站。

故宮資訊中心林國平主任（左圖背對鏡頭簡報者），向微軟資深副總裁 Scott Guthrie（左圖最左側者）、Silverlight General Manager、亞洲區負責推動 UX 市場的 General Manager Forest Key 簡報故宮對於應用 Silverlight 技術在數位典藏網路化的積極想法。右圖自左而右：Scott Guthrie、Peter Hu、林國平主任

由原製作團隊 e-Crusade 所撰寫的技術白皮書，包含部分原始碼。

http://www.e-crusade.com/silverlight/npm/NPMWhitePaper.htm

由同樣 Silverlight 2 技術所製作的美國 Hard Rock 的上線網站，也是運用了 Deep Zoom 特效，非常精彩，包含他們所典藏的著名熱門搖滾歌星的紀念物。

http://memorabilia.hardrock.com/

本文章來自於神魂顛倒論壇 http://bbs.flash2u.com.tw/

原文網址:http://bbs.flash2u.com.tw/dispbbs_220_87635_1_1.html

用 ListBox 和 DataBinding 顯示列表資料

用 ListBox 和 DataBinding 顯示列表資料 (木野狐譯)

作者: Scott Guthrie

出處: http://blog.joycode.com/scottgu/

【原文地址】Silverlight Tutorial Part 5: Using the ListBox and DataBinding to Display List Data

【原文發表日期】 Friday, February 22, 2008 5:51 AM

這是8個系列教學的第5部分，這個系列示範如何使用 Silverlight 2 的 Beta1 版本來建立一個簡單的 Digg 客戶端應用。這些教學請依次閱讀，將有助於您理解 Silverlight 的一些核心撰寫程式概念。

用 ListBox 和 DataBinding 顯示我們的 Digg 故事

前面我們使用了 DataGrid 組件來顯示我們的 Digg 故事。當我們想用多列的格式來顯示內容時，它很適合。然而對我們的 Digg 應用程式而言，也許我們想稍微改變一下頁面的顯示方式，讓它看起來不太像網格，而更像一個列表。好消息是，這很容易實現 - 並且我們不需要改變任何程式程式碼。

首先我們將 DataGrid 組件替換為 <ListBox> 組件。我們保持原有的組件名稱 ("StoriesList")：

重新執行一下程式，搜尋故事，ListBox 會顯示搜尋結果如下：

你可能覺得奇怪 - 為什麼每個紀錄都變成了 "DiggSample.DiggStory"? 這是因為我們把 DiggStory 對像綁定給了 ListBox（而綁定的預設行為會叫用這些對象的 ToString() 方法）。如果我們想改用每個 DiggStory 對象的 Title 屬性來顯示紀錄，可以設定 ListBox 的 DisplayMemberPath 屬性：

這樣做之後的效果如下：

如果要每次顯示不止一個值，或者定制每個紀錄的佈局，我們可以覆蓋 ListBox 組件的 ItemTemplate，並提供一個自訂的 DataTemplate. 然後在這個 DataTemplate 內，定制每個 DiggStory 對像如何顯示。

例如，我們可以用 DataTemplate 同時顯示 DiggStory 的 Title 和 NumDiggs 值，如下所示：

在 DataTemplate 中，我們可以綁定 DiggStory 對像中我們所需的任何公共屬性。注意上面我們是如何用 {Binding 屬性名} 語法，配合兩個 TextBlock 組件來完成這一點的。

設定了上述 DataTemplate 後，我們的 ListBox 會顯示如下：

讓我們再進一步，修改 DataTemplate 的定義如下。其中使用了兩個 StackPanel - 一個用於水平地堆疊行，另一個用來垂直地堆疊文字塊(TextBlock)。

上述 DataTemplate 會使我們的 ListBox 用如下方式顯示紀錄：

我們在 App.xaml 檔案中定義如下的 Style 規則（注意如何使用 LinearGradientBrush 來獲得 DiggPanel 上的好看的漸變背景效果）：

關於 ListBox 有一點值得注意 - 即使我們定制了其紀錄的顯示方式，它仍然會提供懸浮以及選中狀態的語義，不管你使用的是滑鼠游標還是鍵盤（上/下方向鍵，Home/End，等）：

ListBox 還支援完整的流式改變大小的功能 - 並在需要的時候提供內容的自動捲動功能（注意當視窗變小時，水平捲動條是如何出現的）：

下一步

我們現在已經把資料的顯示切換成了基於列表的方式，並清理了其內容列表。

（翻譯：木野狐）

本文章來自於神魂顛倒論壇 http://bbs.flash2u.com.tw

原文網址:http://bbs.flash2u.com.tw/dispbbs_220_83693_2.html

看一段Silverlight的影片吧

Silverlight 模擬的 Surface 效果

在 40 分鐘內演示 31 項微軟技術的視訊中，看到了這個透過 Silverlight 模擬出來的 Surface 效果：手指拉伸縮放圖片。

存取以下地址即可體驗，語言為法語，體驗之前必須安裝 Silverlight：
http://galilee.microsoft.fr/TechDays2008/SL/techdays-2008-silverlight.aspx

微軟的 Silverlight 版下載中心

微軟推出的 Silverlight 版下載中心。Long Zheng 在其部落格上發佈了一篇較為詳細的關於此網站的介紹，而且還上傳了體驗視訊(via ActiveWin)。

存取地址：http://preview.microsoft.com/downloads/HomePage.aspx
來源：Microsoft.com Downloads Beta in Silverlight

Silverlight案例：MSN 美國 08 年選舉站

Sean Alexander 在他的部落格中提到，MSN 美國 08 選舉站使用了Silverlight技術，並且由 Live Search 提供搜尋支援。這是自 Tafiti 之後，微軟又一網站採用了 Silverlight 技術。

該網站允許使用者檢視每位候選人的訊息、新聞以及針對不同問題（如：環境問題等）所採取的行動，也可以將任意兩位候選人進行對比。就技術方面來看，微軟正在嘗試在不同方面應用 Silverlight ，帶給大家更出色的瀏覽體驗。

存取：MSN Election Guide 2008

Tafiti 和 Windows Live 快速應用 Quick Apps

Windows Live 平台: Mix08 前新新增了兩個 WL Quick Apps 。其中之一就是這個 Tafiti Search visualization

Tafiti 是微軟的一個實驗性網站，Tafiti 使用了 Silverlight 1.0 RC 和 AJAX , 並整合了以下微軟的服務:

Live Search for Web, Books, Blogs, News, and Images
Live ID
Live Spaces

當你登入 Live ID 之後，同時也會登入你的。你可以直接通過 Tafiti Search Visualization 網站發送即時消息，而且還可以將好友新增為管理者，共同管理該 Stack。

存取：http://tafiti.mslivelabs.com/。

Angus 通過視訊解釋了如何來製作這個，以及更多訊息: 觀看視訊，並嘗試。

LiveSide: Tafiti and Windows Live Quick Apps

微軟也推出了 Tafiti 的原始程式碼，且Colin 發佈了一篇 Tafiti 快速應用的細節。我們推薦大家閱讀該文章，尤其是對還未開發過任何快速應用的開發者，這篇文章是很有價值。

可以在 http://codeplex.com/wlquickapps 和 Windows Live Platform Quick Application 獲得程式碼，並且有一份詳細的開發指導，以及視訊。

新版 AOL 郵件將完全採用 Silverlight 技術

新版 AOL 郵件將完全採用 Silverlight 技術

有消息表明，AOL 的新版郵件正在開發中，完全採用微軟 Silverlight 技術。

上周，在 Mix 08 上，展出了這個產品的模型。在一兩個月後 Silverlight 2.0 告別 Beta 階段的時候，AOL 的新版郵件將進入 Alpha 測試。目前，並不能看出新版和目前的郵件有太多不同。

主要的變化是新的主題技術和速度的提升。

使用者在打開和移動信件時能明顯感到速度的差異。

在皮膚方面，AOL 上周展示了 Bungie 的《光環戰爭》遊戲的主題，更改收件箱的皮膚只需要幾秒。AOL 的電郵副總裁 Ben-Yoseph 表示，他的團隊正在工作使每個使用者都能自己設計主題，顏色和風格完全自主……且不論是否華而不實，Silverlight 版的 AOL Mail 的確帶來了一些 Gmail 沒有的功能。個性和定制能力使 AOL 的網路應用更加人性化。

Silverlight 2 , Deep Zoom 及 PhotoZoom - 準備建立你自己的可縮放圖片收藏

Steve Clayton 發佈了一篇關於 Silverlight 2 演示的文章，其中有提到一項叫作 Deep Zoom 的技術，現部署在 http://memorabilia.hardrock.com/。

Deep Zoom 允許使用者流暢無縫地縮放圖片，而且該技術第一次是在 Mix 07 的時候由 Ray Ozzie 演示的。另外，Mix Online 網站有一個視訊，大家可以去看一下。

現在微軟推出了 Silverlight 2，那些縮放圖片的技術已經向開發者開放了，因此可以將 Photosynth / Seadragon 技術加入開發者們的網路應用中。

對於那些對此感興趣的人來說，一定記得我們在之前已經介紹了一個 Live 實驗室的項目：

Windows Live PhotoZoom Alpha。以下是我們之前的介紹：

"Though not yet released, at a basic level PhotoZoom will allow users to add
photos via an upload tool or import from an RSS/Atom feed. These can then be
viewed as thumbnails or at their full resolution. Once processing by the server
is complete, the zooming functionality is enabled."

是的，微軟正在開發一款服務，允許使用者在他們的相冊中使用這項縮放技術。正如我們去年介紹的那樣，這項縮放技術和 Silverlight 一起發佈了。

LiveSide: Silverlight 2 and Deep Zoom - Get ready to build your own photozooming collections

Silverlight 2 和 DeepZoom - 微軟推出 PhotoZoom

儘管現在有 Deep Zoom 桌面版本軟體，微軟同樣也推出了其線上服務：Windows Live PhotoZoom。

PhotoZoom 允許使用者建立相冊，可以從本地上傳照片，也可以通過 RSS/Atom 導入。最複雜的處理部分都是在微軟伺服器上完成的，然後這些照片就支援 Deep Zoom 特性了。
以下是3個範例:

10MP SLR
5MP Canon Ixus 55
Scoble』s Flickr Feed

目前，每張照片處理時間大概需要1分鐘，客戶端程式也正在開發當中（會不會整合在 Windows Live Photo Gallery 中呢？）。這裡需要注意兩點：

1，這是一個實驗性的項目，因此不會得到像正式版服務那樣的支援。

2，作為 Windows Live 孵化平台的一部分，它可能沒有你想像中那麼穩定。

Windows Live PhotoZoom

Live@edu 網站更新，並採用 Silverlight

Live@edu 網站更新，並採用 Silverlight

Live@edu 是微軟的校園 Windows Live 計劃，輔助學生更好的使用 Windows Live 服務產品（桌面，線上，移動）。主要服務產品有 Hotmail, Messenger, SkyDrive, Spaces, Office Live Workspaces, Writer, Mobile。最近其網站更新了，並採用了 Silverlight 技術。

存取：http://my.liveatedu.com/

微軟Silverlight在棒球大聯盟亮相

微軟的Silverlight迎來了一個大客戶，美國棒球職業大聯盟的網站開始使用Silverlight 1.0。滿足使用者以互動方式，通過瀏覽器觀看比賽視訊的要求。

棒球職業大聯盟通過這項技術來回放棒球比賽中的精彩場面，通過Silverlight來整合新聞與其他內容。例如，一個關於紐約洋基隊三壘手Alex Rodriguez 打出他的第五百個本壘打的新聞，透過Silverlight播放器，使用者可以點選觀看重放這個精彩場面。並且可以以電子郵件的方式將視訊連結推薦給給朋友。

棒球職業大聯盟網站發言人Matthew Gould說：「Silverlight輔助棒球職業大聯盟的網站提升到一個多媒體網站的水平。」重要的是，該網站計劃借助Silverlight推出他們的MLB.TV線上比賽直播。一個BETA版本的播放器將會在一個月後放出，Gould說。微軟在四月發佈了Silverlight，競爭對手直指Adobe公司的FLASH技術--通過在網站中以插入的方式提供大量視訊播放和交互式媒體連結的技術。

同FLASH一樣，使用者也需要先下載Silverlight播放器才能播放視訊內容。現在Silverlight的版本號還是1.0，只有1.4兆大小，下載並安裝只需要一分半鐘。

Gould說，在使用Silverlight之前，棒球大聯盟的網站還是靠Windows Media Player和FLASH來播放視訊內容。

Silverlight簡介

Silverlight是一個跨瀏覽器的、跨平台的外掛，為網路帶來下一代基於.NET的媒體體驗和豐富的交互式應用程式。Silverlight提供靈活的撰寫程式模型，支援AJAX, VB, C#, Python, Ruby等語言，並集成到現有的網路應用程式中。Silverlight對執行在Mac或Windows上的主流瀏覽器提供高質量視訊訊息的快速、低成本的傳遞。

Silverlight 在 NBA 網站上的應用

http://www.nba.com/

一進去左上角那塊，點選進去會就會有全螢幕的呈現效果

很酷的ASP.NET 3.5 與 Silverlight DEMO範例

原始碼：

http://smarx.com/sample/MIX07VideosCode.zip

影片：

http://channel9.msdn.com/Screencasts/330958_MIX07VideosPlayer.wmv

40個以上的Silverlight元件免費使用

包括

Control, ContainerControl, ScrollableControl, Panel
Button, CheckBox, RadioButton, GroupBox, Label
TextBox, NumericUpDown
ImageBox, ImageList
ScrollBar, HScrollBar, VScrollBar
Form, MessageBox, Cursor
ListBox, CheckedListBox
ComboBox
TreeView
MonthCalendar
TabControl, Splitter
ToolTip, ProgressBar, Timer
ToolStrip, StatusStrip, MenuStrip, ToolStripButton, ToolStripComboBox, ToolStripDropDown, ToolStripLabel, ToolStripProgressBar, ToolStripSeparator, ToolStripSplitButton, ToolStripTextBox
XamlCanvas (Silverlight specific)

Flash & Silverlight Demo 大比拚

近日，Silverlight已經開始支援FIREFOX了，所以順便看了一下Silverlight的DEMO總體來說感覺就是在模仿FLASH已經推出的許多效果。不過也不能說微軟沒有創意畢竟Silverlight出的比FLASH要晚那麼久。不過Silverlight跟FLEX比較也覺得雖然其效果基本上實現了，但是作為動畫的完整度來說很差，這就是細節了。無論是ADOBE，還是原先的MACROMEDIA都是對動畫流暢度等瞭如指掌的。微軟想拿下設計大餐並非易事。下面把兩者同一類型的DEMO發出來給秀一下，大家就能發現兩者的區別了。

地圖類

FLASH代表YAHOO MAP DEMO

Silverlight DEMO

自行車運動類

FLASH DEMO

Bicycle Club.jpg

Silverlight DEMO

視訊瀏覽

FLASH DEMO

Silverlight DEMO

這個就是比較大型的項目比拚，ADOBE還有一些

In Labs: Flex 3 Product Configuator

The configurator is a simple application that allows the user to choose options to create their very own custom bowling shirt. (Built by Teknision)
Read more about it and download the source code.

In Labs: Flex 3 Dashboard

This demo application displays data using a pod layout as well as charts, forms, data grids, links, and multiple behaviors such as drag-and-drop, minimizing and maximizing, and more. (Built by ESRIA)
Read more about it and download the source code.

In Labs: Flex 3 Network Monitor

This demo application displays devices from a network in multiple views: network topology, device type and grid. Each device thumb displays real-time data and allows a user to click it for additional data. (Built by ESRIA)
Read more about it and download the source code.

In Labs: Flex 3 Media Widget

The Adobe Media Widget is an embeddable media player created in Adobe Flex. It allows you to embed any of the supported media types into a web page. (Built by Teknision)
Read more about it and download the source code.

In Labs: Flex 3 Component Explorer

Getting familiar with Flex 3? The explorer shows simple usage for MXML components in the Flex 3 framework.

Flex Store: Automation-ready version

This sample demonstrates Automated Testing, part of LiveCycle Data Services ES, with the popular Flex Store application.

Random walk component: Automation-ready sample application

Learn how to instrument the RandomWalk custom component so that your application records your user's interaction with the component and plays it back using automation tools.

Automation API sample applications

See the new Automation API in action in two new sample apps, which show presentation and recording of metrics, automated testing, co-browsing, and more.

Invoking .NET objects using the Flex RemoteObject API

Mark Piller (May 14, 2007)
Code this sample .NET application and learn how to integrate your Flex and .NET code, expose .NET classes as Flex remoting services, and invoke a remote method with MXML and ActionScript using AMF3 and RemoteObject API.

Adobe Tour Tracker

Watch cyclists race the Amgen Tour of California through this live, real-time Adobe sample app built with Flex and Flash Media Server.

Style Explorer

See this visual way of selecting style settings for Flex 2 user interface components. (Updated for Flex 2.0.1)

Restaurant Finder

Using REST and SOAP web services, your users can update data in a master-detail type application.

Flex Store

States, transitions, and UI techniques—this app demonstrates the types of user experiences you can create with the Flex.

Component Explorer

Getting familiar with Flex? The explorer shows simple usage for MXML components in the Flex framework.

Hybrid Store

See how to integrates a Flex component into an existing HTML application, and take advantage of expressiveness in Flex 2.

Dashboard

Charts data visually using Flex component effects to highlight users' actions as they drill deeper into data.

Photo Viewer

See how the Flex framework creates a seamless user interface and localizes content.

Announcing the Australian Flex Developer Derby winners

Dashboards, configurators, RIA stores, and more—check out the top selections in the Australian coding contest.

Announcing RIAForge.org

Use this new community site to host open source projects built with Adobe technologies—from ColdFusion apps to Photoshop plug-ins to Flash ActionScript libraries.

Integrating Flex 2 and Ruby on Rails

Learn how to use the Ruby on Rails framework with Flex as you build an issue-tracker application.

Sample Template Shop

A shopping cart application that connects to the websites of multiple vendors using httpservice controls. (Alnoor Lalji, Softbytes)

FlexAmp

FlexAmp is an online mp3 player that plays songs off a user's online storage account at Box.net. As the songs play, the application brings in photos, videos and product details from Flickr, YouTube and Amazon based on the ID3 information in the mp3s. (Arpit Mathur, Comcast)