首先说一下从控件基类实现自定控件的步骤:
右击解决方案,新建一个类库项目:新建一个Themes文件夹,在里面添加一个Xaml页面:generic.xaml.删除对应的CS文件.然后再建一个对应的处理控件逻辑的类即可.对应项目结构如图:
自动折行控件的样式设置:
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数据的折行
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.
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
>
|
在后台生成数据:
1
2
3
4
5
6
7
8
|
public
MainPage
(
)
{
this
.
InitializeComponent
(
)
;
string
text
=
"购物清单: 牛奶 咖啡 饼干 苹果 香蕉 苹果 茶叶 蜂蜜 纯净水 猪肉 鲤鱼 牛肉 橙汁 讲解 讲解 详细谢谢 学习下 学习下"
;
scrollableTextBlock1
.
Text
=
text
;
scrollableTextBlock1
.
FontSize
=
30
;
this
.
NavigationCacheMode
=
NavigationCacheMode
.
Required
;
}
|
运行效果如下: