開發WinRT自定義組件之富文本框－互聯網

文章出處

富文本框是常用的組件之一，多用于文章排版、用戶評論等。

WinRT組件中內置了兩個：RichEditBox、RichTextBlock。RichEditBox可以編輯，RichTextBlock只用來顯示。

由于內置的組件缺少工具欄，故我準備擴展一下，添加一些常用的功能。

測試代碼下載

1、首先創建一個 WinRT 類庫項目：

2、添加Templated Control：

會自動創建Themes文件夾與Generic.xaml文件：

其中自定義組件的類中會缺少前綴，手動添加即可：

3、設計RichEditBoxX的樣式：

1     <Style TargetType="winrt:RichEditBoxX">
2         <Setter Property="Template">
3             <Setter.Value>
4                 <ControlTemplate TargetType="winrt:RichEditBoxX">
5                     <StackPanel>
6                         <StackPanel Orientation="Horizontal">
7                             <ComboBox Name="txtFontFamily" Width="80"></ComboBox>
8                             <ComboBox Name="txtFontSize" Width="80"></ComboBox>
9                             <Button Name="btnWeight" Width="50" Content="B"></Button>
10                             <Button Name="btnStyle" Width="50" Content="I" FontStyle="Italic"></Button>
11                             <Button Name="btnUnderline" Width="50" Content="U"></Button>
12                             <ComboBox Name="txtAlign" Width="50">
13                                 <ComboBox.Items>
14                                     <ContentControl Name="labLeft" Content="Left" Width="50"></ContentControl>
15                                     <ContentControl Name="labCenter" Content="Center" Width="50"></ContentControl>
16                                     <ContentControl Name="labRight" Content="Right" Width="50"></ContentControl>
17                                     <ContentControl Name="labJustify" Content="Justify" Width="50"></ContentControl>
18                                 </ComboBox.Items>
19                             </ComboBox>
20                             <Button Name="btnForeground" Content="Foreground" Width="120"></Button>
21                             <Button Name="btnBackground" Content="Background" Width="120"></Button>
22                             <Button Name="btnImage" Content="Image" Width="80"></Button>
23                             <Button Name="btnVideo" Content="Video" Width="80"></Button>
24                         </StackPanel>
25                         <RichEditBox Name="txtRichEdit" AcceptsReturn="True" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
26
27                         </RichEditBox>
28                     </StackPanel>
29                 </ControlTemplate>
30             </Setter.Value>
31         </Setter>
32     </Style>

語法與WPF、Silverlight基本一致，注意添加命令空間的語法有所改變：

xmlns:winrt="using:BrooksCom.WinRT.Control"

目前無法將自定義組件的XAML單獨拆分成多個文件，要被迫寫在Generic.xaml中，這應該是一個疏忽，希望正式版能改正這個問題。

目前Generic.xaml依然不能可視化設計，對于美工水平相當湊合的我來說，想好看點是種奢望 J

順便期待下Blend 5正式版，什么時候能發布，好歹把WPF、Silverlight、WinRT、Windows Phone 四種平臺集成到一起，不要分為多個了。

比較奇怪的是WinRT中居然沒有Label控件，我暫且使用ContentControl代替。

4、設置字體功能使用了WCF服務：

1     public class SrvFont : ISrvFont
2     {
3         public List<string> DoWork()
4         {
5             List<string> __list = new List<string>();
6             InstalledFontCollection fonts = new InstalledFontCollection();
7             foreach (FontFamily font in fonts.Families)
8             {
9                 __list.Add(font.Name);
10             }
11
12             return __list;
13         }
14     }

使用了C# 5.0的異步方法，WinRT中幾乎都是異步方法，以后要適應這種風格了：

