2009年12月26日 星期六

Silverlight 4 中的RichTextArea 支援

Silverlight 4 beta當中出現了一堆社群中期待很久的好功能,針對這個部分,我忘記是SL的產品經理還是開發Team的誰,對於被訪問到SL4的新功能時,還『謙虛』的說:這沒什麼,我們只是把社群提供的Wishlist中的Top 10(還是多少我忘了),實作出來而已。

這一實作,就增加了WebCam, HTML Browser的支援, Printing, RichTextArea...等功能。一個個都直接命中開發人員期待(還是抱怨 ^_^)已久的需求。

先前介紹過了WebCam與列印,今天要介紹的是RichTextArea,這也是社群強烈要求的功能之一,看來這次是沒有落空了。

RichTextArea和過去我們熟悉的RichTextBox一樣,可以控制文字的B, U, I, 當然也可以改變文字大小、字型、顏色...承襲SL的一貫風格, RichTextArea當然也支援插入圖形和HyperLink,甚至任何的物件(例如Rectangle...),這讓SL可以輕易寫出Windows Form或Web Form沒法做出的編輯器。

控制的方法很簡單,程式碼如下:
private void button_B_Click(object sender, RoutedEventArgs e)
{
richTextArea1.Selection.SetPropertyValue(TextElement.FontWeightProperty, FontWeights.ExtraBold); //設定粗體
richTextArea1.Focus();
}

private void button_U_Click(object sender, RoutedEventArgs e)
{
richTextArea1.Selection.SetPropertyValue(TextElement.TextDecorationsProperty, TextDecorations.Underline); //設定底線
richTextArea1.Focus();
}

private void button_I_Click(object sender, RoutedEventArgs e)
{
richTextArea1.Selection.SetPropertyValue(TextElement.FontStyleProperty, FontStyles.Italic); //設定斜體
richTextArea1.Focus();
}

private void ComboBox_FontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
richTextArea1.Selection.SetPropertyValue(TextElement.FontSizeProperty, ((ComboBoxItem)ComboBox_FontSize.SelectedItem).Content.ToString()); //設定文字大小
richTextArea1.Focus();
}

private void ComboBox_Color_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
richTextArea1.Selection.SetPropertyValue(TextElement.ForegroundProperty, ((Rectangle)ComboBox_Color.SelectedItem).Fill); //設定顏色
richTextArea1.Focus();
}

private void button_OK_Click(object sender, RoutedEventArgs e)
{
XamlDORichTextSerializer serializerXaml = new XamlDORichTextSerializer();
this.textBlock1.Text = serializerXaml.SerializeObject(richTextArea1).ToString(System.Xml.Linq.SaveOptions.OmitDuplicateNamespaces); //取得Xaml Code
}
[完整程式碼瀏覽]
您可以點選底下的HyperLink來測試這個程式的結果:
[範例] (還是一樣,要測試這個範例前,請先安裝SL4 Development Run-Time)

1 則留言:

匿名 提到...

請問RichTextArea有辦法做到文繞圖的功能嗎?