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

 

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

 

最终效果：