發表文章

目前顯示的是有「我最喜歡的Silverlight 3 新功能系列」標籤的文章

SL3當中的Out Of Browser功能

圖片
前陣子有讀者問到SL3的Out Of Browser功能,我才發現我在Blog上似乎跳過了,因為這個功能雖然是SL3的重要新功能,但是因為相對而言是相當簡單的,所以可能被我略過了。 Out of Browser是SL3當中的重要功能之一,它讓SL應用程式在瀏覽器外執行。不過實際上使用此功能卻相當簡單,只需要在Silverlight專案上按下滑鼠右鍵,選擇Properties,在顯示出的屬性視窗上就可以設定了: 相關的細節可以點選[Out-of-Browser Settings]按鈕進行設定。 絕大部分的參數細項,均可透過設定指定完成。設定好了之後,這個SL應用程式就支援Out of Browser。這時候,使用者可以隨自己的需要,將該SL應用程式安裝到用戶端,安裝時只需要在網頁上按下滑鼠右鍵,就會出現底下這樣的選單: 點選『安裝到此電腦』,使用者即可直接將應用程式安裝到用戶端,甚至會為您建立桌面捷徑或是開始功能表捷徑(依照使用者自行選擇而定)。 除了以設定的方式為SL應用程是添加Out of Browser功能之外,我們也可以透過底下這樣的程式碼,將SL應用程式安裝到用戶端: '用戶點選安裝鈕 Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) '安裝在用戶端 If Application.Current.InstallState = InstallState.NotInstalled Then '安裝 Application.Current.Install() End If End Sub 從上面的程式碼您可以發現,我們可以透過『Application.Current.Install()』將SL應用程式安裝在用戶端,也可以透過『Application.Current.InstallState』來得知目前該應用程式的安裝狀況。 除了取得應用程式是否已經安裝到用戶端等資訊之外,幾個與Out of Browser有關的資訊取得方式我們分別列舉如下。 首先,我們可以透過底下的程式碼,來判斷目前用戶端...

Silverlight 3 中的multi-Touch程式開發

圖片
TechDays 2009忙完了,終於有一點點時間可以回頭寫SL3中的多點觸控,隨著Windows 7的Launch在即,我開始屢屢被問到Silverlight 3中的多點觸控程式開發的部分。 在TechDays 2009中也稍微提過,其實SL3中的多點觸控一點也不複雜,架構上相當簡單,底下這是SL3中多點觸控的訊息架構: 從這邊您也不難發現,觸控螢幕(或面板或NB)、Windows 7、IE8當然都是必要設備,缺一不可。 對於SL3應用程式來說,只是很簡單的從IE8接受多點觸控事件,或者是模擬成滑鼠事件。至於很多人關心的可以接收到幾點,端看設備而定,如果設備傳入的是兩點(我手上的觸控螢幕和NB都只支援兩點),傳入SL3的就是兩點;若設備支援多點,SL3就接收到多點,如此而已,沒啥特別的。 要在SL3當中接收到多點觸控的信息,再簡單也不過,最簡單的方式如下,動作只有兩動: 1.Hook Multi-Touch事件 2.在事件中取得點,進行處理或運算。 程式碼如下: public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); //Hook事件 Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported); } void Touch_FrameReported(object sender, TouchFrameEventArgs e) { //取得點數 int n = e.GetTouchPoints(this.LayoutRoot).Count; this.textBlock1.Text = "points : " + n; //將每一點座標顯示出來 foreach (System.Windows.Input.TouchPoint p in e.GetTouchPoints...

Silverlight 3中規則運算式(Regular Expressions)的支援

