教學電子課件前沿技術

1、第一個Silverlight 程序第四章項目展示圖片廣告幻燈效果演示預習檢查.xaml文件中什么屬性指定了后臺代碼中類的名字 ？Silverlight中什么控件可用于顯示少量流內容 ？本章任務創(chuàng)建簡單的Silverlight應用程序 顯示“HelloWorld” 顯示用戶留言 同步顯示用戶輸入內容 掌握Silverlight的特色和優(yōu)勢 掌握Silverlight程序的開發(fā)步驟 本章目標Silverlight概述 跨平臺、跨瀏覽器的新的Web技術 對于開發(fā)人員提供了豐富的多媒體可交互技術 對于用戶 安裝簡單的插件程序提供了視覺效果絢麗的交互式體驗 Silverlight版本：1.0，1.1，2

2、.0，3.0，4.0 本門課采用Silverlight特色與優(yōu)勢2-1 Silverlight更利于開發(fā)人員和設計人員的相互協(xié)作Silverlight提供了視頻音頻、動畫、矢量圖型等功能采用了Windows Media技術 支持WMA、WMV、VC-1、MP3等用戶可在瀏覽器中拖動、旋轉和縮放圖形 XAML Microsoft Expression Blend工具 合并頁面 設計內容 Silverlight特色與優(yōu)勢2-2 Silverlight是跨瀏覽器、跨平臺的插件 支持的操作系統(tǒng)：Windows Vista、Windows XP、Windows Server2003、Mac OS X 1

3、0.4、Mac OS X Leopard 支持的瀏覽器：IE 6、IE 7、 IE 8、 Firefox 2.0，F(xiàn)irefox 1.5、Safari 2.0 Silverlight兼容現(xiàn)有技術，降低了開發(fā)成本 兼容 、AJAX以及其他標準 Silverlight特效3D幻燈效果水紋特效效果 Silverlight應用 MSN使用Silverlight制作的Michael Jackson專題網站 騰訊推出的基于Silverlight技術的Web即時通訊軟件 美國在線AOL使用了Silverlight技術制作的郵箱 Silverlight相關資源 Silverlight 中文社區(qū) Silverl

4、ight China（銀光中國） Silverlight離線幫助文檔 演示示例1： Silverlight 離線幫助文檔的使用創(chuàng)建Silverlight程序3-1步驟1：新建項目 步驟2：選擇“項目類型”創(chuàng)建Silverlight程序3-2 步驟3：選擇項目模板步驟4：為項目、解決方案命名 編譯后為一個程序集 Visual Studio自動建立項目結構 編譯后可直接運行 創(chuàng)建Silverlight程序3-3 步驟5：為Silverlight項目添加宿主程序 教員演示：創(chuàng)建 Silverlight 程序小結1、Silverlight有哪些特色和優(yōu)勢？2、創(chuàng)建Silverlight程序可以分為哪幾

5、個步驟？Silverlight程序結構 Silverlight項目： Web項目： 和屬性相關的文件 整個應用程序相關信息默認用戶控件 Code-BehindSilverlight應用程序包 負責運行Silverlight應用之前所需的各種操作用來承載Silverlight用戶控件的頁面 App.xaml中的代碼：App.xaml.cs中的代碼：代碼分析2-1 namespace HelloWorld public partial class App : Application public App() this.Startup += this.Application_Startup; thi

6、s.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException; ponent(); private void Application_Startup(object sender, StartupEventArgs e) this.RootVisual = new MainPage(); / Silverlight的啟動用戶控件 注冊了三個事件UserControl xmlns:dataInput=clr-namespace:System.Windows.Contro

7、ls; assembly=System.Windows.Controls.Data.Input x:Class=HelloWorld.MainPage xmlns= xmlns:x= MainPage .xaml中的代碼：MainPage .xaml.cs中的代碼：代碼分析2-2public partial class MainPage : UserControl public MainPage() ponent(); 所有XAML文件的基類所有XAML文件的基類對應此XAML文件的后臺代碼中類的名字編寫Silverlight頁面 實現(xiàn)點擊“Click”按鈕，顯示“HelloWorld”功能

8、HTML中Table的使用回顧：HTML中的Table布局如何使用？ Hello , Silverlight ! 內容填充到了列中如何使用Grid實現(xiàn)頁面布局？使用Grid定義網格布局 2-1 /定義行的集合定義列的集合定義此Grid實例的行演示示例2：使用Grid定義網格布局 使用Grid定義網格布局2-2 指定行和列的高度和寬度：指定行和列占的百分比： 根據(jù)顯示的內容自動適應使用 “*” 代替 “%”向Grid布局中添加內容添加控件TextBlock控件常用屬性 ：Name ：獲取或設置對象的標識名稱 Text ：獲取或設置TextBlock的文本內容 用于顯示少量流內容的TextBloc

9、k控件Button控件示例代碼將TextBlock和Button控件關聯(lián)到網格中 內容出現(xiàn)的行數(shù)和列數(shù)添加事件處理 為按鈕添加Click事件 選擇或自定義命名事件處理方法private void btnOK_Click(object sender, RoutedEventArgs e).xaml.cs中自動生成演示示例3：編寫Silverlight頁面 運行及調試Silverlight程序 在Visual Studio中調試Silverlight程序 使用“F9”新建或取消斷點使用“F5”啟動調試練習HelloWorld需求說明創(chuàng)建Silverlight應用程序，點擊“Click”按鈕，在按鈕

10、左側顯示“HelloWorld”完成時間：15分鐘指導事件處理 訓練要點：創(chuàng)建Silverlight程序使用Visual Studio設計Silverlight頁面為Silverlight頁面添加事件處理需求說明：當用戶輸入完姓名和信息后點擊“OK”按鈕，將用戶姓名和用戶信息以“*說：*” 方式顯示到按鈕右側指導事件處理 實現(xiàn)思路：在原有“HelloWorld”解決方案中添加MessageBoard.xaml文件在App.xaml.cs文件中修改啟動的Silverlight頁面使用Grid標簽完成頁面布局并添加TextBlock、TextBox、Button控件為“OK”按鈕添加事件處理程序完成時間：25分鐘共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解需求說明：在“HelloWorld”項目中繼續(xù)添加Silverlight用戶控件當用戶輸入信息時，在頁面下部同步顯示用戶輸入的內