wp8自定义控件



首先说一下从控件基类实现自定控件的步骤:

右击解决方案,新建一个类库项目:新建一个Themes文件夹,在里面添加一个Xaml页面:generic.xaml.删除对应的CS文件.然后再建一个对应的处理控件逻辑的类即可.对应项目结构如图:

自动折行控件的样式设置:

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< ResourceDictionary      xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns : x = "http://schemas.microsoft.com/winfx/2006/xaml"      xmlns : local = "using:ScrollTB" >        <Style TargetType ="local:ScrollableTextBlock">         <!--设置ScrollableTextBlock的一些基本属性-->         <Setter Property="Foreground" Value=" { StaticResource PhoneForegroundBrush } "/>         <Setter Property=" Background" Value="Transparent"/>         <Setter Property="FontSize" Value="30"/>         <Setter Property="Padding" Value="0"/>            <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="local:ScrollableTextBlock">                     <!--设置ScrollableTextBlock空间的内容样式:ScrollViewer控件是为了可以数据项多了之后可以滑动,StackPanel                     控件是用来作为多个textblock控件的容器,因为每折行一次就需要一个textblock控件-->                     <ScrollViewer x:Name="ScrollViewer" Foreground=" { TemplateBinding Foreground } "                                   Background=" { TemplateBinding Background } " BorderBrush=" { TemplateBinding BorderBrush } "                                   BorderThickness=" { TemplateBinding BorderThickness } " Padding=" { TemplateBinding Padding } ">                         <StackPanel Orientation=" Vertical" x : Name ="StackPanel" />                      </ScrollViewer>                  </ControlTemplate>              </Setter.Value>          </Setter>      </Style> < / ResourceDictionary >

ScrollableTextBlock类通过继承ContentControl类来实现自定义控件:主要是增加text属性,以及处理Text数据的折行

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

namespace ScrollTB {      public class ScrollableTextBlock : ContentControl      {          private StackPanel stackPanel ;            public ScrollableTextBlock ( )          {              DefaultStyleKey = typeof ( ScrollableTextBlock ) ; //必须有,控件就是根据DefaultStyleKey加载generic.xaml文件对应的样式          }            public static readonly DependencyProperty TextProperty =              DependencyProperty . Register (                  "Text" ,                  typeof ( string ) ,                  typeof ( ScrollableTextBlock ) ,                  new PropertyMetadata ( "ScrollableTextBlock" , OnTextPropertyChanged ) ) ;          //增加Text依赖属性 .四个参数依次是 Text依赖属性的属性名称,属性类型,属性所有者类型,属性元数据实例,          public string Text //类似一般属性的访问器          {              get              {                  return ( string ) GetValue ( TextProperty ) ;              }              set              {                  SetValue ( TextProperty , value ) ;              }          }          //处理属性改变事件          private static void OnTextPropertyChanged ( DependencyObject d , DependencyPropertyChangedEventArgs e )          {              ScrollableTextBlock source = ( ScrollableTextBlock ) d ;              string value = ( string ) e . NewValue ;              source . ParseText ( value ) ;          }            protected override void OnApplyTemplate ( ) //每当应用程序代码或内部进程调用ApplyTemplate,都将调用此方法.简单说,就是UI元素在显示前都会调用此方法.          {              base . OnApplyTemplate ( ) ;              this . stackPanel = this . GetTemplateChild ( "StackPanel" ) as StackPanel ;              this . ParseText ( this . Text ) ;          }            private void ParseText ( string value ) //处理文字数据,依据空格折行          {              string [ ] textBlockTexts = value . Split ( ' ' ) ;                if ( this . stackPanel == null )              {                  return ;              }                this . stackPanel . Children . Clear ( ) ;                for ( int i = 0 ; i < textBlockTexts . Length ; i ++ )              {                  TextBlock textBlock = this . GetTextBlock ( ) ;                  textBlock . Text = textBlockTexts [ i ] . ToString ( ) ;                  this . stackPanel . Children . Add ( textBlock ) ;              }          }            private TextBlock GetTextBlock ( ) //生成一个TextBlock控件          {              TextBlock textBlock = new TextBlock ( ) ;              textBlock . TextWrapping = TextWrapping . Wrap ;              textBlock . FontSize = this . FontSize ;              textBlock . FontFamily = this . FontFamily ;              textBlock . FontWeight = this . FontWeight ;              textBlock . Foreground = this . Foreground ;              textBlock . Margin = new Thickness ( 0 , 0 , 0 , 0 ) ;              return textBlock ;          }      } }

然后在主项目中引用自定义控件的项目,并在要使用自定义控件的XAML页面,引入自定义控件类ScrollableTextBlock所在空间ScrollTB.

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< Page      x : Class = "ScrollTextBlock.MainPage"      xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns : x = "http://schemas.microsoft.com/winfx/2006/xaml"      xmlns : local = "using:ScrollTextBlock"      xmlns : d = "http://schemas.microsoft.com/expression/blend/2008"      xmlns : mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"      mc : Ignorable = "d"      Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"      xmlns : my = "using:ScrollTB" >        < Grid x : Name = "LayoutRoot" Background = "Transparent" >          < Grid . RowDefinitions >              < RowDefinition Height = "Auto" / >              < RowDefinition Height = "*" / >          < / Grid . RowDefinitions >    < TextBlock Text = "会根据空格自动折行的TextBlock控件"    / >      < my : ScrollableTextBlock   Grid . Row = "1" Name = "scrollableTextBlock1" / >      < / Grid > < / Page >

在后台生成数据:

C#

1 2 3 4 5 6 7 8

public MainPage ( )          {              this . InitializeComponent ( ) ;              string text = "购物清单: 牛奶 咖啡 饼干 苹果 香蕉 苹果 茶叶 蜂蜜 纯净水 猪肉 鲤鱼 牛肉 橙汁 讲解 讲解 详细谢谢 学习下 学习下" ;              scrollableTextBlock1 . Text = text ;              scrollableTextBlock1 . FontSize = 30 ;              this . NavigationCacheMode = NavigationCacheMode . Required ;          }

运行效果如下: