五款Silverlight呈現HTML方式測試

  • 22538
  • 0

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

 

前言

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

 

測試內容

我主要想測4個東西,

  1. 給HTML文字是否可以呈現,包含了Table。
  2. 給URL瀏覽其他網站,且可以完整的呈現。
  3. 可否Javascript操作。
  4. 能不能Print印列其內容。

WebBrowser

JS:可(同網域) HTML: Web:Print:

 

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

image 

 

// 用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? <--很贊的範例。

Silverlight 4 的Host HTML功能介绍

SILVERLIGHT 4'S NEW HTML HOSTING SUPPORT 

 

什麼是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也會印列,不過小弟有試出無分頁的解決方法。

 image

/// <summary>
/// 用遞迴找出ScrollViewer
/// </summary>
private ScrollViewer GetScrollViewer(DependencyObject parent)
{
if (parent == null)
{
return null;
}

for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
DependencyObject temp = VisualTreeHelper.GetChild(parent, 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

 image

這就是他們的實作方式。

 

divelements HtmlHost 

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

 

 

 

 

 

ComponentOne HtmlHost

image

image

 

雖然我覺得這作法很假,但WebBrowser好像也沒好到那裡去,而且還不用Out of Browser,我試過新增移除放大縮小,後二個都有寫DOM+Javascript去操作,只是有時差(試試ComponentOne HtmlHost Demo就可以感受了)。

 

 

Liquid RichTextBox

JS: HTML:免強可 Web: Print:

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

image

// 當匯入從文字轉成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的元件,雖然能轉換的格式不多,如果是很簡單的需求,可以參考這個元件。

HtmlTextBlock Demonstration


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就是從這個元件學到的。