开发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         }

 

设置颜色、插入图片、视频等还没有做好，有些问题，以后慢慢完善。

 

最终效果：