1         protected async override void OnApplyTemplate()
2         {
3             base.OnApplyTemplate();
4
5             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
6
7             ComboBox __txtFontFamily = this.GetTemplateChild("txtFontFamily") as ComboBox;
8             SrvFont.SrvFontClient __proxy = new SrvFont.SrvFontClient();
9             System.Collections.ObjectModel.ObservableCollection<string> __list = await __proxy.DoWorkAsync();
10             foreach (string s in __list)
11             {
12                 __txtFontFamily.Items.Add(s);
13             }
14
15             __txtFontFamily.SelectionChanged += __txtFontFamily_SelectionChanged;

5、設置字體、字號等格式：

使用 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat 來設置樣式。

1         void __txtFontFamily_SelectionChanged(object sender, SelectionChangedEventArgs e)
2         {
3             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
4             ComboBox __txtFontFamily = this.GetTemplateChild("txtFontFamily") as ComboBox;
5             __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Name = __txtFontFamily.SelectedItem.ToString();
6         }
7
8         void __txtFontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
9         {
10             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
11             ComboBox __txtFontSize = this.GetTemplateChild("txtFontSize") as ComboBox;
12             __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Size = float.Parse(__txtFontSize.SelectedItem.ToString());
13         }

字體加粗的枚舉比較特殊，類似一個開關：

1         void __btnWeight_Click(object sender, RoutedEventArgs e)
2         {
3             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
4             Button __btnWeight = this.GetTemplateChild("btnWeight") as Button;
5
6             if (__txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Bold == Windows.UI.Text.FormatEffect.On)
7             {
8                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Bold = Windows.UI.Text.FormatEffect.Off;
9             }
10             else
11             {
12                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Bold = Windows.UI.Text.FormatEffect.On;
13             }
14         }
15
16         void __btnStyle_Click(object sender, RoutedEventArgs e)
17         {
18             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
19             Button __btnStyle = this.GetTemplateChild("btnStyle") as Button;
20             if (__txtRichEdit.Document.Selection.FormattedText.CharacterFormat.FontStyle == Windows.UI.Text.FontStyle.Italic)
21             {
22                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.FontStyle = Windows.UI.Text.FontStyle.Normal;
23             }
24             else
25             {
26                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.FontStyle = Windows.UI.Text.FontStyle.Italic;
27             }
28         }
29
30         void __btnUnderline_Click(object sender, RoutedEventArgs e)
31         {
32             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
33             Button __btnUnderline = this.GetTemplateChild("btnUnderline") as Button;
34             if (__txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Underline == Windows.UI.Text.UnderlineType.None)
35             {
36                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Underline = Windows.UI.Text.UnderlineType.Single;
37             }
38             else
39             {
40                 __txtRichEdit.Document.Selection.FormattedText.CharacterFormat.Underline = Windows.UI.Text.UnderlineType.None;
41             }
42         }

使用ParagraphFormat.Alignment設置對齊方式：

1         void __txtAlign_SelectionChanged(object sender, SelectionChangedEventArgs e)
2         {
3             RichEditBox __txtRichEdit = this.GetTemplateChild("txtRichEdit") as RichEditBox;
4             ComboBox __txtAlign = this.GetTemplateChild("txtAlign") as ComboBox;
5             switch (((sender as ComboBox).SelectedItem as ContentControl).Name)
6             {
7                 case "labLeft":
8                     __txtRichEdit.Document.Selection.FormattedText.FormattedText.ParagraphFormat.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
9                     break;
10                 case "labCenter":
11                     __txtRichEdit.Document.Selection.FormattedText.FormattedText.ParagraphFormat.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
12                     break;
13                 case "labRight":
14                     __txtRichEdit.Document.Selection.FormattedText.FormattedText.ParagraphFormat.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
15                     break;
16                 case "labJustify":
17                     __txtRichEdit.Document.Selection.FormattedText.FormattedText.ParagraphFormat.Alignment = Windows.UI.Text.ParagraphAlignment.Justify;
18                     break;
19                 default:
20                     break;
21             }
22         }

設置顏色、插入圖片、視頻等還沒有做好，有些問題，以后慢慢完善。

最終效果：