富文本框是常用的组件之一,多用于文章排版、用户评论等。
WinRT组件中内置了两个:RichEditBox、RichTextBlock。RichEditBox可以编辑,RichTextBlock只用来显示。
由于内置的组件缺少工具栏,故我准备扩展一下,添加一些常用的功能。
1、首先创建一个 WinRT 类库项目:
2、添加Templated Control:
会自动创建Themes文件夹与Generic.xaml文件:
其中自定义组件的类中会缺少前缀,手动添加即可:
3、设计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服务:
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中几乎都是异步方法,以后要适应这种风格了:
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 来设置样式。
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 }
字体加粗的枚举比较特殊,类似一个开关:
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设置对齐方式:
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 }
设置颜色、插入图片、视频等还没有做好,有些问题,以后慢慢完善。
最终效果: