五款Silverlight呈現HTML方式測試

======================================================
注：本文源代码点此下载
======================================================

前言

最近在嘗試silverlight上呈現html內容,花了不少時間,可以說沒有真正的好方案,以下是我的測試結果,供各位網友參考。

測試內容

我主要想測4個東西,

給html文字是否可以呈現,包含了table。

給url瀏覽其他網站,且可以完整的呈現。

可否javascript操作。

能不能print印列其內容。

webbrowser

js:可(同網域) html:可 web:可 print:可

本來很期待silverlight 4這一個功能的,而且在教學影片或聽老師們介紹,我好像都沒有注意到它一定要在out of browser (oob)才能執行,等到真正開始測的時候才發現,令人大失所望,而且我在測試時按右鍵,看到了ie的選項,我終於知道他為什麼要oob了,因為要與com整合,呼叫ie的核心,很想說silverlight開發團隊也太懶了吧,不過又想想寫一個browser也不是簡單的事,而印列方面必需搭配webbrowserbrush,如下面的範例。

// 用webbrowserbrush截取web畫面

webbrowserbrush brush = new webbrowserbrush();

brush.setsource(this.webbrowser1);

printdocument print = new printdocument();

print.printpage += (obj, args) =>

{

args.pagevisual = new border() { background = brush };

args.hasmorepages = false;

};

print.print("print test");

相關教學

webbrowser class

silverlight 4 html puzzle: how does it work?

什麼是out of browser?

out of browser是可以讓silverlight安裝在window的電腦上執行,不需要使用瀏覽器就可以使用,相對的可以取得較多的功能與權限,如果想在linux上也要用out of browser功能,網路上說moonlight 3可以支援,不過我沒試過,而且像webbrowser這種用com的元件,真的可以在linux上執行嗎?令人懷疑,而mac上暫時沒有看到相關的技術,可以讓silverlight out of browser。

richtextbox

js:否 html:否 web:否 print:可

richtextbox測試只能使用xaml,除非學下面的幾個元件去將html轉成xaml(不是百分之百就是了),還有印列時只會對richtextbox的外觀繪圖,如果文字太長有scrollbor,scrollbor也會印列,不過小弟有試出無分頁的解決方法。

///

/// 用遞迴找出scrollviewer

///

private scrollviewer getscrollviewer(dependencyobject parent)

{

if (parent == null)

{

return null;

}

for (int i = 0; i if (temp is scrollviewer || ((temp = getscrollviewer(temp)) is scrollviewer))

{

return temp as scrollviewer;

}

}

return null;

}

// 只要針對ms.internal.richtextboxview輸入,就可以得到全面書面,但超出一張大小會被截掉。

uielement target = getscrollviewer(rtb).content as uielement;

args.pagevisual = target;

// 預覽也可以用ms.internal.richtextboxview。

previewimage.source = new writeablebitmap(target, null);

暫時還沒有去研究如何讓pringdocuemnt分頁,如果有好方案可以告許我。

相關教學

richtextbox overview

silverlight text editor sample

richtextbox richtextarea 傻傻分不清楚

我找到很多silverlight 4 beta的範例(2010/3以前的),如果你是跟我一樣使用silverlight 4 tools rc2 for visual studio 2010開啟範例,你百分百之也無法執行,錯在找不到richtextarea這個控制器,原來它改名成richtextbox,連method也改名了,請把setpropertyvalue改成applypropertyvalue。

htmlhost 假貨系列

js:可(同網域) html:可 web:可 print:否

為什麼叫假貨系列呢,因為他們的控制項不是真的在silverlight中,而是在silverlight上放一個html的iframe,用dom與javascript去互動,害我一開始看到demo很開心,想說找到可行方案了,仔細操作才發現他們是假的,還有因為是使用dom無法在out of browser上操作、silverlight enablehtmlaccess 屬性必需設定為 true,printdocument也無法印列其內容 。

html host control

這就是他們的實作方式。

divelements htmlhost

跟上一個元件同樣的操作原理。

componentone htmlhost

雖然我覺得這作法很假,但webbrowser好像也沒好到那裡去,而且還不用out of browser,我試過新增移除放大縮小,後二個都有寫dom+javascript去操作,只是有時差(試試componentone htmlhost demo就可以感受了)。

liquid richtextbox

js:否html:免強可 web:否 print:可

這元件有提供html的匯入與匯出,匯出正常,但匯入是這元件用將html解悉成xaml,太複雜的格式會失敗,雖然無法使用javsscript,但可以寫silvelight的code去互動,如範例。

// 當匯入從文字轉成xaml元件時發生的事件

this.richtextbox.elementread += (obj, args) =>

{

if (args.source is image)

{

// 當元件是圖片,點擊圖片時放大。

args.source.mouseleftbuttonup += (img, mouseargs) =>

{

childwindow cw = new childwindow();

cw.width = 800;

cw.height = 600;

image i = new image();

i.source = (img as image).source;

i.stretch = stretch.uniform;

cw.content = i;

cw.show();

};

}

};

公司內的一個專案用了這個元件半年多了,在silvelight 4還沒出來前,這是試過最好的richtexbox,不過對中文支援度非常的差,有時跑動畫,richtextbox內有中文字就死當了,為什麼動畫呢?,那個專案是online project manager,每個project下有weeklynote,而weeklynote就是使用這一個元件,不同的project與weeklynote切換應好客戶的要求,要有過場動畫,還有打中文字有時文字會暫時消失,按下enter才會重現等等只有輸入中文才會發生的問題,不然我覺得滿好用的。

htmltextbox

js:否 html:免強可 web:否 print:可

這是早在silverlight 2時國外的高手就寫出如何將html轉成xaml的元件,雖然能轉換的格式不多,如果是很簡單的需求,可以參考這個元件。

template = xamlreader.load(

"controltemplate " +

"xmlns='http://schemas.microsoft.com/client/2007' " +

"xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +

"textblock " +

"x:name=\"textblock\" " +

"/>" +

"controltemplate>") as controltemplate;

applytemplate();

動態載入xaml成template就是從這個元件學到的。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/