天天看點

Silverlight之out of Browser模式

摘要:在silverlight中所有應用都可以以一種叫做oob(out of browser)模式的方式脫離浏覽器運作,在oob模式下應用程式将獲得更多的信任,甚至可以和windows api通信,今天就來看一下如何建構oob應用。

主要内容:

什麼是oob

建構oob應用

自定義oob視窗

oob應用更新

silverlight out of browser從字面了解就是脫離浏覽器的應用,是可以安裝到本地的運作在浏覽器外的應用,是一個具有獨立視窗的web應用。在oob模式下silverlight看起來更像是c/s應用,但是它卻具有web應用的特性。這樣一來就可以讓使用者像在c/s系統中一樣體驗絢麗、豐富的web特性。相比浏覽其中運作silverlight來講,oob除了運作方式不同之外,還會獲得更多的權限信任、更多的本地化内容,這樣以來很多浏覽器中很難做到甚至無法做到的事情在oob中也同樣可以實作。目前很多silverlight應用都支援oob模式,例如pptv劇場版就是一個很好的案例:

Silverlight之out of Browser模式

在visual studio中建構oob應用很簡單,隻需要簡單幾步設定即可完成。在此之前先看一下沒有對項目做oob設定之前的情況。

簡單建一個silverlight應用,運作之後的狀态如下:

Silverlight之out of Browser模式

點選右鍵發現目前隻有一個菜單:

Silverlight之out of Browser模式

ok,現在對項目進行oob設定:

在項目中右鍵properties,進入silverlight選項,點選enable running application out of browser,此時下面的"out of browser setting"按鈕将變成可用狀态,點選此按鈕彈出下面的設定視窗:

Silverlight之out of Browser模式

然後做如下設定,這裡設定了視窗大小、所需圖示以及trust權限(選中該項後安裝時需要使用者确認):

Silverlight之out of Browser模式

圖示:

Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式

設定完成後可以直接啟動此項目(silverlightapplicationoob)進行調試而不必在對于的web項目(silverlightapplicationoob.web)中運作,效果如下:

Silverlight之out of Browser模式

這裡為了對比不妨在浏覽器中檢視效果:

Silverlight之out of Browser模式

可以看到在右鍵菜單中多了一個選項,點選此選項可以直接将程式安裝到計算機上,安裝時由于之前設定了trust是以需要使用者确認以及設定開始和桌面快捷方式:

Silverlight之out of Browser模式

安裝完成後就可以直接看oob下的效果:

Silverlight之out of Browser模式
Silverlight之out of Browser模式

為了讓使用者有更好的體驗,使用右鍵進行安裝未免不夠專業并且使用者體驗較差,一般情況下會選擇使用程式進行安裝控制,代碼很簡單:

Silverlight之out of Browser模式

view code

在程式中通過application.current.install()方法進行安裝,當然在這之前最好進行狀态檢測看程式是不是已經在浏覽器外運作。另外在安裝時也可以使用application.current.installstate跟蹤安裝狀态。有了上面的代碼接下來就可在界面放一個按鈕,然後在不同的狀态下動态給使用者不同的提示。

xaml代碼:

Silverlight之out of Browser模式

cs代碼:

Silverlight之out of Browser模式

安裝完後如何解除安裝呢,事實上可以按照一般c/s程式的方式解除安裝,或者在web中運作此程式右鍵進行删除。

在上面或許您已經看到了,oob設定視窗中有以下視窗風格設定:

Silverlight之out of Browser模式

這個選項在很多時候是很有用的,上面視窗使用的是預設風格(default),視窗操作(最大化、最小化、關閉、移動、視窗大小設定)均調用windows api。當然,相應的界面也顯得呆闆一些,如果你的應用想要擁有炫酷的界面,那麼default或許無法滿足你的需求。但是silverlight已經為您預留了接口,後面no border和borderless round corners就給你無限的遐想空間。下面就來看一下如何自定義一個oob視窗。

要自定義視窗其實就是要實作最小化、最大化、關閉、視窗移動、視窗大小設定功能,除了視窗大小設定功能之外其他功能均在标題欄實作,而視窗大小的resize操作一般是放到視窗右下角進行的,是以為了便于複用,接下來會建立兩個使用者控件:titlebar和resizebutton。

建立一個silverlight class library項目cmj.myweb.mysilverlight,添加一個usercontrol,命名為titlebar。titlebar就是标題欄部分,實作最小化、最大化、關閉、視窗移動操作。标題欄主要包括ico、标題文本、最小化按鈕、最大化按鈕和關閉按鈕幾部分,這裡不妨使用grid布局将其分為一行五列,分别對應ico、标題和三個按鈕。為了使控件在使用時自适應寬度,可以将标題部分所在的列設定為"*",并且注意不要給usercontrol設定width和height屬性,隻需要設定designwidth和designheight即可。在第一列中放一個image控件用于顯示應用程式圖示,在第二列中放一個textblock顯示标題内容,其餘三列放三個button按鈕用于實作視窗最小化、最大化和關閉。然後準備四個圖示作為按鈕的背景(最大化按鈕需要最大化狀态和正常狀态兩個圖示):

Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式

有了這些之後接下來就需要實作各部分功能了。最小化、最大化隻需要設定mainwindow的windowstate即可;關閉時調用close方法;而拖動操作可以交給grid來做,在grid的mouseleftbuttondown中調用mainwindow的dragmove方法。需要注意的是最大化按鈕的圖示有兩種狀态,需要根據不同的狀态動态改變圖示。

到此為止titlebar的功能基本上已經實作,但作為一個通用控件最好把一些内容交給使用者來操作以便增加控件靈活性,這裡定義icon、title、background屬性使用者設定标題欄圖示、标題内容和标題欄背景。下面是titlebar前台xaml和背景cs代碼:

Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式

titlebar在上面已經完成接下來就來實作視窗的resize操作,在項目中再添加一個usercontrol命名為resizebutton,在resizebutton中放置image控件來顯示拖拽圖示

Silverlight之out of Browser模式

,接下來設定usercontrol的mouseleftbuttondown事件調用mainwindow的dragresize方法實作拖拽功能,在mouseenter和mouseleave事件中更改滑鼠指針為sizenesw和arrow,代碼如下:

Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式

兩個控件都已經開發完畢,剩下的工作就是如何使用了。在silverlightapplicationoob中引用cmj.myweb.mysilverlight的dll。接着在main.xaml中添加命名空間:xmlns:cmj="clr-namespace:cmj.myweb.mysilverlight.myusercontrol;assembly=cmj.myweb.mysilverlight"

(控件字首任意命名,這裡命名為cmj),然後在main.xaml中定義titlebar和resizebutton并設定相關屬性:

Silverlight之out of Browser模式

下面是安裝和運作效果:

Silverlight之out of Browser模式

上面的oob應用看起來跟在web中運作沒有兩樣,又可以以類似于b/s的方式運作,但是大家都知道b/s有一個很多的弊端就是更新問題,那麼oob應用如何更新呢?總不能每次運作程式先删除再安裝一次吧?事實上oob模式下更新工作很簡單,隻要在程式需要更新時修改assemblyversion版本(在項目的assemblyinfo.cs檔案中),然後在程式啟動時調用application.current.checkanddownloadupdateasync()方法就能完成更新工作,這裡将更新操作寫到前面oobinstall類中。為了便于觀看效果,在loaded事件中添加更新操作,接着在浏覽器中運作并将之前安裝的程式删除重新安裝。然後對main.xaml做稍許改變(在其中添加一個textblock),修改版本資訊為,1.0.0.1:

oobinstall添加更新方法後:

Silverlight之out of Browser模式
Silverlight之out of Browser模式
Silverlight之out of Browser模式

在mainpage背景代碼中調用:

Silverlight之out of Browser模式

重新編譯程式,再啟動程式,程式會自動更新,然後提示更細成功:

Silverlight之out of Browser模式

接着重新開機應用,會發現程式更新後的效果:

Silverlight之out of Browser模式
Silverlight之out of Browser模式