天天看点

开发WinRT自定义组件之富文本框

富文本框是常用的组件之一,多用于文章排版、用户评论等。

WinRT组件中内置了两个:RichEditBox、RichTextBlock。RichEditBox可以编辑,RichTextBlock只用来显示。

由于内置的组件缺少工具栏,故我准备扩展一下,添加一些常用的功能。

测试代码下载

1、首先创建一个 WinRT 类库项目:

开发WinRT自定义组件之富文本框

2、添加Templated Control:

开发WinRT自定义组件之富文本框

会自动创建Themes文件夹与Generic.xaml文件:

开发WinRT自定义组件之富文本框

其中自定义组件的类中会缺少前缀,手动添加即可:

开发WinRT自定义组件之富文本框

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         }

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

最终效果:

开发WinRT自定义组件之富文本框

转载于:https://www.cnblogs.com/brooks-dotnet/archive/2012/04/10/2441339.html

ui c#