Silverlight for Windows phone之初體驗

Silverlight for Windows Phone 差點鬧了一個笑話. 很多開發者看到諾基亞Symbian上的Silverlight都出來，那麼急于Windows的silverlight 怎麼沒有反應. 當然微軟在移動通信領域也是不甘示弱.雖然Windows Mobile智能作業系統的市場正在被iPhone和Android吞食. 看着自己不争氣的Windows Mobile,于是乎在MWC 2010大會釋出了Windows Phone 7智能作業系統.

<a href="http://blog.51cto.com/attachment/201201/180106339.png" target="_blank"></a>

當然作為開發人員還是盡快想體驗一下關于Silverlight For Windows phone特點.

開發前準備:

A:作業系統要求Windows7或Vista SP2. 對于使用XP系統Developer 很遺憾. 随便說一下官方對硬體要求:硬碟3G,記憶體 2G,最關鍵必須還需要一塊支援DirectX 10的顯示卡.

C:如果您是一位前端設計人員，想要仔細研究研究Silverlight的話，那麼則可以下載下傳Express Blend 4 Beta，然後再安裝上Expression Blend Add-in for Windows Phone以及Expression Blend SDK for Windows Phone. 您就可以體驗在Expression Blend裡面設計Windows Phone 7的應用程式了. 很不錯吧.

進入開發:

工具安裝完成之後, 他會給你一個提示. 是否立即運作.Visual Studio 2010 Express for Windows Phone .你可以直接運作. 也可以不予理會 直接打開VS2010.檢視開發模闆.

<a href="http://blog.51cto.com/attachment/201201/180111765.png" target="_blank"></a>

發現多了兩個新集合模闆:Silverlight For Windows Phone 和XNA Game Studio4.0. 建立一個常用Windows Phone Application. 命名為MyFirstWindowsPhoneDemo.建立完成後出現如下界面:

<a href="http://blog.51cto.com/attachment/201201/180116446.png" target="_blank"></a>

說明一下圖中辨別區域:

A:Windows Phone Controls.也就是工具箱.和Silverlight 普通開發類似.

B:Windows Phone圖形效果頁面.

C:Silverlight XAML編碼頁面 B和C 正好從Silverlight 上下布局 變成左右布局. 主要是Windows Phone 是長方體. 這樣布局開發上看起效果更直覺.

D:解決方案樹形結構.

建立完成打開工具箱 拖入一個Textbox Button.和一個WebBrowser控件. 布局如下:

<a href="http://blog.51cto.com/attachment/201201/180121645.png" target="_blank"></a>

XAML頁面布局代碼:

&lt;!--ContentGrid is empty. Place new content here--&gt;  

         &lt;Grid x:Name="ContentGrid" Grid.Row="1"&gt;  

             &lt;browser:WebBrowser HorizontalAlignment="Left" Margin="6,84,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="568" Width="468" /&gt;  

             &lt;Button Content="Button" Height="70" HorizontalAlignment="Left" Margin="314,3,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /&gt;  

             &lt;TextBox Height="32" HorizontalAlignment="Left" Margin="6,3,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="317" /&gt;  

         &lt;/Grid&gt;  

我現在實作一個簡單效果. 在Textbox中輸入網址.點選Button按鈕把網頁實作跳轉并把内容顯示WebBroswer中.Button按鈕Click事件:

private void button1_Click(object sender, RoutedEventArgs e)  

         {  

             string geturi = "Http://" + this.textBox1.Text;  

             this.webBrowser1.Navigate(new Uri(geturi,UriKind.RelativeOrAbsolute));  

             MessageBox.Show("跳轉成功", "提示！", MessageBoxButton.OK);  

         }  

ok.如上即實作一個簡單網頁跳轉效果.來運作界面.先有一個Loding加載頁面 加載完成後看看.

<a href="http://blog.51cto.com/attachment/201201/180127945.png" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201201/180132757.png" target="_blank"></a>

在WebBroswer控件成功顯示. 但在頂部提示資訊MessageBox中中文程式設計亂碼.目前CTP版本對中文支援還不帶好. 隻能等待正式版本改善.目前建議使用英文開發.使用Windows phone的新界面. 左邊箭頭是Back傳回上一頁. Windows标志則是回到首頁面. 最右邊則是到達Search搜尋頁面.首頁面隻有一個IE圖示.

<a href="http://blog.51cto.com/attachment/201201/180137883.png" target="_blank"></a>

而Mix10大會看到示範程式有兩排圖示. 這個主要原因是對于開發上暫時提供開發上模闆. 目前隻是CTP版本.正式版中會有所改善.Windows phone中也內建Bing運用.通過點選最右邊Search按鈕就能看到.體驗一下:

<a href="http://blog.51cto.com/attachment/201201/180143836.jpg" target="_blank"></a>

Windows Phone 7基于Silverlight開發還是不錯的,Windows Phone 7不是 Windows Mobile的更新,而是一個全新的操作手機作業系統.當然內建了Silverlight開發 雖然目前隻是釋出CTP版本. 但是足以令人期待.

以下為參考資源:

本文轉自chenkaiunion 51CTO部落格，原文連結:http://blog.51cto.com/chenkai/764901