在SL3當中,有一個新支援的重要類別,也就是位於System.Text.RegularExpressions命名空間底下的Regex,在RegularExpressions命名空間底下包含了幾個與規則運算式有關的重要類別,而最方便使用的莫過於Regex,使用的方式很簡單: System.Text.RegularExpressions.Regex.IsMatch(要驗證的文字, 規則式) 其中IsMatch是一個靜態方法,因此我們直接呼叫即可,完整的程式碼可參考底下範例: Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Me.TextBox1.Text = "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" End Sub Private Sub Button2_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs) Me.TextBox1.Text = "0\d{2,4}-\d{6,8}" End Sub Private Sub Button3_Click(ByVal sender as Object, ByVal e as System.Windows.RoutedEventArgs) MessageBox.Show(Text.RegularExpressions.Regex.IsMatch(Me.TextBox2.Text, Me.TextBox1.Text)) End Sub 此場景的XAML指令碼如下: <Grid x:Name="LayoutRoot"> <TextBox x:Name="TextBox1" Height="29" Margin="140,32,270,0" VerticalAlignment="Top...

Silverlight 3 當中的EasingFunction

圖片
EasingFunction是SL3當中針對動畫機制加上的特效處理,如同Effect一樣,SL3當中內建了基本的一些功能,當然開發人員也可以繼承基底類別開發自己的EasingFunction,我們先來看如何使用。 Dim sb As New Storyboard Dim da As New DoubleAnimation da.From = 0 da.To = 350 da.Duration = New TimeSpan(0, 0, 3) Storyboard.SetTarget(da, ellipse2) Storyboard.SetTargetProperty(da, New PropertyPath(Canvas.TopProperty)) sb.Children.Add(da) sb.Begin() 上面這段程式碼用來動態建立一段動畫,並且讓動畫發生在一個圓球物件(ellipse2)上,這段動畫很簡單,在三秒內,讓圓球從上往下墜落,沒什麼特別的。 但是一旦加上EasingFunction: '設定EasingFunction da.EasingFunction = New BounceEase With {.Bounces = 10, .Bounciness = 2, .EasingMode = EasingMode.EaseOut} 動畫就將大大不同,球體(ellipse2)墜落動作變成具有彈跳性: 從這邊我們可以知道,透過設定DoubleAnimation的EasingFunction 屬性,我們可以指定特定的效果給動畫,而BounceEase就是效果之一,其位於System.Windows.Media.Animation命名空間之下。您可以在該命名空間下找到其他更多的效果,如前所述,您也可以繼承EasingFunctionBase類別建立自己的EasingFunction特效。

Silverlight 3中的bitmap API

圖片
SL3中的Bitmap API,是影像處理的基礎,它讓我們得以直接在記憶體中建立一個點陣圖畫布,使用的方法很簡單,直接透過Imaging底下的WriteableBitmap即可: Dim wBitmap As New System.Windows.Media.Imaging.WriteableBitmap(…) 建構函式有三種呼叫方式,可隨您的需要使用: WriteableBitmap(影像來源BitmapSource) WriteableBitmap(寬Int32,高Int32) WriteableBitmap(任何物件UIElement, Transform物件) 例如,底下的程式碼將會建立一張空白的畫布在記憶體中: Dim wBitmap As New System.Windows.Media.Imaging.WriteableBitmap(640,480) 而WriteableBitmap物件的Pixels屬性則可以讓我們設定點陣圖的影像: wBitmap.Pixels(y * wBitmap.PixelHeight + x) = pixel 而上面的Pixel則可以透過底下這樣的方式計算出來: Dim brg As Byte() = New Byte(3) {} 'Blue, B brg(0) = CByte(color.B) 'Green, G brg(1) = CByte(color.G) 'Red, R brg(2) = CByte(color.R) '透明度 brg(3) = color.A Dim pixel As Integer = BitConverter.ToInt32(brg, 0) 透過這樣的方式,您可以很輕易的建立出類似底下這樣的影像雜點效果:

Silverlight 3 中的Element to Element Binding

在SL3當中,針對Binding的功能增加了Element to Element Binding機制,雖然並不困難也不複雜,也不像是Out of Browser或是.NET RIA Services/DataForm那種大功能,但是其實妥善的運用這個小技巧也能讓我們在開發應用程式的時候方便不少。 例如,如果我們希望能夠讓 Slider在拖曳的時候,可以直接把值填入TextBox,過去SL2是一定要寫程式的,現在則可以利用底下這樣的Xaml指令碼,就可以很容易的完成: 這類的Binding機制還可以運用在data binding或是圖表等場合,實用性相當高,底下是上面Slider的例子。 [ 範例 ]

Silverlight 3 中的Pixel Shader Effect

圖片
Silverlight 3內建了Bitmap API,並支援了像素特效技術(Pixel Shader effects),這讓Silverlight中的每一個物件(UI Element),都可以輕易的具有模糊、陰影等效果。當然,設計師也可以自行建立各種特效,例如水紋、風動、版畫…等,在Silverlight當中重複使用。 開發人員可以透過物件的Effect屬性,讓物件有這種特殊效果: Dim myEffect As New ShaderEffectLibrary.RippleEffect myEffect.Amplitude = 0.1 Me.Image1. Effect = myEffect 例如底下這個範例就相當有趣,其實這只是一張很單純的圖片,但是當使用者以滑鼠點選圖片時,你將會看到水紋的特殊效果: [ 範例 ]

SL 3中的Local Connections

其實說來也挺詭異的, SL3 的Runtime並沒有大多少, 但是卻提供了許多新功能, 不知道MS他們怎麼塞進去的, 例如System.Windows.Messaging這一組功能就是其中之一, 他讓運行在同一個用戶端, 同一個domain下的SL App可以彼此之間交換資料, 稱為local connection. 寫法很簡單, 一樣撰寫一個傳送者和一個接受者, 例如: 傳送者: Dim messageSender As New LocalMessageSender("receiver", LocalMessageSender.Global) 接收者: Dim messageReceiver As New LocalMessageReceiver("receiver", ReceiverNameScope.Global, LocalMessageReceiver.AnyDomain) 分別在兩個不同的Browser中...就可以彼此傳訊了...相關的功能都會有事件可以使用... [ 傳送者 ] [ 接收者 ]

SL 3 貼心的設計: 全螢幕以及視窗大小調整時的自動縮放

其實我覺得, SL 3最令人覺得貼心的設計, 並非是Child Window, 也不是新增的一堆功能和先前提過的滑鼠滾輪, 最讓我覺得貼心的是, 由於調整了Silverlight Host Control以及預設的Silverlight project template, 使得開發人員現在在設計full window的Silverlight Application時, 預設狀況下SL程式中的控件就會隨著視窗大小而自動縮放, 比起2.0來說真是貼心不少, 過去2.0這部分還需要而外寫code(不只是SL中的程式碼, 還包括網頁上的JavaScript)才能達成此功能, 現在隨手做的任何一個SL App中的控件大小, 都可以隨著瀏覽器視窗大小以及全螢幕的切換自動調整, 已經越來越像是一個完整的應用程式開發環境了... 開發RIA應用程式嗎? 報告: Silverlight 3 準備好了...^^ [ 範例 ]

終於 "滑鼠滾輪" 的部分SL3也直接的支援了...

圖片
過去SL 2.0中還算是秘技之一的滑鼠滾輪功能, 在SL3.0正式被支援了... 沒啥特別的技巧, 就是一個delta屬性罷了... [ 範例 ]

我最喜歡的Silverlight 3 新功能(一)之 SaveFileDialog

圖片
My favorite Silverlight 3 new features ... Part 1...SaveFileDialog ----------------------------------------------------------------- Silverlight 3.0推出在即,有幾個我個人很喜歡的新功能, 當然要陸續介紹一下,第一個我最感興趣的是SL 3中的檔案儲存能力,這邊指的檔案儲存當然是儲存到Client端,透過這個功能我們的SL應用程式儘管運行在瀏覽器上,但再也不是對用戶端的檔案存取毫無能力了,要使用這個功能,關鍵在於SaveFileDialog物件... 線上展示: (若需要測試此頁面, 請先安裝 Silverlight 3 Beta - Windows Developer Runtime ) 主要程式碼如下: 下載 範例程式。