WPF 你真的会写 XAML 吗？浅谈 ControlTemplate 、DataTemplate 和其它 Tem ...

WPF 你真的会写 XAML 吗？浅谈 ControlTemplate 、DataTemplate 和其它 Template

本文希望从写死的代码慢慢引入 WPF 的一些机制。

一、Button 难题

我们想要修改 Button 的背景色但是效果非常不理想，默认的 Button 样式是完全无法给各人看的，改造 Button 的方法是借助 Style 在 Template 中自界说 ControlTemplate（Style 并不关键）。

1. [/code][indent]Style 在自界说控件的部分并不关键，实际上你完全可以利用 Button.Template 属性展开然后实现同样的效果，但是缺少复用性。
2. [/indent][size=5]二、猿之手/猴爪难题与依赖属性[/size]
4. 固然它现在变得比较好看了，但是这个 Button 样式完满是一个植物人，成了一个赛博手办，好看固然是好看，甚至是可以执行 Click 事件来进行交互的，但是我们本来可以设置  不能用了。
5. 之以是不能用，原因是由于你在 ControlTemplate 的地方确实没有让 Button 的 Background 发挥作用。
6. 这种活动就好像下面的代码一样：
7. [code]private void SayHello(string name)
8. {
9. <Button Width="100" Height="100">
10. <Button
11. <Button
12.     Width="100"
13.     Height="100"
14.     Background="LightGreen"
15.     >
16.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
17. </Button>Width="100"
18. <Button
19.     Width="100"
20.     Height="100"
21.     Background="LightGreen"
22.     >
23.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
24. </Button>Height="100"
25. <Button
26.     Width="100"
27.     Height="100"
28.     Background="LightGreen"
29.     >
30.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
31. </Button>Background="LightGreen"
32. <Button
33.     Width="100"
34.     Height="100"
35.     Background="LightGreen"
36.     >
37.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button>>
39. <Button
40.     Width="100"
41.     Height="100"
42.     Background="LightGreen"
43.     >
44.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
45. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
46. </Button><TextBlock Text="hello, world!" />
47. </Button>Console.WriteLine("hello, world!");
48. }

复制代码

请问，在这个代码片段，一个名为 SayHello 的函数中，参数 name 的意义是什么？
为此，WPF 引入了依赖属性 DependencyProperty 的机制来让它就像函数的参数意义，可以或许为 ControlTemplate 里面的东西带来意义。
在 WPF 的控件中，大部分属性都属于依赖属性，对于 Button 来说，Background 是依赖属性，Content 也是。
我们是必不可少要学习自己创建自界说控件和自界说的依赖属性的，但是在这一部分，我们来看一下如何利用自带的依赖属性为原生控件进行自界说。

1. [/code]总而言之，利用 {TemplateBinding XXX} 对控件的依赖属性进利用用，有的时间直接利用 TemplateBinding 可能无法生效，以是你可以利用下面的平替，下面这种的泛用性会更强，但是没有 TemplateBinding 的写法那么方便，属于是比较 Hack 的写法，我们在后面的介绍中有一处只有它才气实现的效果。
2. [code]

复制代码

三、更好看的样子

当你知道了 Background 和 Content 都是依赖属性之后，我们目前没有做 TextBlock 出现内容的参数化模板绑定，但是我想你也应该知道怎么做了。
你在进行编写的时间，可能会碰到智能提示的问题，你会发现你在为 TextBlock 的 Text 进行绑定的时间，可能会发现你在 VS 的智能提示的小窗里并没有办法找到 Content，这并不是 VS 出现了 BUG，VS 的消极反应也并不是在否定你，我们打算在美化完 UI 后，再来细讲为什么 VS 会如此的不共同，为什么在 TextBlock 的 Text 中绑定 Content 是一个不算对也不算错的活动。

1. [/code]你可以这样利用：
2. [code]

复制代码

四、我们的 IDE 到底在抗拒什么，会不共同我们的 XAML 编写？

在 VS 的 WPF 编辑情况中对于 控件模板 ControlTemplate 和 控件绑定的智能提示来自于 TargetType="Button" 这边对控件的指定，如果没有指定类型，智能提示会完全没有办法给你补全什么有用代码。
我们在写 Background 的时间很顺利但是在 写 Text 的时间碰到了 VS 的阻挠，即便如此我们硬写照旧写出来了。
效果还不错是吧？
你知道吗，WPF 的很多控件是支持嵌套的，就像下面这样：

代码就像这样：

1. <Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button>

复制代码

你会发现你无法为它再赋予 Content 了，编辑器会告诉你属性重复，也就是说，你在 xaml 里面写的 Text 属性为"hello, world!" 的文本块 TextBlock 控件，已经是 Button 的 Content 属性了。
以是，我想要说什么？
Content 这个依赖属性能描述的不但是一个字符串，它实际上能描述一个对象，它的类型实在是 object，我们去看它的界说就可以知道：

1. public object Content { get; set; }

复制代码

正是由于 Content 是 object 类型，而 Text 属性吸收的要求是 string 字符串，以是 VS 在智能提示的时间并不认为它们俩符合，以是我们在智能提示的时间根本找不到它。
那，为什么我们直接写照旧可以或许生效？
对于 Text 这种字符串类型来说，我们恰恰传的是 string 字符串这个对象，瞎猫碰上死耗子，自然就没有发现问题。
以是，如果我们的自界说样式有内部嵌套的对象，它在利用 TemplateBinding 写法的我们的样式里，是完全没有反应的。
如果说你真的要让只能吸收到 string 的 Text 依赖属性，被迫吃下那么一坨，不就是 object 吗，只要是个 object ，利用 ToString() 转成字符串不就好了么。于是，你可以利用上文提到的那种非常冗长的写法。
于是就会有这样的效果：

1. [/code][code]<Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button>

复制代码

五、真正的 Button

为了实现 Button 内部控件的嵌套和对象的嵌套出现，用我们目前的 TextBlock 来出现内容是完全不可取的。
实际上一个标准的 Button 实现会利用 ContentPresenter 来出现，ContentPresenter 本身具备的 Content 依赖属性才是 Button 的 Content 的依赖属性最终的去处。

1. [/code]这个样式的效果是这样的：
2. [align=center][img]https://img2024.cnblogs.com/blog/2411090/202503/2411090-20250321115144483-438595568.png[/img][/align]
3. 代码：
4. [code]<Button Width="100" Height="100">
5. <Button
6. <Button
7.     Width="100"
8.     Height="100"
9.     Background="LightGreen"
10.     >
11.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
12. </Button>Width="100"
13. <Button
14.     Width="100"
15.     Height="100"
16.     Background="LightGreen"
17.     >
18.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
19. </Button>Height="100"
20. <Button
21.     Width="100"
22.     Height="100"
23.     Background="LightGreen"
24.     >
25.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
26. </Button>Background="LightGreen"
27. <Button
28.     Width="100"
29.     Height="100"
30.     Background="LightGreen"
31.     >
32.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
33. </Button>>
34. <Button
35.     Width="100"
36.     Height="100"
37.     Background="LightGreen"
38.     >
39.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
40. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
41. </Button><TextBlock Text="hello, world!" />
42. </Button>

复制代码

六、Content object 的样子

1. 若我掏出自界说对象，你该如何应对？

我们现在能知道的是，对于字符串类型的 Content 会显示一串文字，如果填入的是控件内容，它会显示控件 UI 的样子，用来为按钮创建图标等相干需求的时间会非常有用。
可是，object 也就意味着是所有类型，我们自己的 class 实例对象给它会是什么样子？
让我们在 Button 初始化的时间在 C# Code-Behind 代码的部分创建一些内容吧！
这是我们自界说的类：

1. public class Person{<Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button>public string Name { get; set; }<Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button>public int Age { get; set; }}

复制代码

请注意 xaml 中关于 Loaded="Button_Loaded" 的部分。

1. [/code]这是事件订阅后要执行的事情。
2. [code]private void Button_Loaded(object sender, RoutedEventArgs e){<Button Width="100" Height="100">
3. <Button
4. <Button
5.     Width="100"
6.     Height="100"
7.     Background="LightGreen"
8.     >
9.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
10. </Button>Width="100"
11. <Button
12.     Width="100"
13.     Height="100"
14.     Background="LightGreen"
15.     >
16.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
17. </Button>Height="100"
18. <Button
19.     Width="100"
20.     Height="100"
21.     Background="LightGreen"
22.     >
23.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
24. </Button>Background="LightGreen"
25. <Button
26.     Width="100"
27.     Height="100"
28.     Background="LightGreen"
29.     >
30.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
31. </Button>>
32. <Button
33.     Width="100"
34.     Height="100"
35.     Background="LightGreen"
36.     >
37.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
39. </Button><TextBlock Text="hello, world!" />
40. </Button>var button = sender as Button;<Button Width="100" Height="100">
41. <Button
42. <Button
43.     Width="100"
44.     Height="100"
45.     Background="LightGreen"
46.     >
47.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
48. </Button>Width="100"
49. <Button
50.     Width="100"
51.     Height="100"
52.     Background="LightGreen"
53.     >
54.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
55. </Button>Height="100"
56. <Button
57.     Width="100"
58.     Height="100"
59.     Background="LightGreen"
60.     >
61.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
62. </Button>Background="LightGreen"
63. <Button
64.     Width="100"
65.     Height="100"
66.     Background="LightGreen"
67.     >
68.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
69. </Button>>
70. <Button
71.     Width="100"
72.     Height="100"
73.     Background="LightGreen"
74.     >
75.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
77. </Button><TextBlock Text="hello, world!" />
78. </Button>if (button is null) return;<Button Width="100" Height="100">
79. <Button
80. <Button
81.     Width="100"
82.     Height="100"
83.     Background="LightGreen"
84.     >
85.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
86. </Button>Width="100"
87. <Button
88.     Width="100"
89.     Height="100"
90.     Background="LightGreen"
91.     >
92.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
93. </Button>Height="100"
94. <Button
95.     Width="100"
96.     Height="100"
97.     Background="LightGreen"
98.     >
99.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
100. </Button>Background="LightGreen"
101. <Button
102.     Width="100"
103.     Height="100"
104.     Background="LightGreen"
105.     >
106.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
107. </Button>>
108. <Button
109.     Width="100"
110.     Height="100"
111.     Background="LightGreen"
112.     >
113.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
115. </Button><TextBlock Text="hello, world!" />
116. </Button>// 固然可以写成 button!.Content 但是怕各位看不懂<Button Width="100" Height="100">
117. <Button
118. <Button
119.     Width="100"
120.     Height="100"
121.     Background="LightGreen"
122.     >
123.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
124. </Button>Width="100"
125. <Button
126.     Width="100"
127.     Height="100"
128.     Background="LightGreen"
129.     >
130.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
131. </Button>Height="100"
132. <Button
133.     Width="100"
134.     Height="100"
135.     Background="LightGreen"
136.     >
137.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
138. </Button>Background="LightGreen"
139. <Button
140.     Width="100"
141.     Height="100"
142.     Background="LightGreen"
143.     >
144.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
145. </Button>>
146. <Button
147.     Width="100"
148.     Height="100"
149.     Background="LightGreen"
150.     >
151.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
153. </Button><TextBlock Text="hello, world!" />
154. </Button>button.Content = new Person() { Name = "小明", Age = 18 };}

复制代码

这是效果：

由于我们的项目叫做 WPFPlayground，以是 Person 这个对象被 ToString()后得到的结果是 WPFPlayground.Person 由于尺寸有限以是目前出现的是这样。
我们希望把信息显示出来，你可以这样完善 Person 的内容：

1. public class Person{<Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button>public string Name { get; set; }<Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button>public int Age { get; set; }<Button Width="100" Height="100">
78. <Button
79. <Button
80.     Width="100"
81.     Height="100"
82.     Background="LightGreen"
83.     >
84.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
85. </Button>Width="100"
86. <Button
87.     Width="100"
88.     Height="100"
89.     Background="LightGreen"
90.     >
91.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
92. </Button>Height="100"
93. <Button
94.     Width="100"
95.     Height="100"
96.     Background="LightGreen"
97.     >
98.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
99. </Button>Background="LightGreen"
100. <Button
101.     Width="100"
102.     Height="100"
103.     Background="LightGreen"
104.     >
105.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
106. </Button>>
107. <Button
108.     Width="100"
109.     Height="100"
110.     Background="LightGreen"
111.     >
112.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
113. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Text="hello, world!" />
115. </Button>public override string ToString()<Button Width="100" Height="100">
116. <Button
117. <Button
118.     Width="100"
119.     Height="100"
120.     Background="LightGreen"
121.     >
122.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
123. </Button>Width="100"
124. <Button
125.     Width="100"
126.     Height="100"
127.     Background="LightGreen"
128.     >
129.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
130. </Button>Height="100"
131. <Button
132.     Width="100"
133.     Height="100"
134.     Background="LightGreen"
135.     >
136.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
137. </Button>Background="LightGreen"
138. <Button
139.     Width="100"
140.     Height="100"
141.     Background="LightGreen"
142.     >
143.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
144. </Button>>
145. <Button
146.     Width="100"
147.     Height="100"
148.     Background="LightGreen"
149.     >
150.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
151. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Text="hello, world!" />
153. </Button>{<Button Width="100" Height="100">
154. <Button
155. <Button
156.     Width="100"
157.     Height="100"
158.     Background="LightGreen"
159.     >
160.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
161. </Button>Width="100"
162. <Button
163.     Width="100"
164.     Height="100"
165.     Background="LightGreen"
166.     >
167.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
168. </Button>Height="100"
169. <Button
170.     Width="100"
171.     Height="100"
172.     Background="LightGreen"
173.     >
174.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
175. </Button>Background="LightGreen"
176. <Button
177.     Width="100"
178.     Height="100"
179.     Background="LightGreen"
180.     >
181.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
182. </Button>>
183. <Button
184.     Width="100"
185.     Height="100"
186.     Background="LightGreen"
187.     >
188.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
189. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
190. </Button><TextBlock Text="hello, world!" />
191. </Button><Button Width="100" Height="100">
192. <Button
193. <Button
194.     Width="100"
195.     Height="100"
196.     Background="LightGreen"
197.     >
198.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
199. </Button>Width="100"
200. <Button
201.     Width="100"
202.     Height="100"
203.     Background="LightGreen"
204.     >
205.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
206. </Button>Height="100"
207. <Button
208.     Width="100"
209.     Height="100"
210.     Background="LightGreen"
211.     >
212.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
213. </Button>Background="LightGreen"
214. <Button
215.     Width="100"
216.     Height="100"
217.     Background="LightGreen"
218.     >
219.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
220. </Button>>
221. <Button
222.     Width="100"
223.     Height="100"
224.     Background="LightGreen"
225.     >
226.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
227. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
228. </Button><TextBlock Text="hello, world!" />
229. </Button>return $"{Name}: {Age} !!!!!";<Button Width="100" Height="100">
230. <Button
231. <Button
232.     Width="100"
233.     Height="100"
234.     Background="LightGreen"
235.     >
236.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
237. </Button>Width="100"
238. <Button
239.     Width="100"
240.     Height="100"
241.     Background="LightGreen"
242.     >
243.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
244. </Button>Height="100"
245. <Button
246.     Width="100"
247.     Height="100"
248.     Background="LightGreen"
249.     >
250.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
251. </Button>Background="LightGreen"
252. <Button
253.     Width="100"
254.     Height="100"
255.     Background="LightGreen"
256.     >
257.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
258. </Button>>
259. <Button
260.     Width="100"
261.     Height="100"
262.     Background="LightGreen"
263.     >
264.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
265. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
266. </Button><TextBlock Text="hello, world!" />
267. </Button>}}

复制代码

效果就会变成这样：

2. 若我想要给这个数据自界说表面，你又该如何应对？

但是有的时间，我们希望出现的数据也是有布局和 UI 的。
由于自界说数据的属性并不是依赖属性，以是上面在控件模板中介绍的那些方法，TemplateBinding 之类的做法在这边就完全失效了。
面对这个数据的表面界说，你要利用 ContentTemplate 来做。
当然，ContentTemplate 内容模板和 ControlTemplate 控件模板长得很像，但是不一样的概念，ContentTemplate 和 Content 是一对内容，相互共同才气实现最好的效果，作为 Content 的好兄弟，ContentTemplate 自然也是依赖属性，在 ContentPresenter 中发挥作用。
我们说了这么多话，到底想要说什么？
我想说的是，光写 Button 中的 ContentTemplate 是没有用的，由于实际负担工作的是 你的 ControlTemplate 控件模板的 ContentPresenter，你需要把这个依赖属性作为参数传递进去，写成这个样子：

1. [/code]然后，我们将开始面对 DataTemplate 了。
2. 我们为 Button 在更新了 Style 后，编写了对应的 ContentTemplate。
3. ContentTemplate 的类型是 DataTemplate，集合容器所采用的 ItemTemplate 类型也是 DataTemplate 实在也是 DataTemplate，由于此中的原理实在就是每一项套了一个 ContentPresenter 内容出现器。
4. [code]<Button Width="100" Height="100">
5. <Button
6. <Button
7.     Width="100"
8.     Height="100"
9.     Background="LightGreen"
10.     >
11.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
12. </Button>Width="100"
13. <Button
14.     Width="100"
15.     Height="100"
16.     Background="LightGreen"
17.     >
18.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
19. </Button>Height="100"
20. <Button
21.     Width="100"
22.     Height="100"
23.     Background="LightGreen"
24.     >
25.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
26. </Button>Background="LightGreen"
27. <Button
28.     Width="100"
29.     Height="100"
30.     Background="LightGreen"
31.     >
32.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
33. </Button>>
34. <Button
35.     Width="100"
36.     Height="100"
37.     Background="LightGreen"
38.     >
39.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
40. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
41. </Button><TextBlock Text="hello, world!" />
42. </Button><Button Width="100" Height="100">
43. <Button
44. <Button
45.     Width="100"
46.     Height="100"
47.     Background="LightGreen"
48.     >
49.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
50. </Button>Width="100"
51. <Button
52.     Width="100"
53.     Height="100"
54.     Background="LightGreen"
55.     >
56.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
57. </Button>Height="100"
58. <Button
59.     Width="100"
60.     Height="100"
61.     Background="LightGreen"
62.     >
63.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
64. </Button>Background="LightGreen"
65. <Button
66.     Width="100"
67.     Height="100"
68.     Background="LightGreen"
69.     >
70.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
71. </Button>>
72. <Button
73.     Width="100"
74.     Height="100"
75.     Background="LightGreen"
76.     >
77.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
78. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
79. </Button><TextBlock Text="hello, world!" />
80. </Button><Button Width="100" Height="100">
81. <Button
82. <Button
83.     Width="100"
84.     Height="100"
85.     Background="LightGreen"
86.     >
87.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
88. </Button>Width="100"
89. <Button
90.     Width="100"
91.     Height="100"
92.     Background="LightGreen"
93.     >
94.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
95. </Button>Height="100"
96. <Button
97.     Width="100"
98.     Height="100"
99.     Background="LightGreen"
100.     >
101.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
102. </Button>Background="LightGreen"
103. <Button
104.     Width="100"
105.     Height="100"
106.     Background="LightGreen"
107.     >
108.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
109. </Button>>
110. <Button
111.     Width="100"
112.     Height="100"
113.     Background="LightGreen"
114.     >
115.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
116. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
117. </Button><TextBlock Text="hello, world!" />
118. </Button><Button Width="100" Height="100">
119. <Button
120. <Button
121.     Width="100"
122.     Height="100"
123.     Background="LightGreen"
124.     >
125.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
126. </Button>Width="100"
127. <Button
128.     Width="100"
129.     Height="100"
130.     Background="LightGreen"
131.     >
132.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
133. </Button>Height="100"
134. <Button
135.     Width="100"
136.     Height="100"
137.     Background="LightGreen"
138.     >
139.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
140. </Button>Background="LightGreen"
141. <Button
142.     Width="100"
143.     Height="100"
144.     Background="LightGreen"
145.     >
146.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
147. </Button>>
148. <Button
149.     Width="100"
150.     Height="100"
151.     Background="LightGreen"
152.     >
153.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
154. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
155. </Button><TextBlock Text="hello, world!" />
156. </Button><Button Width="100" Height="100">
157. <Button
158. <Button
159.     Width="100"
160.     Height="100"
161.     Background="LightGreen"
162.     >
163.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
164. </Button>Width="100"
165. <Button
166.     Width="100"
167.     Height="100"
168.     Background="LightGreen"
169.     >
170.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
171. </Button>Height="100"
172. <Button
173.     Width="100"
174.     Height="100"
175.     Background="LightGreen"
176.     >
177.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
178. </Button>Background="LightGreen"
179. <Button
180.     Width="100"
181.     Height="100"
182.     Background="LightGreen"
183.     >
184.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
185. </Button>>
186. <Button
187.     Width="100"
188.     Height="100"
189.     Background="LightGreen"
190.     >
191.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
192. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
193. </Button><TextBlock Text="hello, world!" />
194. </Button><Button Width="100" Height="100">
195. <Button
196. <Button
197.     Width="100"
198.     Height="100"
199.     Background="LightGreen"
200.     >
201.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
202. </Button>Width="100"
203. <Button
204.     Width="100"
205.     Height="100"
206.     Background="LightGreen"
207.     >
208.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
209. </Button>Height="100"
210. <Button
211.     Width="100"
212.     Height="100"
213.     Background="LightGreen"
214.     >
215.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
216. </Button>Background="LightGreen"
217. <Button
218.     Width="100"
219.     Height="100"
220.     Background="LightGreen"
221.     >
222.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
223. </Button>>
224. <Button
225.     Width="100"
226.     Height="100"
227.     Background="LightGreen"
228.     >
229.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
230. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
231. </Button><TextBlock Text="hello, world!" />
232. </Button><Button Width="100" Height="100">
233. <Button
234. <Button
235.     Width="100"
236.     Height="100"
237.     Background="LightGreen"
238.     >
239.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
240. </Button>Width="100"
241. <Button
242.     Width="100"
243.     Height="100"
244.     Background="LightGreen"
245.     >
246.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
247. </Button>Height="100"
248. <Button
249.     Width="100"
250.     Height="100"
251.     Background="LightGreen"
252.     >
253.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
254. </Button>Background="LightGreen"
255. <Button
256.     Width="100"
257.     Height="100"
258.     Background="LightGreen"
259.     >
260.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
261. </Button>>
262. <Button
263.     Width="100"
264.     Height="100"
265.     Background="LightGreen"
266.     >
267.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
268. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
269. </Button><TextBlock Text="hello, world!" />
270. </Button><Button Width="100" Height="100">
271. <Button
272. <Button
273.     Width="100"
274.     Height="100"
275.     Background="LightGreen"
276.     >
277.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
278. </Button>Width="100"
279. <Button
280.     Width="100"
281.     Height="100"
282.     Background="LightGreen"
283.     >
284.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
285. </Button>Height="100"
286. <Button
287.     Width="100"
288.     Height="100"
289.     Background="LightGreen"
290.     >
291.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
292. </Button>Background="LightGreen"
293. <Button
294.     Width="100"
295.     Height="100"
296.     Background="LightGreen"
297.     >
298.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
299. </Button>>
300. <Button
301.     Width="100"
302.     Height="100"
303.     Background="LightGreen"
304.     >
305.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
306. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
307. </Button><TextBlock Text="hello, world!" />
308. </Button><Button Width="100" Height="100">
309. <Button
310. <Button
311.     Width="100"
312.     Height="100"
313.     Background="LightGreen"
314.     >
315.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
316. </Button>Width="100"
317. <Button
318.     Width="100"
319.     Height="100"
320.     Background="LightGreen"
321.     >
322.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
323. </Button>Height="100"
324. <Button
325.     Width="100"
326.     Height="100"
327.     Background="LightGreen"
328.     >
329.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
330. </Button>Background="LightGreen"
331. <Button
332.     Width="100"
333.     Height="100"
334.     Background="LightGreen"
335.     >
336.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
337. </Button>>
338. <Button
339.     Width="100"
340.     Height="100"
341.     Background="LightGreen"
342.     >
343.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
344. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
345. </Button><TextBlock Text="hello, world!" />
346. </Button><Button Width="100" Height="100">
347. <Button
348. <Button
349.     Width="100"
350.     Height="100"
351.     Background="LightGreen"
352.     >
353.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
354. </Button>Width="100"
355. <Button
356.     Width="100"
357.     Height="100"
358.     Background="LightGreen"
359.     >
360.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
361. </Button>Height="100"
362. <Button
363.     Width="100"
364.     Height="100"
365.     Background="LightGreen"
366.     >
367.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
368. </Button>Background="LightGreen"
369. <Button
370.     Width="100"
371.     Height="100"
372.     Background="LightGreen"
373.     >
374.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
375. </Button>>
376. <Button
377.     Width="100"
378.     Height="100"
379.     Background="LightGreen"
380.     >
381.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
382. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
383. </Button><TextBlock Text="hello, world!" />
384. </Button><Button Width="100" Height="100">
385. <Button
386. <Button
387.     Width="100"
388.     Height="100"
389.     Background="LightGreen"
390.     >
391.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
392. </Button>Width="100"
393. <Button
394.     Width="100"
395.     Height="100"
396.     Background="LightGreen"
397.     >
398.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
399. </Button>Height="100"
400. <Button
401.     Width="100"
402.     Height="100"
403.     Background="LightGreen"
404.     >
405.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
406. </Button>Background="LightGreen"
407. <Button
408.     Width="100"
409.     Height="100"
410.     Background="LightGreen"
411.     >
412.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
413. </Button>>
414. <Button
415.     Width="100"
416.     Height="100"
417.     Background="LightGreen"
418.     >
419.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
420. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
421. </Button><TextBlock Text="hello, world!" />
422. </Button><Button Width="100" Height="100">
423. <Button
424. <Button
425.     Width="100"
426.     Height="100"
427.     Background="LightGreen"
428.     >
429.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
430. </Button>Width="100"
431. <Button
432.     Width="100"
433.     Height="100"
434.     Background="LightGreen"
435.     >
436.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
437. </Button>Height="100"
438. <Button
439.     Width="100"
440.     Height="100"
441.     Background="LightGreen"
442.     >
443.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
444. </Button>Background="LightGreen"
445. <Button
446.     Width="100"
447.     Height="100"
448.     Background="LightGreen"
449.     >
450.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
451. </Button>>
452. <Button
453.     Width="100"
454.     Height="100"
455.     Background="LightGreen"
456.     >
457.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
458. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
459. </Button><TextBlock Text="hello, world!" />
460. </Button><Button Width="100" Height="100">
461. <Button
462. <Button
463.     Width="100"
464.     Height="100"
465.     Background="LightGreen"
466.     >
467.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
468. </Button>Width="100"
469. <Button
470.     Width="100"
471.     Height="100"
472.     Background="LightGreen"
473.     >
474.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
475. </Button>Height="100"
476. <Button
477.     Width="100"
478.     Height="100"
479.     Background="LightGreen"
480.     >
481.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
482. </Button>Background="LightGreen"
483. <Button
484.     Width="100"
485.     Height="100"
486.     Background="LightGreen"
487.     >
488.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
489. </Button>>
490. <Button
491.     Width="100"
492.     Height="100"
493.     Background="LightGreen"
494.     >
495.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
496. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
497. </Button><TextBlock Text="hello, world!" />
498. </Button><Button Width="100" Height="100">
499. <Button
500. <Button
501.     Width="100"
502.     Height="100"
503.     Background="LightGreen"
504.     >
505.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
506. </Button>Width="100"
507. <Button
508.     Width="100"
509.     Height="100"
510.     Background="LightGreen"
511.     >
512.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
513. </Button>Height="100"
514. <Button
515.     Width="100"
516.     Height="100"
517.     Background="LightGreen"
518.     >
519.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
520. </Button>Background="LightGreen"
521. <Button
522.     Width="100"
523.     Height="100"
524.     Background="LightGreen"
525.     >
526.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
527. </Button>>
528. <Button
529.     Width="100"
530.     Height="100"
531.     Background="LightGreen"
532.     >
533.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
534. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
535. </Button><TextBlock Text="hello, world!" />
536. </Button><Button Width="100" Height="100">
537. <Button
538. <Button
539.     Width="100"
540.     Height="100"
541.     Background="LightGreen"
542.     >
543.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
544. </Button>Width="100"
545. <Button
546.     Width="100"
547.     Height="100"
548.     Background="LightGreen"
549.     >
550.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
551. </Button>Height="100"
552. <Button
553.     Width="100"
554.     Height="100"
555.     Background="LightGreen"
556.     >
557.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
558. </Button>Background="LightGreen"
559. <Button
560.     Width="100"
561.     Height="100"
562.     Background="LightGreen"
563.     >
564.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
565. </Button>>
566. <Button
567.     Width="100"
568.     Height="100"
569.     Background="LightGreen"
570.     >
571.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
572. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
573. </Button><TextBlock Text="hello, world!" />
574. </Button><Button Width="100" Height="100">
575. <Button
576. <Button
577.     Width="100"
578.     Height="100"
579.     Background="LightGreen"
580.     >
581.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
582. </Button>Width="100"
583. <Button
584.     Width="100"
585.     Height="100"
586.     Background="LightGreen"
587.     >
588.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
589. </Button>Height="100"
590. <Button
591.     Width="100"
592.     Height="100"
593.     Background="LightGreen"
594.     >
595.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
596. </Button>Background="LightGreen"
597. <Button
598.     Width="100"
599.     Height="100"
600.     Background="LightGreen"
601.     >
602.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
603. </Button>>
604. <Button
605.     Width="100"
606.     Height="100"
607.     Background="LightGreen"
608.     >
609.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
610. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
611. </Button><TextBlock Text="hello, world!" />
612. </Button><Button Width="100" Height="100">
613. <Button
614. <Button
615.     Width="100"
616.     Height="100"
617.     Background="LightGreen"
618.     >
619.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
620. </Button>Width="100"
621. <Button
622.     Width="100"
623.     Height="100"
624.     Background="LightGreen"
625.     >
626.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
627. </Button>Height="100"
628. <Button
629.     Width="100"
630.     Height="100"
631.     Background="LightGreen"
632.     >
633.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
634. </Button>Background="LightGreen"
635. <Button
636.     Width="100"
637.     Height="100"
638.     Background="LightGreen"
639.     >
640.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
641. </Button>>
642. <Button
643.     Width="100"
644.     Height="100"
645.     Background="LightGreen"
646.     >
647.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
648. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
649. </Button><TextBlock Text="hello, world!" />
650. </Button><Button Width="100" Height="100">
651. <Button
652. <Button
653.     Width="100"
654.     Height="100"
655.     Background="LightGreen"
656.     >
657.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
658. </Button>Width="100"
659. <Button
660.     Width="100"
661.     Height="100"
662.     Background="LightGreen"
663.     >
664.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
665. </Button>Height="100"
666. <Button
667.     Width="100"
668.     Height="100"
669.     Background="LightGreen"
670.     >
671.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
672. </Button>Background="LightGreen"
673. <Button
674.     Width="100"
675.     Height="100"
676.     Background="LightGreen"
677.     >
678.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
679. </Button>>
680. <Button
681.     Width="100"
682.     Height="100"
683.     Background="LightGreen"
684.     >
685.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
686. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
687. </Button><TextBlock Text="hello, world!" />
688. </Button><Button Width="100" Height="100">
689. <Button
690. <Button
691.     Width="100"
692.     Height="100"
693.     Background="LightGreen"
694.     >
695.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
696. </Button>Width="100"
697. <Button
698.     Width="100"
699.     Height="100"
700.     Background="LightGreen"
701.     >
702.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
703. </Button>Height="100"
704. <Button
705.     Width="100"
706.     Height="100"
707.     Background="LightGreen"
708.     >
709.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
710. </Button>Background="LightGreen"
711. <Button
712.     Width="100"
713.     Height="100"
714.     Background="LightGreen"
715.     >
716.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
717. </Button>>
718. <Button
719.     Width="100"
720.     Height="100"
721.     Background="LightGreen"
722.     >
723.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
724. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
725. </Button><TextBlock Text="hello, world!" />
726. </Button><Button Width="100" Height="100">
727. <Button
728. <Button
729.     Width="100"
730.     Height="100"
731.     Background="LightGreen"
732.     >
733.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
734. </Button>Width="100"
735. <Button
736.     Width="100"
737.     Height="100"
738.     Background="LightGreen"
739.     >
740.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
741. </Button>Height="100"
742. <Button
743.     Width="100"
744.     Height="100"
745.     Background="LightGreen"
746.     >
747.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
748. </Button>Background="LightGreen"
749. <Button
750.     Width="100"
751.     Height="100"
752.     Background="LightGreen"
753.     >
754.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
755. </Button>>
756. <Button
757.     Width="100"
758.     Height="100"
759.     Background="LightGreen"
760.     >
761.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
762. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
763. </Button><TextBlock Text="hello, world!" />
764. </Button>

复制代码

会变成这样的效果：

于是，在控件和主题上，你可以为 ControlTemplate 方面打一个坚实的底子用于项目风格的复用，而在自界说数据特别是业务数据的出现上，以 ContentTemplate 为代表的 DataTemplate，会为你带来业务上的拓展性。
七、所谓集合面板 ItemsControl、ListBox

1. 每一项的表面样子利用 ItemTemplate 界说

我们来创建一个毫无关照能力，只是好看的 ViewModel，并不实现 INotifyPropertyChanged。

1. public class MainViewModel{<Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button>public List Persons { get; set; }<Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button>public MainViewModel()<Button Width="100" Height="100">
78. <Button
79. <Button
80.     Width="100"
81.     Height="100"
82.     Background="LightGreen"
83.     >
84.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
85. </Button>Width="100"
86. <Button
87.     Width="100"
88.     Height="100"
89.     Background="LightGreen"
90.     >
91.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
92. </Button>Height="100"
93. <Button
94.     Width="100"
95.     Height="100"
96.     Background="LightGreen"
97.     >
98.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
99. </Button>Background="LightGreen"
100. <Button
101.     Width="100"
102.     Height="100"
103.     Background="LightGreen"
104.     >
105.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
106. </Button>>
107. <Button
108.     Width="100"
109.     Height="100"
110.     Background="LightGreen"
111.     >
112.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
113. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Text="hello, world!" />
115. </Button>{<Button Width="100" Height="100">
116. <Button
117. <Button
118.     Width="100"
119.     Height="100"
120.     Background="LightGreen"
121.     >
122.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
123. </Button>Width="100"
124. <Button
125.     Width="100"
126.     Height="100"
127.     Background="LightGreen"
128.     >
129.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
130. </Button>Height="100"
131. <Button
132.     Width="100"
133.     Height="100"
134.     Background="LightGreen"
135.     >
136.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
137. </Button>Background="LightGreen"
138. <Button
139.     Width="100"
140.     Height="100"
141.     Background="LightGreen"
142.     >
143.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
144. </Button>>
145. <Button
146.     Width="100"
147.     Height="100"
148.     Background="LightGreen"
149.     >
150.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
151. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Text="hello, world!" />
153. </Button><Button Width="100" Height="100">
154. <Button
155. <Button
156.     Width="100"
157.     Height="100"
158.     Background="LightGreen"
159.     >
160.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
161. </Button>Width="100"
162. <Button
163.     Width="100"
164.     Height="100"
165.     Background="LightGreen"
166.     >
167.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
168. </Button>Height="100"
169. <Button
170.     Width="100"
171.     Height="100"
172.     Background="LightGreen"
173.     >
174.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
175. </Button>Background="LightGreen"
176. <Button
177.     Width="100"
178.     Height="100"
179.     Background="LightGreen"
180.     >
181.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
182. </Button>>
183. <Button
184.     Width="100"
185.     Height="100"
186.     Background="LightGreen"
187.     >
188.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
189. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
190. </Button><TextBlock Text="hello, world!" />
191. </Button>Persons = new List()<Button Width="100" Height="100">
192. <Button
193. <Button
194.     Width="100"
195.     Height="100"
196.     Background="LightGreen"
197.     >
198.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
199. </Button>Width="100"
200. <Button
201.     Width="100"
202.     Height="100"
203.     Background="LightGreen"
204.     >
205.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
206. </Button>Height="100"
207. <Button
208.     Width="100"
209.     Height="100"
210.     Background="LightGreen"
211.     >
212.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
213. </Button>Background="LightGreen"
214. <Button
215.     Width="100"
216.     Height="100"
217.     Background="LightGreen"
218.     >
219.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
220. </Button>>
221. <Button
222.     Width="100"
223.     Height="100"
224.     Background="LightGreen"
225.     >
226.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
227. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
228. </Button><TextBlock Text="hello, world!" />
229. </Button><Button Width="100" Height="100">
230. <Button
231. <Button
232.     Width="100"
233.     Height="100"
234.     Background="LightGreen"
235.     >
236.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
237. </Button>Width="100"
238. <Button
239.     Width="100"
240.     Height="100"
241.     Background="LightGreen"
242.     >
243.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
244. </Button>Height="100"
245. <Button
246.     Width="100"
247.     Height="100"
248.     Background="LightGreen"
249.     >
250.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
251. </Button>Background="LightGreen"
252. <Button
253.     Width="100"
254.     Height="100"
255.     Background="LightGreen"
256.     >
257.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
258. </Button>>
259. <Button
260.     Width="100"
261.     Height="100"
262.     Background="LightGreen"
263.     >
264.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
265. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
266. </Button><TextBlock Text="hello, world!" />
267. </Button>{<Button Width="100" Height="100">
268. <Button
269. <Button
270.     Width="100"
271.     Height="100"
272.     Background="LightGreen"
273.     >
274.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
275. </Button>Width="100"
276. <Button
277.     Width="100"
278.     Height="100"
279.     Background="LightGreen"
280.     >
281.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
282. </Button>Height="100"
283. <Button
284.     Width="100"
285.     Height="100"
286.     Background="LightGreen"
287.     >
288.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
289. </Button>Background="LightGreen"
290. <Button
291.     Width="100"
292.     Height="100"
293.     Background="LightGreen"
294.     >
295.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
296. </Button>>
297. <Button
298.     Width="100"
299.     Height="100"
300.     Background="LightGreen"
301.     >
302.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
303. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
304. </Button><TextBlock Text="hello, world!" />
305. </Button><Button Width="100" Height="100">
306. <Button
307. <Button
308.     Width="100"
309.     Height="100"
310.     Background="LightGreen"
311.     >
312.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
313. </Button>Width="100"
314. <Button
315.     Width="100"
316.     Height="100"
317.     Background="LightGreen"
318.     >
319.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
320. </Button>Height="100"
321. <Button
322.     Width="100"
323.     Height="100"
324.     Background="LightGreen"
325.     >
326.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
327. </Button>Background="LightGreen"
328. <Button
329.     Width="100"
330.     Height="100"
331.     Background="LightGreen"
332.     >
333.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
334. </Button>>
335. <Button
336.     Width="100"
337.     Height="100"
338.     Background="LightGreen"
339.     >
340.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
341. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
342. </Button><TextBlock Text="hello, world!" />
343. </Button><Button Width="100" Height="100">
344. <Button
345. <Button
346.     Width="100"
347.     Height="100"
348.     Background="LightGreen"
349.     >
350.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
351. </Button>Width="100"
352. <Button
353.     Width="100"
354.     Height="100"
355.     Background="LightGreen"
356.     >
357.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
358. </Button>Height="100"
359. <Button
360.     Width="100"
361.     Height="100"
362.     Background="LightGreen"
363.     >
364.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
365. </Button>Background="LightGreen"
366. <Button
367.     Width="100"
368.     Height="100"
369.     Background="LightGreen"
370.     >
371.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
372. </Button>>
373. <Button
374.     Width="100"
375.     Height="100"
376.     Background="LightGreen"
377.     >
378.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
379. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
380. </Button><TextBlock Text="hello, world!" />
381. </Button>new Person(){ Name = "小明", Age = 18},<Button Width="100" Height="100">
382. <Button
383. <Button
384.     Width="100"
385.     Height="100"
386.     Background="LightGreen"
387.     >
388.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
389. </Button>Width="100"
390. <Button
391.     Width="100"
392.     Height="100"
393.     Background="LightGreen"
394.     >
395.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
396. </Button>Height="100"
397. <Button
398.     Width="100"
399.     Height="100"
400.     Background="LightGreen"
401.     >
402.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
403. </Button>Background="LightGreen"
404. <Button
405.     Width="100"
406.     Height="100"
407.     Background="LightGreen"
408.     >
409.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
410. </Button>>
411. <Button
412.     Width="100"
413.     Height="100"
414.     Background="LightGreen"
415.     >
416.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
417. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
418. </Button><TextBlock Text="hello, world!" />
419. </Button><Button Width="100" Height="100">
420. <Button
421. <Button
422.     Width="100"
423.     Height="100"
424.     Background="LightGreen"
425.     >
426.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
427. </Button>Width="100"
428. <Button
429.     Width="100"
430.     Height="100"
431.     Background="LightGreen"
432.     >
433.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
434. </Button>Height="100"
435. <Button
436.     Width="100"
437.     Height="100"
438.     Background="LightGreen"
439.     >
440.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
441. </Button>Background="LightGreen"
442. <Button
443.     Width="100"
444.     Height="100"
445.     Background="LightGreen"
446.     >
447.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
448. </Button>>
449. <Button
450.     Width="100"
451.     Height="100"
452.     Background="LightGreen"
453.     >
454.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
455. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
456. </Button><TextBlock Text="hello, world!" />
457. </Button><Button Width="100" Height="100">
458. <Button
459. <Button
460.     Width="100"
461.     Height="100"
462.     Background="LightGreen"
463.     >
464.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
465. </Button>Width="100"
466. <Button
467.     Width="100"
468.     Height="100"
469.     Background="LightGreen"
470.     >
471.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
472. </Button>Height="100"
473. <Button
474.     Width="100"
475.     Height="100"
476.     Background="LightGreen"
477.     >
478.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
479. </Button>Background="LightGreen"
480. <Button
481.     Width="100"
482.     Height="100"
483.     Background="LightGreen"
484.     >
485.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
486. </Button>>
487. <Button
488.     Width="100"
489.     Height="100"
490.     Background="LightGreen"
491.     >
492.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
493. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
494. </Button><TextBlock Text="hello, world!" />
495. </Button>new Person(){ Name = "小红", Age = 17},<Button Width="100" Height="100">
496. <Button
497. <Button
498.     Width="100"
499.     Height="100"
500.     Background="LightGreen"
501.     >
502.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
503. </Button>Width="100"
504. <Button
505.     Width="100"
506.     Height="100"
507.     Background="LightGreen"
508.     >
509.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
510. </Button>Height="100"
511. <Button
512.     Width="100"
513.     Height="100"
514.     Background="LightGreen"
515.     >
516.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
517. </Button>Background="LightGreen"
518. <Button
519.     Width="100"
520.     Height="100"
521.     Background="LightGreen"
522.     >
523.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
524. </Button>>
525. <Button
526.     Width="100"
527.     Height="100"
528.     Background="LightGreen"
529.     >
530.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
531. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
532. </Button><TextBlock Text="hello, world!" />
533. </Button><Button Width="100" Height="100">
534. <Button
535. <Button
536.     Width="100"
537.     Height="100"
538.     Background="LightGreen"
539.     >
540.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
541. </Button>Width="100"
542. <Button
543.     Width="100"
544.     Height="100"
545.     Background="LightGreen"
546.     >
547.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
548. </Button>Height="100"
549. <Button
550.     Width="100"
551.     Height="100"
552.     Background="LightGreen"
553.     >
554.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
555. </Button>Background="LightGreen"
556. <Button
557.     Width="100"
558.     Height="100"
559.     Background="LightGreen"
560.     >
561.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
562. </Button>>
563. <Button
564.     Width="100"
565.     Height="100"
566.     Background="LightGreen"
567.     >
568.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
569. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
570. </Button><TextBlock Text="hello, world!" />
571. </Button><Button Width="100" Height="100">
572. <Button
573. <Button
574.     Width="100"
575.     Height="100"
576.     Background="LightGreen"
577.     >
578.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
579. </Button>Width="100"
580. <Button
581.     Width="100"
582.     Height="100"
583.     Background="LightGreen"
584.     >
585.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
586. </Button>Height="100"
587. <Button
588.     Width="100"
589.     Height="100"
590.     Background="LightGreen"
591.     >
592.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
593. </Button>Background="LightGreen"
594. <Button
595.     Width="100"
596.     Height="100"
597.     Background="LightGreen"
598.     >
599.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
600. </Button>>
601. <Button
602.     Width="100"
603.     Height="100"
604.     Background="LightGreen"
605.     >
606.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
607. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
608. </Button><TextBlock Text="hello, world!" />
609. </Button>new Person(){ Name = "小黄", Age = 16},<Button Width="100" Height="100">
610. <Button
611. <Button
612.     Width="100"
613.     Height="100"
614.     Background="LightGreen"
615.     >
616.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
617. </Button>Width="100"
618. <Button
619.     Width="100"
620.     Height="100"
621.     Background="LightGreen"
622.     >
623.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
624. </Button>Height="100"
625. <Button
626.     Width="100"
627.     Height="100"
628.     Background="LightGreen"
629.     >
630.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
631. </Button>Background="LightGreen"
632. <Button
633.     Width="100"
634.     Height="100"
635.     Background="LightGreen"
636.     >
637.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
638. </Button>>
639. <Button
640.     Width="100"
641.     Height="100"
642.     Background="LightGreen"
643.     >
644.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
645. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
646. </Button><TextBlock Text="hello, world!" />
647. </Button><Button Width="100" Height="100">
648. <Button
649. <Button
650.     Width="100"
651.     Height="100"
652.     Background="LightGreen"
653.     >
654.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
655. </Button>Width="100"
656. <Button
657.     Width="100"
658.     Height="100"
659.     Background="LightGreen"
660.     >
661.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
662. </Button>Height="100"
663. <Button
664.     Width="100"
665.     Height="100"
666.     Background="LightGreen"
667.     >
668.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
669. </Button>Background="LightGreen"
670. <Button
671.     Width="100"
672.     Height="100"
673.     Background="LightGreen"
674.     >
675.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
676. </Button>>
677. <Button
678.     Width="100"
679.     Height="100"
680.     Background="LightGreen"
681.     >
682.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
683. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
684. </Button><TextBlock Text="hello, world!" />
685. </Button><Button Width="100" Height="100">
686. <Button
687. <Button
688.     Width="100"
689.     Height="100"
690.     Background="LightGreen"
691.     >
692.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
693. </Button>Width="100"
694. <Button
695.     Width="100"
696.     Height="100"
697.     Background="LightGreen"
698.     >
699.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
700. </Button>Height="100"
701. <Button
702.     Width="100"
703.     Height="100"
704.     Background="LightGreen"
705.     >
706.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
707. </Button>Background="LightGreen"
708. <Button
709.     Width="100"
710.     Height="100"
711.     Background="LightGreen"
712.     >
713.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
714. </Button>>
715. <Button
716.     Width="100"
717.     Height="100"
718.     Background="LightGreen"
719.     >
720.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
721. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
722. </Button><TextBlock Text="hello, world!" />
723. </Button>new Person(){ Name = "小亮", Age = 11},<Button Width="100" Height="100">
724. <Button
725. <Button
726.     Width="100"
727.     Height="100"
728.     Background="LightGreen"
729.     >
730.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
731. </Button>Width="100"
732. <Button
733.     Width="100"
734.     Height="100"
735.     Background="LightGreen"
736.     >
737.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
738. </Button>Height="100"
739. <Button
740.     Width="100"
741.     Height="100"
742.     Background="LightGreen"
743.     >
744.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
745. </Button>Background="LightGreen"
746. <Button
747.     Width="100"
748.     Height="100"
749.     Background="LightGreen"
750.     >
751.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
752. </Button>>
753. <Button
754.     Width="100"
755.     Height="100"
756.     Background="LightGreen"
757.     >
758.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
759. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
760. </Button><TextBlock Text="hello, world!" />
761. </Button><Button Width="100" Height="100">
762. <Button
763. <Button
764.     Width="100"
765.     Height="100"
766.     Background="LightGreen"
767.     >
768.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
769. </Button>Width="100"
770. <Button
771.     Width="100"
772.     Height="100"
773.     Background="LightGreen"
774.     >
775.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
776. </Button>Height="100"
777. <Button
778.     Width="100"
779.     Height="100"
780.     Background="LightGreen"
781.     >
782.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
783. </Button>Background="LightGreen"
784. <Button
785.     Width="100"
786.     Height="100"
787.     Background="LightGreen"
788.     >
789.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
790. </Button>>
791. <Button
792.     Width="100"
793.     Height="100"
794.     Background="LightGreen"
795.     >
796.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
797. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
798. </Button><TextBlock Text="hello, world!" />
799. </Button><Button Width="100" Height="100">
800. <Button
801. <Button
802.     Width="100"
803.     Height="100"
804.     Background="LightGreen"
805.     >
806.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
807. </Button>Width="100"
808. <Button
809.     Width="100"
810.     Height="100"
811.     Background="LightGreen"
812.     >
813.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
814. </Button>Height="100"
815. <Button
816.     Width="100"
817.     Height="100"
818.     Background="LightGreen"
819.     >
820.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
821. </Button>Background="LightGreen"
822. <Button
823.     Width="100"
824.     Height="100"
825.     Background="LightGreen"
826.     >
827.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
828. </Button>>
829. <Button
830.     Width="100"
831.     Height="100"
832.     Background="LightGreen"
833.     >
834.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
835. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
836. </Button><TextBlock Text="hello, world!" />
837. </Button>new Person(){ Name = "小军", Age = 19},<Button Width="100" Height="100">
838. <Button
839. <Button
840.     Width="100"
841.     Height="100"
842.     Background="LightGreen"
843.     >
844.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
845. </Button>Width="100"
846. <Button
847.     Width="100"
848.     Height="100"
849.     Background="LightGreen"
850.     >
851.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
852. </Button>Height="100"
853. <Button
854.     Width="100"
855.     Height="100"
856.     Background="LightGreen"
857.     >
858.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
859. </Button>Background="LightGreen"
860. <Button
861.     Width="100"
862.     Height="100"
863.     Background="LightGreen"
864.     >
865.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
866. </Button>>
867. <Button
868.     Width="100"
869.     Height="100"
870.     Background="LightGreen"
871.     >
872.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
873. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
874. </Button><TextBlock Text="hello, world!" />
875. </Button><Button Width="100" Height="100">
876. <Button
877. <Button
878.     Width="100"
879.     Height="100"
880.     Background="LightGreen"
881.     >
882.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
883. </Button>Width="100"
884. <Button
885.     Width="100"
886.     Height="100"
887.     Background="LightGreen"
888.     >
889.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
890. </Button>Height="100"
891. <Button
892.     Width="100"
893.     Height="100"
894.     Background="LightGreen"
895.     >
896.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
897. </Button>Background="LightGreen"
898. <Button
899.     Width="100"
900.     Height="100"
901.     Background="LightGreen"
902.     >
903.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
904. </Button>>
905. <Button
906.     Width="100"
907.     Height="100"
908.     Background="LightGreen"
909.     >
910.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
911. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
912. </Button><TextBlock Text="hello, world!" />
913. </Button><Button Width="100" Height="100">
914. <Button
915. <Button
916.     Width="100"
917.     Height="100"
918.     Background="LightGreen"
919.     >
920.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
921. </Button>Width="100"
922. <Button
923.     Width="100"
924.     Height="100"
925.     Background="LightGreen"
926.     >
927.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
928. </Button>Height="100"
929. <Button
930.     Width="100"
931.     Height="100"
932.     Background="LightGreen"
933.     >
934.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
935. </Button>Background="LightGreen"
936. <Button
937.     Width="100"
938.     Height="100"
939.     Background="LightGreen"
940.     >
941.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
942. </Button>>
943. <Button
944.     Width="100"
945.     Height="100"
946.     Background="LightGreen"
947.     >
948.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
949. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
950. </Button><TextBlock Text="hello, world!" />
951. </Button>new Person(){ Name = "小帅", Age = 30},<Button Width="100" Height="100">
952. <Button
953. <Button
954.     Width="100"
955.     Height="100"
956.     Background="LightGreen"
957.     >
958.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
959. </Button>Width="100"
960. <Button
961.     Width="100"
962.     Height="100"
963.     Background="LightGreen"
964.     >
965.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
966. </Button>Height="100"
967. <Button
968.     Width="100"
969.     Height="100"
970.     Background="LightGreen"
971.     >
972.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
973. </Button>Background="LightGreen"
974. <Button
975.     Width="100"
976.     Height="100"
977.     Background="LightGreen"
978.     >
979.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
980. </Button>>
981. <Button
982.     Width="100"
983.     Height="100"
984.     Background="LightGreen"
985.     >
986.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
987. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
988. </Button><TextBlock Text="hello, world!" />
989. </Button><Button Width="100" Height="100">
990. <Button
991. <Button
992.     Width="100"
993.     Height="100"
994.     Background="LightGreen"
995.     >
996.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
997. </Button>Width="100"
998. <Button
999.     Width="100"
1000.     Height="100"
1001.     Background="LightGreen"
1002.     >
1003.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1004. </Button>Height="100"
1005. <Button
1006.     Width="100"
1007.     Height="100"
1008.     Background="LightGreen"
1009.     >
1010.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1011. </Button>Background="LightGreen"
1012. <Button
1013.     Width="100"
1014.     Height="100"
1015.     Background="LightGreen"
1016.     >
1017.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1018. </Button>>
1019. <Button
1020.     Width="100"
1021.     Height="100"
1022.     Background="LightGreen"
1023.     >
1024.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1025. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1026. </Button><TextBlock Text="hello, world!" />
1027. </Button><Button Width="100" Height="100">
1028. <Button
1029. <Button
1030.     Width="100"
1031.     Height="100"
1032.     Background="LightGreen"
1033.     >
1034.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1035. </Button>Width="100"
1036. <Button
1037.     Width="100"
1038.     Height="100"
1039.     Background="LightGreen"
1040.     >
1041.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1042. </Button>Height="100"
1043. <Button
1044.     Width="100"
1045.     Height="100"
1046.     Background="LightGreen"
1047.     >
1048.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1049. </Button>Background="LightGreen"
1050. <Button
1051.     Width="100"
1052.     Height="100"
1053.     Background="LightGreen"
1054.     >
1055.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1056. </Button>>
1057. <Button
1058.     Width="100"
1059.     Height="100"
1060.     Background="LightGreen"
1061.     >
1062.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1063. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1064. </Button><TextBlock Text="hello, world!" />
1065. </Button>new Person(){ Name = "小马", Age = 6},<Button Width="100" Height="100">
1066. <Button
1067. <Button
1068.     Width="100"
1069.     Height="100"
1070.     Background="LightGreen"
1071.     >
1072.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1073. </Button>Width="100"
1074. <Button
1075.     Width="100"
1076.     Height="100"
1077.     Background="LightGreen"
1078.     >
1079.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1080. </Button>Height="100"
1081. <Button
1082.     Width="100"
1083.     Height="100"
1084.     Background="LightGreen"
1085.     >
1086.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1087. </Button>Background="LightGreen"
1088. <Button
1089.     Width="100"
1090.     Height="100"
1091.     Background="LightGreen"
1092.     >
1093.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1094. </Button>>
1095. <Button
1096.     Width="100"
1097.     Height="100"
1098.     Background="LightGreen"
1099.     >
1100.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1101. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1102. </Button><TextBlock Text="hello, world!" />
1103. </Button><Button Width="100" Height="100">
1104. <Button
1105. <Button
1106.     Width="100"
1107.     Height="100"
1108.     Background="LightGreen"
1109.     >
1110.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1111. </Button>Width="100"
1112. <Button
1113.     Width="100"
1114.     Height="100"
1115.     Background="LightGreen"
1116.     >
1117.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1118. </Button>Height="100"
1119. <Button
1120.     Width="100"
1121.     Height="100"
1122.     Background="LightGreen"
1123.     >
1124.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1125. </Button>Background="LightGreen"
1126. <Button
1127.     Width="100"
1128.     Height="100"
1129.     Background="LightGreen"
1130.     >
1131.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1132. </Button>>
1133. <Button
1134.     Width="100"
1135.     Height="100"
1136.     Background="LightGreen"
1137.     >
1138.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1139. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1140. </Button><TextBlock Text="hello, world!" />
1141. </Button>};<Button Width="100" Height="100">
1142. <Button
1143. <Button
1144.     Width="100"
1145.     Height="100"
1146.     Background="LightGreen"
1147.     >
1148.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1149. </Button>Width="100"
1150. <Button
1151.     Width="100"
1152.     Height="100"
1153.     Background="LightGreen"
1154.     >
1155.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1156. </Button>Height="100"
1157. <Button
1158.     Width="100"
1159.     Height="100"
1160.     Background="LightGreen"
1161.     >
1162.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1163. </Button>Background="LightGreen"
1164. <Button
1165.     Width="100"
1166.     Height="100"
1167.     Background="LightGreen"
1168.     >
1169.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1170. </Button>>
1171. <Button
1172.     Width="100"
1173.     Height="100"
1174.     Background="LightGreen"
1175.     >
1176.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1177. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1178. </Button><TextBlock Text="hello, world!" />
1179. </Button>}}

复制代码

我相信你知道怎么绑定上下文，以是这边只做了绑定的部分：

1. [/code]我们来看一下效果：
2. [align=center][img]https://img2024.cnblogs.com/blog/2411090/202503/2411090-20250321115202306-911974216.png[/img][/align]
3. 你可以注意到的是，集合容器控件中出现的样子，和我们刚才描述的关于 ContentPresenter 和 Content 的机制是完全一致的。
4. 让我们把上面写的 ContentTemplate 中的 DataTemplate 交给 ItemsControl 的 ItemTemplate 中去。
5. [code]<Button Width="100" Height="100">
6. <Button
7. <Button
8.     Width="100"
9.     Height="100"
10.     Background="LightGreen"
11.     >
12.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
13. </Button>Width="100"
14. <Button
15.     Width="100"
16.     Height="100"
17.     Background="LightGreen"
18.     >
19.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
20. </Button>Height="100"
21. <Button
22.     Width="100"
23.     Height="100"
24.     Background="LightGreen"
25.     >
26.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
27. </Button>Background="LightGreen"
28. <Button
29.     Width="100"
30.     Height="100"
31.     Background="LightGreen"
32.     >
33.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
34. </Button>>
35. <Button
36.     Width="100"
37.     Height="100"
38.     Background="LightGreen"
39.     >
40.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
41. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
42. </Button><TextBlock Text="hello, world!" />
43. </Button><Button Width="100" Height="100">
44. <Button
45. <Button
46.     Width="100"
47.     Height="100"
48.     Background="LightGreen"
49.     >
50.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
51. </Button>Width="100"
52. <Button
53.     Width="100"
54.     Height="100"
55.     Background="LightGreen"
56.     >
57.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
58. </Button>Height="100"
59. <Button
60.     Width="100"
61.     Height="100"
62.     Background="LightGreen"
63.     >
64.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
65. </Button>Background="LightGreen"
66. <Button
67.     Width="100"
68.     Height="100"
69.     Background="LightGreen"
70.     >
71.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
72. </Button>>
73. <Button
74.     Width="100"
75.     Height="100"
76.     Background="LightGreen"
77.     >
78.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
79. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
80. </Button><TextBlock Text="hello, world!" />
81. </Button><Button Width="100" Height="100">
82. <Button
83. <Button
84.     Width="100"
85.     Height="100"
86.     Background="LightGreen"
87.     >
88.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
89. </Button>Width="100"
90. <Button
91.     Width="100"
92.     Height="100"
93.     Background="LightGreen"
94.     >
95.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
96. </Button>Height="100"
97. <Button
98.     Width="100"
99.     Height="100"
100.     Background="LightGreen"
101.     >
102.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
103. </Button>Background="LightGreen"
104. <Button
105.     Width="100"
106.     Height="100"
107.     Background="LightGreen"
108.     >
109.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
110. </Button>>
111. <Button
112.     Width="100"
113.     Height="100"
114.     Background="LightGreen"
115.     >
116.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
117. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
118. </Button><TextBlock Text="hello, world!" />
119. </Button><Button Width="100" Height="100">
120. <Button
121. <Button
122.     Width="100"
123.     Height="100"
124.     Background="LightGreen"
125.     >
126.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
127. </Button>Width="100"
128. <Button
129.     Width="100"
130.     Height="100"
131.     Background="LightGreen"
132.     >
133.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
134. </Button>Height="100"
135. <Button
136.     Width="100"
137.     Height="100"
138.     Background="LightGreen"
139.     >
140.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
141. </Button>Background="LightGreen"
142. <Button
143.     Width="100"
144.     Height="100"
145.     Background="LightGreen"
146.     >
147.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
148. </Button>>
149. <Button
150.     Width="100"
151.     Height="100"
152.     Background="LightGreen"
153.     >
154.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
155. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
156. </Button><TextBlock Text="hello, world!" />
157. </Button><Button Width="100" Height="100">
158. <Button
159. <Button
160.     Width="100"
161.     Height="100"
162.     Background="LightGreen"
163.     >
164.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
165. </Button>Width="100"
166. <Button
167.     Width="100"
168.     Height="100"
169.     Background="LightGreen"
170.     >
171.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
172. </Button>Height="100"
173. <Button
174.     Width="100"
175.     Height="100"
176.     Background="LightGreen"
177.     >
178.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
179. </Button>Background="LightGreen"
180. <Button
181.     Width="100"
182.     Height="100"
183.     Background="LightGreen"
184.     >
185.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
186. </Button>>
187. <Button
188.     Width="100"
189.     Height="100"
190.     Background="LightGreen"
191.     >
192.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
193. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
194. </Button><TextBlock Text="hello, world!" />
195. </Button><Button Width="100" Height="100">
196. <Button
197. <Button
198.     Width="100"
199.     Height="100"
200.     Background="LightGreen"
201.     >
202.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
203. </Button>Width="100"
204. <Button
205.     Width="100"
206.     Height="100"
207.     Background="LightGreen"
208.     >
209.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
210. </Button>Height="100"
211. <Button
212.     Width="100"
213.     Height="100"
214.     Background="LightGreen"
215.     >
216.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
217. </Button>Background="LightGreen"
218. <Button
219.     Width="100"
220.     Height="100"
221.     Background="LightGreen"
222.     >
223.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
224. </Button>>
225. <Button
226.     Width="100"
227.     Height="100"
228.     Background="LightGreen"
229.     >
230.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
231. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
232. </Button><TextBlock Text="hello, world!" />
233. </Button><Button Width="100" Height="100">
234. <Button
235. <Button
236.     Width="100"
237.     Height="100"
238.     Background="LightGreen"
239.     >
240.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
241. </Button>Width="100"
242. <Button
243.     Width="100"
244.     Height="100"
245.     Background="LightGreen"
246.     >
247.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
248. </Button>Height="100"
249. <Button
250.     Width="100"
251.     Height="100"
252.     Background="LightGreen"
253.     >
254.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
255. </Button>Background="LightGreen"
256. <Button
257.     Width="100"
258.     Height="100"
259.     Background="LightGreen"
260.     >
261.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
262. </Button>>
263. <Button
264.     Width="100"
265.     Height="100"
266.     Background="LightGreen"
267.     >
268.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
269. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
270. </Button><TextBlock Text="hello, world!" />
271. </Button><Button Width="100" Height="100">
272. <Button
273. <Button
274.     Width="100"
275.     Height="100"
276.     Background="LightGreen"
277.     >
278.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
279. </Button>Width="100"
280. <Button
281.     Width="100"
282.     Height="100"
283.     Background="LightGreen"
284.     >
285.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
286. </Button>Height="100"
287. <Button
288.     Width="100"
289.     Height="100"
290.     Background="LightGreen"
291.     >
292.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
293. </Button>Background="LightGreen"
294. <Button
295.     Width="100"
296.     Height="100"
297.     Background="LightGreen"
298.     >
299.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
300. </Button>>
301. <Button
302.     Width="100"
303.     Height="100"
304.     Background="LightGreen"
305.     >
306.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
307. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
308. </Button><TextBlock Text="hello, world!" />
309. </Button><Button Width="100" Height="100">
310. <Button
311. <Button
312.     Width="100"
313.     Height="100"
314.     Background="LightGreen"
315.     >
316.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
317. </Button>Width="100"
318. <Button
319.     Width="100"
320.     Height="100"
321.     Background="LightGreen"
322.     >
323.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
324. </Button>Height="100"
325. <Button
326.     Width="100"
327.     Height="100"
328.     Background="LightGreen"
329.     >
330.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
331. </Button>Background="LightGreen"
332. <Button
333.     Width="100"
334.     Height="100"
335.     Background="LightGreen"
336.     >
337.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
338. </Button>>
339. <Button
340.     Width="100"
341.     Height="100"
342.     Background="LightGreen"
343.     >
344.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
345. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
346. </Button><TextBlock Text="hello, world!" />
347. </Button><Button Width="100" Height="100">
348. <Button
349. <Button
350.     Width="100"
351.     Height="100"
352.     Background="LightGreen"
353.     >
354.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
355. </Button>Width="100"
356. <Button
357.     Width="100"
358.     Height="100"
359.     Background="LightGreen"
360.     >
361.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
362. </Button>Height="100"
363. <Button
364.     Width="100"
365.     Height="100"
366.     Background="LightGreen"
367.     >
368.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
369. </Button>Background="LightGreen"
370. <Button
371.     Width="100"
372.     Height="100"
373.     Background="LightGreen"
374.     >
375.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
376. </Button>>
377. <Button
378.     Width="100"
379.     Height="100"
380.     Background="LightGreen"
381.     >
382.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
383. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
384. </Button><TextBlock Text="hello, world!" />
385. </Button><Button Width="100" Height="100">
386. <Button
387. <Button
388.     Width="100"
389.     Height="100"
390.     Background="LightGreen"
391.     >
392.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
393. </Button>Width="100"
394. <Button
395.     Width="100"
396.     Height="100"
397.     Background="LightGreen"
398.     >
399.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
400. </Button>Height="100"
401. <Button
402.     Width="100"
403.     Height="100"
404.     Background="LightGreen"
405.     >
406.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
407. </Button>Background="LightGreen"
408. <Button
409.     Width="100"
410.     Height="100"
411.     Background="LightGreen"
412.     >
413.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
414. </Button>>
415. <Button
416.     Width="100"
417.     Height="100"
418.     Background="LightGreen"
419.     >
420.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
421. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
422. </Button><TextBlock Text="hello, world!" />
423. </Button><Button Width="100" Height="100">
424. <Button
425. <Button
426.     Width="100"
427.     Height="100"
428.     Background="LightGreen"
429.     >
430.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
431. </Button>Width="100"
432. <Button
433.     Width="100"
434.     Height="100"
435.     Background="LightGreen"
436.     >
437.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
438. </Button>Height="100"
439. <Button
440.     Width="100"
441.     Height="100"
442.     Background="LightGreen"
443.     >
444.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
445. </Button>Background="LightGreen"
446. <Button
447.     Width="100"
448.     Height="100"
449.     Background="LightGreen"
450.     >
451.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
452. </Button>>
453. <Button
454.     Width="100"
455.     Height="100"
456.     Background="LightGreen"
457.     >
458.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
459. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
460. </Button><TextBlock Text="hello, world!" />
461. </Button><Button Width="100" Height="100">
462. <Button
463. <Button
464.     Width="100"
465.     Height="100"
466.     Background="LightGreen"
467.     >
468.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
469. </Button>Width="100"
470. <Button
471.     Width="100"
472.     Height="100"
473.     Background="LightGreen"
474.     >
475.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
476. </Button>Height="100"
477. <Button
478.     Width="100"
479.     Height="100"
480.     Background="LightGreen"
481.     >
482.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
483. </Button>Background="LightGreen"
484. <Button
485.     Width="100"
486.     Height="100"
487.     Background="LightGreen"
488.     >
489.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
490. </Button>>
491. <Button
492.     Width="100"
493.     Height="100"
494.     Background="LightGreen"
495.     >
496.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
497. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
498. </Button><TextBlock Text="hello, world!" />
499. </Button><Button Width="100" Height="100">
500. <Button
501. <Button
502.     Width="100"
503.     Height="100"
504.     Background="LightGreen"
505.     >
506.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
507. </Button>Width="100"
508. <Button
509.     Width="100"
510.     Height="100"
511.     Background="LightGreen"
512.     >
513.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
514. </Button>Height="100"
515. <Button
516.     Width="100"
517.     Height="100"
518.     Background="LightGreen"
519.     >
520.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
521. </Button>Background="LightGreen"
522. <Button
523.     Width="100"
524.     Height="100"
525.     Background="LightGreen"
526.     >
527.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
528. </Button>>
529. <Button
530.     Width="100"
531.     Height="100"
532.     Background="LightGreen"
533.     >
534.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
535. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
536. </Button><TextBlock Text="hello, world!" />
537. </Button><Button Width="100" Height="100">
538. <Button
539. <Button
540.     Width="100"
541.     Height="100"
542.     Background="LightGreen"
543.     >
544.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
545. </Button>Width="100"
546. <Button
547.     Width="100"
548.     Height="100"
549.     Background="LightGreen"
550.     >
551.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
552. </Button>Height="100"
553. <Button
554.     Width="100"
555.     Height="100"
556.     Background="LightGreen"
557.     >
558.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
559. </Button>Background="LightGreen"
560. <Button
561.     Width="100"
562.     Height="100"
563.     Background="LightGreen"
564.     >
565.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
566. </Button>>
567. <Button
568.     Width="100"
569.     Height="100"
570.     Background="LightGreen"
571.     >
572.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
573. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
574. </Button><TextBlock Text="hello, world!" />
575. </Button><Button Width="100" Height="100">
576. <Button
577. <Button
578.     Width="100"
579.     Height="100"
580.     Background="LightGreen"
581.     >
582.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
583. </Button>Width="100"
584. <Button
585.     Width="100"
586.     Height="100"
587.     Background="LightGreen"
588.     >
589.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
590. </Button>Height="100"
591. <Button
592.     Width="100"
593.     Height="100"
594.     Background="LightGreen"
595.     >
596.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
597. </Button>Background="LightGreen"
598. <Button
599.     Width="100"
600.     Height="100"
601.     Background="LightGreen"
602.     >
603.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
604. </Button>>
605. <Button
606.     Width="100"
607.     Height="100"
608.     Background="LightGreen"
609.     >
610.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
611. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
612. </Button><TextBlock Text="hello, world!" />
613. </Button><Button Width="100" Height="100">
614. <Button
615. <Button
616.     Width="100"
617.     Height="100"
618.     Background="LightGreen"
619.     >
620.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
621. </Button>Width="100"
622. <Button
623.     Width="100"
624.     Height="100"
625.     Background="LightGreen"
626.     >
627.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
628. </Button>Height="100"
629. <Button
630.     Width="100"
631.     Height="100"
632.     Background="LightGreen"
633.     >
634.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
635. </Button>Background="LightGreen"
636. <Button
637.     Width="100"
638.     Height="100"
639.     Background="LightGreen"
640.     >
641.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
642. </Button>>
643. <Button
644.     Width="100"
645.     Height="100"
646.     Background="LightGreen"
647.     >
648.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
649. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
650. </Button><TextBlock Text="hello, world!" />
651. </Button><Button Width="100" Height="100">
652. <Button
653. <Button
654.     Width="100"
655.     Height="100"
656.     Background="LightGreen"
657.     >
658.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
659. </Button>Width="100"
660. <Button
661.     Width="100"
662.     Height="100"
663.     Background="LightGreen"
664.     >
665.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
666. </Button>Height="100"
667. <Button
668.     Width="100"
669.     Height="100"
670.     Background="LightGreen"
671.     >
672.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
673. </Button>Background="LightGreen"
674. <Button
675.     Width="100"
676.     Height="100"
677.     Background="LightGreen"
678.     >
679.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
680. </Button>>
681. <Button
682.     Width="100"
683.     Height="100"
684.     Background="LightGreen"
685.     >
686.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
687. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
688. </Button><TextBlock Text="hello, world!" />
689. </Button><Button Width="100" Height="100">
690. <Button
691. <Button
692.     Width="100"
693.     Height="100"
694.     Background="LightGreen"
695.     >
696.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
697. </Button>Width="100"
698. <Button
699.     Width="100"
700.     Height="100"
701.     Background="LightGreen"
702.     >
703.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
704. </Button>Height="100"
705. <Button
706.     Width="100"
707.     Height="100"
708.     Background="LightGreen"
709.     >
710.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
711. </Button>Background="LightGreen"
712. <Button
713.     Width="100"
714.     Height="100"
715.     Background="LightGreen"
716.     >
717.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
718. </Button>>
719. <Button
720.     Width="100"
721.     Height="100"
722.     Background="LightGreen"
723.     >
724.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
725. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
726. </Button><TextBlock Text="hello, world!" />
727. </Button><Button Width="100" Height="100">
728. <Button
729. <Button
730.     Width="100"
731.     Height="100"
732.     Background="LightGreen"
733.     >
734.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
735. </Button>Width="100"
736. <Button
737.     Width="100"
738.     Height="100"
739.     Background="LightGreen"
740.     >
741.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
742. </Button>Height="100"
743. <Button
744.     Width="100"
745.     Height="100"
746.     Background="LightGreen"
747.     >
748.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
749. </Button>Background="LightGreen"
750. <Button
751.     Width="100"
752.     Height="100"
753.     Background="LightGreen"
754.     >
755.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
756. </Button>>
757. <Button
758.     Width="100"
759.     Height="100"
760.     Background="LightGreen"
761.     >
762.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
763. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
764. </Button><TextBlock Text="hello, world!" />
765. </Button>

复制代码

现在的效果就是这样的：

具体 ItemTemplate 生效的原因来自于 ContentPresenter，参看源码：https://referencesource.microsoft.com/#PresentationFramework/src/Framework/System/Windows/Controls/ItemsControl.cs,a32a4ab17d3998f0,references
2. 容器的表面

你可能会对 ItemsControl 和 ListBox 的默认的 StackPanel 纵向布局感到不满。
这个时间你可以利用 ItemsPanel 创建 ItemsPanelTemplate 对象，它是属于 ControlTemplate 相似的，和数据无关的 Template。
默认情况如果写出来是这样的：

1. <Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button><Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button><Button Width="100" Height="100">
78. <Button
79. <Button
80.     Width="100"
81.     Height="100"
82.     Background="LightGreen"
83.     >
84.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
85. </Button>Width="100"
86. <Button
87.     Width="100"
88.     Height="100"
89.     Background="LightGreen"
90.     >
91.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
92. </Button>Height="100"
93. <Button
94.     Width="100"
95.     Height="100"
96.     Background="LightGreen"
97.     >
98.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
99. </Button>Background="LightGreen"
100. <Button
101.     Width="100"
102.     Height="100"
103.     Background="LightGreen"
104.     >
105.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
106. </Button>>
107. <Button
108.     Width="100"
109.     Height="100"
110.     Background="LightGreen"
111.     >
112.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
113. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Text="hello, world!" />
115. </Button><Button Width="100" Height="100">
116. <Button
117. <Button
118.     Width="100"
119.     Height="100"
120.     Background="LightGreen"
121.     >
122.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
123. </Button>Width="100"
124. <Button
125.     Width="100"
126.     Height="100"
127.     Background="LightGreen"
128.     >
129.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
130. </Button>Height="100"
131. <Button
132.     Width="100"
133.     Height="100"
134.     Background="LightGreen"
135.     >
136.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
137. </Button>Background="LightGreen"
138. <Button
139.     Width="100"
140.     Height="100"
141.     Background="LightGreen"
142.     >
143.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
144. </Button>>
145. <Button
146.     Width="100"
147.     Height="100"
148.     Background="LightGreen"
149.     >
150.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
151. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Text="hello, world!" />
153. </Button><Button Width="100" Height="100">
154. <Button
155. <Button
156.     Width="100"
157.     Height="100"
158.     Background="LightGreen"
159.     >
160.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
161. </Button>Width="100"
162. <Button
163.     Width="100"
164.     Height="100"
165.     Background="LightGreen"
166.     >
167.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
168. </Button>Height="100"
169. <Button
170.     Width="100"
171.     Height="100"
172.     Background="LightGreen"
173.     >
174.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
175. </Button>Background="LightGreen"
176. <Button
177.     Width="100"
178.     Height="100"
179.     Background="LightGreen"
180.     >
181.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
182. </Button>>
183. <Button
184.     Width="100"
185.     Height="100"
186.     Background="LightGreen"
187.     >
188.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
189. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
190. </Button><TextBlock Text="hello, world!" />
191. </Button><Button Width="100" Height="100">
192. <Button
193. <Button
194.     Width="100"
195.     Height="100"
196.     Background="LightGreen"
197.     >
198.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
199. </Button>Width="100"
200. <Button
201.     Width="100"
202.     Height="100"
203.     Background="LightGreen"
204.     >
205.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
206. </Button>Height="100"
207. <Button
208.     Width="100"
209.     Height="100"
210.     Background="LightGreen"
211.     >
212.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
213. </Button>Background="LightGreen"
214. <Button
215.     Width="100"
216.     Height="100"
217.     Background="LightGreen"
218.     >
219.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
220. </Button>>
221. <Button
222.     Width="100"
223.     Height="100"
224.     Background="LightGreen"
225.     >
226.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
227. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
228. </Button><TextBlock Text="hello, world!" />
229. </Button><Button Width="100" Height="100">
230. <Button
231. <Button
232.     Width="100"
233.     Height="100"
234.     Background="LightGreen"
235.     >
236.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
237. </Button>Width="100"
238. <Button
239.     Width="100"
240.     Height="100"
241.     Background="LightGreen"
242.     >
243.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
244. </Button>Height="100"
245. <Button
246.     Width="100"
247.     Height="100"
248.     Background="LightGreen"
249.     >
250.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
251. </Button>Background="LightGreen"
252. <Button
253.     Width="100"
254.     Height="100"
255.     Background="LightGreen"
256.     >
257.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
258. </Button>>
259. <Button
260.     Width="100"
261.     Height="100"
262.     Background="LightGreen"
263.     >
264.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
265. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
266. </Button><TextBlock Text="hello, world!" />
267. </Button><Button Width="100" Height="100">
268. <Button
269. <Button
270.     Width="100"
271.     Height="100"
272.     Background="LightGreen"
273.     >
274.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
275. </Button>Width="100"
276. <Button
277.     Width="100"
278.     Height="100"
279.     Background="LightGreen"
280.     >
281.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
282. </Button>Height="100"
283. <Button
284.     Width="100"
285.     Height="100"
286.     Background="LightGreen"
287.     >
288.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
289. </Button>Background="LightGreen"
290. <Button
291.     Width="100"
292.     Height="100"
293.     Background="LightGreen"
294.     >
295.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
296. </Button>>
297. <Button
298.     Width="100"
299.     Height="100"
300.     Background="LightGreen"
301.     >
302.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
303. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
304. </Button><TextBlock Text="hello, world!" />
305. </Button><Button Width="100" Height="100">
306. <Button
307. <Button
308.     Width="100"
309.     Height="100"
310.     Background="LightGreen"
311.     >
312.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
313. </Button>Width="100"
314. <Button
315.     Width="100"
316.     Height="100"
317.     Background="LightGreen"
318.     >
319.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
320. </Button>Height="100"
321. <Button
322.     Width="100"
323.     Height="100"
324.     Background="LightGreen"
325.     >
326.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
327. </Button>Background="LightGreen"
328. <Button
329.     Width="100"
330.     Height="100"
331.     Background="LightGreen"
332.     >
333.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
334. </Button>>
335. <Button
336.     Width="100"
337.     Height="100"
338.     Background="LightGreen"
339.     >
340.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
341. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
342. </Button><TextBlock Text="hello, world!" />
343. </Button><Button Width="100" Height="100">
344. <Button
345. <Button
346.     Width="100"
347.     Height="100"
348.     Background="LightGreen"
349.     >
350.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
351. </Button>Width="100"
352. <Button
353.     Width="100"
354.     Height="100"
355.     Background="LightGreen"
356.     >
357.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
358. </Button>Height="100"
359. <Button
360.     Width="100"
361.     Height="100"
362.     Background="LightGreen"
363.     >
364.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
365. </Button>Background="LightGreen"
366. <Button
367.     Width="100"
368.     Height="100"
369.     Background="LightGreen"
370.     >
371.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
372. </Button>>
373. <Button
374.     Width="100"
375.     Height="100"
376.     Background="LightGreen"
377.     >
378.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
379. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
380. </Button><TextBlock Text="hello, world!" />
381. </Button><Button Width="100" Height="100">
382. <Button
383. <Button
384.     Width="100"
385.     Height="100"
386.     Background="LightGreen"
387.     >
388.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
389. </Button>Width="100"
390. <Button
391.     Width="100"
392.     Height="100"
393.     Background="LightGreen"
394.     >
395.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
396. </Button>Height="100"
397. <Button
398.     Width="100"
399.     Height="100"
400.     Background="LightGreen"
401.     >
402.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
403. </Button>Background="LightGreen"
404. <Button
405.     Width="100"
406.     Height="100"
407.     Background="LightGreen"
408.     >
409.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
410. </Button>>
411. <Button
412.     Width="100"
413.     Height="100"
414.     Background="LightGreen"
415.     >
416.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
417. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
418. </Button><TextBlock Text="hello, world!" />
419. </Button><Button Width="100" Height="100">
420. <Button
421. <Button
422.     Width="100"
423.     Height="100"
424.     Background="LightGreen"
425.     >
426.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
427. </Button>Width="100"
428. <Button
429.     Width="100"
430.     Height="100"
431.     Background="LightGreen"
432.     >
433.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
434. </Button>Height="100"
435. <Button
436.     Width="100"
437.     Height="100"
438.     Background="LightGreen"
439.     >
440.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
441. </Button>Background="LightGreen"
442. <Button
443.     Width="100"
444.     Height="100"
445.     Background="LightGreen"
446.     >
447.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
448. </Button>>
449. <Button
450.     Width="100"
451.     Height="100"
452.     Background="LightGreen"
453.     >
454.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
455. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
456. </Button><TextBlock Text="hello, world!" />
457. </Button><Button Width="100" Height="100">
458. <Button
459. <Button
460.     Width="100"
461.     Height="100"
462.     Background="LightGreen"
463.     >
464.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
465. </Button>Width="100"
466. <Button
467.     Width="100"
468.     Height="100"
469.     Background="LightGreen"
470.     >
471.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
472. </Button>Height="100"
473. <Button
474.     Width="100"
475.     Height="100"
476.     Background="LightGreen"
477.     >
478.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
479. </Button>Background="LightGreen"
480. <Button
481.     Width="100"
482.     Height="100"
483.     Background="LightGreen"
484.     >
485.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
486. </Button>>
487. <Button
488.     Width="100"
489.     Height="100"
490.     Background="LightGreen"
491.     >
492.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
493. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
494. </Button><TextBlock Text="hello, world!" />
495. </Button><Button Width="100" Height="100">
496. <Button
497. <Button
498.     Width="100"
499.     Height="100"
500.     Background="LightGreen"
501.     >
502.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
503. </Button>Width="100"
504. <Button
505.     Width="100"
506.     Height="100"
507.     Background="LightGreen"
508.     >
509.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
510. </Button>Height="100"
511. <Button
512.     Width="100"
513.     Height="100"
514.     Background="LightGreen"
515.     >
516.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
517. </Button>Background="LightGreen"
518. <Button
519.     Width="100"
520.     Height="100"
521.     Background="LightGreen"
522.     >
523.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
524. </Button>>
525. <Button
526.     Width="100"
527.     Height="100"
528.     Background="LightGreen"
529.     >
530.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
531. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
532. </Button><TextBlock Text="hello, world!" />
533. </Button><Button Width="100" Height="100">
534. <Button
535. <Button
536.     Width="100"
537.     Height="100"
538.     Background="LightGreen"
539.     >
540.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
541. </Button>Width="100"
542. <Button
543.     Width="100"
544.     Height="100"
545.     Background="LightGreen"
546.     >
547.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
548. </Button>Height="100"
549. <Button
550.     Width="100"
551.     Height="100"
552.     Background="LightGreen"
553.     >
554.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
555. </Button>Background="LightGreen"
556. <Button
557.     Width="100"
558.     Height="100"
559.     Background="LightGreen"
560.     >
561.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
562. </Button>>
563. <Button
564.     Width="100"
565.     Height="100"
566.     Background="LightGreen"
567.     >
568.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
569. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
570. </Button><TextBlock Text="hello, world!" />
571. </Button><Button Width="100" Height="100">
572. <Button
573. <Button
574.     Width="100"
575.     Height="100"
576.     Background="LightGreen"
577.     >
578.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
579. </Button>Width="100"
580. <Button
581.     Width="100"
582.     Height="100"
583.     Background="LightGreen"
584.     >
585.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
586. </Button>Height="100"
587. <Button
588.     Width="100"
589.     Height="100"
590.     Background="LightGreen"
591.     >
592.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
593. </Button>Background="LightGreen"
594. <Button
595.     Width="100"
596.     Height="100"
597.     Background="LightGreen"
598.     >
599.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
600. </Button>>
601. <Button
602.     Width="100"
603.     Height="100"
604.     Background="LightGreen"
605.     >
606.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
607. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
608. </Button><TextBlock Text="hello, world!" />
609. </Button><Button Width="100" Height="100">
610. <Button
611. <Button
612.     Width="100"
613.     Height="100"
614.     Background="LightGreen"
615.     >
616.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
617. </Button>Width="100"
618. <Button
619.     Width="100"
620.     Height="100"
621.     Background="LightGreen"
622.     >
623.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
624. </Button>Height="100"
625. <Button
626.     Width="100"
627.     Height="100"
628.     Background="LightGreen"
629.     >
630.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
631. </Button>Background="LightGreen"
632. <Button
633.     Width="100"
634.     Height="100"
635.     Background="LightGreen"
636.     >
637.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
638. </Button>>
639. <Button
640.     Width="100"
641.     Height="100"
642.     Background="LightGreen"
643.     >
644.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
645. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
646. </Button><TextBlock Text="hello, world!" />
647. </Button><Button Width="100" Height="100">
648. <Button
649. <Button
650.     Width="100"
651.     Height="100"
652.     Background="LightGreen"
653.     >
654.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
655. </Button>Width="100"
656. <Button
657.     Width="100"
658.     Height="100"
659.     Background="LightGreen"
660.     >
661.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
662. </Button>Height="100"
663. <Button
664.     Width="100"
665.     Height="100"
666.     Background="LightGreen"
667.     >
668.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
669. </Button>Background="LightGreen"
670. <Button
671.     Width="100"
672.     Height="100"
673.     Background="LightGreen"
674.     >
675.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
676. </Button>>
677. <Button
678.     Width="100"
679.     Height="100"
680.     Background="LightGreen"
681.     >
682.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
683. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
684. </Button><TextBlock Text="hello, world!" />
685. </Button><Button Width="100" Height="100">
686. <Button
687. <Button
688.     Width="100"
689.     Height="100"
690.     Background="LightGreen"
691.     >
692.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
693. </Button>Width="100"
694. <Button
695.     Width="100"
696.     Height="100"
697.     Background="LightGreen"
698.     >
699.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
700. </Button>Height="100"
701. <Button
702.     Width="100"
703.     Height="100"
704.     Background="LightGreen"
705.     >
706.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
707. </Button>Background="LightGreen"
708. <Button
709.     Width="100"
710.     Height="100"
711.     Background="LightGreen"
712.     >
713.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
714. </Button>>
715. <Button
716.     Width="100"
717.     Height="100"
718.     Background="LightGreen"
719.     >
720.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
721. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
722. </Button><TextBlock Text="hello, world!" />
723. </Button><Button Width="100" Height="100">
724. <Button
725. <Button
726.     Width="100"
727.     Height="100"
728.     Background="LightGreen"
729.     >
730.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
731. </Button>Width="100"
732. <Button
733.     Width="100"
734.     Height="100"
735.     Background="LightGreen"
736.     >
737.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
738. </Button>Height="100"
739. <Button
740.     Width="100"
741.     Height="100"
742.     Background="LightGreen"
743.     >
744.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
745. </Button>Background="LightGreen"
746. <Button
747.     Width="100"
748.     Height="100"
749.     Background="LightGreen"
750.     >
751.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
752. </Button>>
753. <Button
754.     Width="100"
755.     Height="100"
756.     Background="LightGreen"
757.     >
758.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
759. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
760. </Button><TextBlock Text="hello, world!" />
761. </Button><Button Width="100" Height="100">
762. <Button
763. <Button
764.     Width="100"
765.     Height="100"
766.     Background="LightGreen"
767.     >
768.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
769. </Button>Width="100"
770. <Button
771.     Width="100"
772.     Height="100"
773.     Background="LightGreen"
774.     >
775.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
776. </Button>Height="100"
777. <Button
778.     Width="100"
779.     Height="100"
780.     Background="LightGreen"
781.     >
782.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
783. </Button>Background="LightGreen"
784. <Button
785.     Width="100"
786.     Height="100"
787.     Background="LightGreen"
788.     >
789.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
790. </Button>>
791. <Button
792.     Width="100"
793.     Height="100"
794.     Background="LightGreen"
795.     >
796.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
797. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
798. </Button><TextBlock Text="hello, world!" />
799. </Button><Button Width="100" Height="100">
800. <Button
801. <Button
802.     Width="100"
803.     Height="100"
804.     Background="LightGreen"
805.     >
806.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
807. </Button>Width="100"
808. <Button
809.     Width="100"
810.     Height="100"
811.     Background="LightGreen"
812.     >
813.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
814. </Button>Height="100"
815. <Button
816.     Width="100"
817.     Height="100"
818.     Background="LightGreen"
819.     >
820.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
821. </Button>Background="LightGreen"
822. <Button
823.     Width="100"
824.     Height="100"
825.     Background="LightGreen"
826.     >
827.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
828. </Button>>
829. <Button
830.     Width="100"
831.     Height="100"
832.     Background="LightGreen"
833.     >
834.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
835. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
836. </Button><TextBlock Text="hello, world!" />
837. </Button><Button Width="100" Height="100">
838. <Button
839. <Button
840.     Width="100"
841.     Height="100"
842.     Background="LightGreen"
843.     >
844.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
845. </Button>Width="100"
846. <Button
847.     Width="100"
848.     Height="100"
849.     Background="LightGreen"
850.     >
851.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
852. </Button>Height="100"
853. <Button
854.     Width="100"
855.     Height="100"
856.     Background="LightGreen"
857.     >
858.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
859. </Button>Background="LightGreen"
860. <Button
861.     Width="100"
862.     Height="100"
863.     Background="LightGreen"
864.     >
865.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
866. </Button>>
867. <Button
868.     Width="100"
869.     Height="100"
870.     Background="LightGreen"
871.     >
872.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
873. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
874. </Button><TextBlock Text="hello, world!" />
875. </Button><Button Width="100" Height="100">
876. <Button
877. <Button
878.     Width="100"
879.     Height="100"
880.     Background="LightGreen"
881.     >
882.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
883. </Button>Width="100"
884. <Button
885.     Width="100"
886.     Height="100"
887.     Background="LightGreen"
888.     >
889.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
890. </Button>Height="100"
891. <Button
892.     Width="100"
893.     Height="100"
894.     Background="LightGreen"
895.     >
896.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
897. </Button>Background="LightGreen"
898. <Button
899.     Width="100"
900.     Height="100"
901.     Background="LightGreen"
902.     >
903.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
904. </Button>>
905. <Button
906.     Width="100"
907.     Height="100"
908.     Background="LightGreen"
909.     >
910.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
911. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
912. </Button><TextBlock Text="hello, world!" />
913. </Button><Button Width="100" Height="100">
914. <Button
915. <Button
916.     Width="100"
917.     Height="100"
918.     Background="LightGreen"
919.     >
920.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
921. </Button>Width="100"
922. <Button
923.     Width="100"
924.     Height="100"
925.     Background="LightGreen"
926.     >
927.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
928. </Button>Height="100"
929. <Button
930.     Width="100"
931.     Height="100"
932.     Background="LightGreen"
933.     >
934.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
935. </Button>Background="LightGreen"
936. <Button
937.     Width="100"
938.     Height="100"
939.     Background="LightGreen"
940.     >
941.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
942. </Button>>
943. <Button
944.     Width="100"
945.     Height="100"
946.     Background="LightGreen"
947.     >
948.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
949. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
950. </Button><TextBlock Text="hello, world!" />
951. </Button><Button Width="100" Height="100">
952. <Button
953. <Button
954.     Width="100"
955.     Height="100"
956.     Background="LightGreen"
957.     >
958.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
959. </Button>Width="100"
960. <Button
961.     Width="100"
962.     Height="100"
963.     Background="LightGreen"
964.     >
965.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
966. </Button>Height="100"
967. <Button
968.     Width="100"
969.     Height="100"
970.     Background="LightGreen"
971.     >
972.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
973. </Button>Background="LightGreen"
974. <Button
975.     Width="100"
976.     Height="100"
977.     Background="LightGreen"
978.     >
979.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
980. </Button>>
981. <Button
982.     Width="100"
983.     Height="100"
984.     Background="LightGreen"
985.     >
986.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
987. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
988. </Button><TextBlock Text="hello, world!" />
989. </Button><Button Width="100" Height="100">
990. <Button
991. <Button
992.     Width="100"
993.     Height="100"
994.     Background="LightGreen"
995.     >
996.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
997. </Button>Width="100"
998. <Button
999.     Width="100"
1000.     Height="100"
1001.     Background="LightGreen"
1002.     >
1003.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1004. </Button>Height="100"
1005. <Button
1006.     Width="100"
1007.     Height="100"
1008.     Background="LightGreen"
1009.     >
1010.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1011. </Button>Background="LightGreen"
1012. <Button
1013.     Width="100"
1014.     Height="100"
1015.     Background="LightGreen"
1016.     >
1017.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1018. </Button>>
1019. <Button
1020.     Width="100"
1021.     Height="100"
1022.     Background="LightGreen"
1023.     >
1024.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1025. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1026. </Button><TextBlock Text="hello, world!" />
1027. </Button><Button Width="100" Height="100">
1028. <Button
1029. <Button
1030.     Width="100"
1031.     Height="100"
1032.     Background="LightGreen"
1033.     >
1034.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1035. </Button>Width="100"
1036. <Button
1037.     Width="100"
1038.     Height="100"
1039.     Background="LightGreen"
1040.     >
1041.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1042. </Button>Height="100"
1043. <Button
1044.     Width="100"
1045.     Height="100"
1046.     Background="LightGreen"
1047.     >
1048.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1049. </Button>Background="LightGreen"
1050. <Button
1051.     Width="100"
1052.     Height="100"
1053.     Background="LightGreen"
1054.     >
1055.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1056. </Button>>
1057. <Button
1058.     Width="100"
1059.     Height="100"
1060.     Background="LightGreen"
1061.     >
1062.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1063. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1064. </Button><TextBlock Text="hello, world!" />
1065. </Button><Button Width="100" Height="100">
1066. <Button
1067. <Button
1068.     Width="100"
1069.     Height="100"
1070.     Background="LightGreen"
1071.     >
1072.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1073. </Button>Width="100"
1074. <Button
1075.     Width="100"
1076.     Height="100"
1077.     Background="LightGreen"
1078.     >
1079.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1080. </Button>Height="100"
1081. <Button
1082.     Width="100"
1083.     Height="100"
1084.     Background="LightGreen"
1085.     >
1086.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1087. </Button>Background="LightGreen"
1088. <Button
1089.     Width="100"
1090.     Height="100"
1091.     Background="LightGreen"
1092.     >
1093.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1094. </Button>>
1095. <Button
1096.     Width="100"
1097.     Height="100"
1098.     Background="LightGreen"
1099.     >
1100.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1101. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1102. </Button><TextBlock Text="hello, world!" />
1103. </Button>

复制代码

我如果在利用它，一般我会利用它的 WrapPanel 和 Horizontal StackPanel。
2.1 WrapPanel 效果

效果：
WrapPanel 的可折叠性。

代码：

1. <Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button><Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button><Button Width="100" Height="100">
78. <Button
79. <Button
80.     Width="100"
81.     Height="100"
82.     Background="LightGreen"
83.     >
84.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
85. </Button>Width="100"
86. <Button
87.     Width="100"
88.     Height="100"
89.     Background="LightGreen"
90.     >
91.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
92. </Button>Height="100"
93. <Button
94.     Width="100"
95.     Height="100"
96.     Background="LightGreen"
97.     >
98.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
99. </Button>Background="LightGreen"
100. <Button
101.     Width="100"
102.     Height="100"
103.     Background="LightGreen"
104.     >
105.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
106. </Button>>
107. <Button
108.     Width="100"
109.     Height="100"
110.     Background="LightGreen"
111.     >
112.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
113. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Text="hello, world!" />
115. </Button><Button Width="100" Height="100">
116. <Button
117. <Button
118.     Width="100"
119.     Height="100"
120.     Background="LightGreen"
121.     >
122.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
123. </Button>Width="100"
124. <Button
125.     Width="100"
126.     Height="100"
127.     Background="LightGreen"
128.     >
129.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
130. </Button>Height="100"
131. <Button
132.     Width="100"
133.     Height="100"
134.     Background="LightGreen"
135.     >
136.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
137. </Button>Background="LightGreen"
138. <Button
139.     Width="100"
140.     Height="100"
141.     Background="LightGreen"
142.     >
143.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
144. </Button>>
145. <Button
146.     Width="100"
147.     Height="100"
148.     Background="LightGreen"
149.     >
150.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
151. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Text="hello, world!" />
153. </Button>

复制代码

2.2

效果：

代码：

1. <Button Width="100" Height="100">
2. <Button
3. <Button
4.     Width="100"
5.     Height="100"
6.     Background="LightGreen"
7.     >
8.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
9. </Button>Width="100"
10. <Button
11.     Width="100"
12.     Height="100"
13.     Background="LightGreen"
14.     >
15.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
16. </Button>Height="100"
17. <Button
18.     Width="100"
19.     Height="100"
20.     Background="LightGreen"
21.     >
22.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
23. </Button>Background="LightGreen"
24. <Button
25.     Width="100"
26.     Height="100"
27.     Background="LightGreen"
28.     >
29.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
30. </Button>>
31. <Button
32.     Width="100"
33.     Height="100"
34.     Background="LightGreen"
35.     >
36.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
37. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
38. </Button><TextBlock Text="hello, world!" />
39. </Button><Button Width="100" Height="100">
40. <Button
41. <Button
42.     Width="100"
43.     Height="100"
44.     Background="LightGreen"
45.     >
46.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
47. </Button>Width="100"
48. <Button
49.     Width="100"
50.     Height="100"
51.     Background="LightGreen"
52.     >
53.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
54. </Button>Height="100"
55. <Button
56.     Width="100"
57.     Height="100"
58.     Background="LightGreen"
59.     >
60.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
61. </Button>Background="LightGreen"
62. <Button
63.     Width="100"
64.     Height="100"
65.     Background="LightGreen"
66.     >
67.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
68. </Button>>
69. <Button
70.     Width="100"
71.     Height="100"
72.     Background="LightGreen"
73.     >
74.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
75. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
76. </Button><TextBlock Text="hello, world!" />
77. </Button><Button Width="100" Height="100">
78. <Button
79. <Button
80.     Width="100"
81.     Height="100"
82.     Background="LightGreen"
83.     >
84.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
85. </Button>Width="100"
86. <Button
87.     Width="100"
88.     Height="100"
89.     Background="LightGreen"
90.     >
91.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
92. </Button>Height="100"
93. <Button
94.     Width="100"
95.     Height="100"
96.     Background="LightGreen"
97.     >
98.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
99. </Button>Background="LightGreen"
100. <Button
101.     Width="100"
102.     Height="100"
103.     Background="LightGreen"
104.     >
105.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
106. </Button>>
107. <Button
108.     Width="100"
109.     Height="100"
110.     Background="LightGreen"
111.     >
112.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
113. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
114. </Button><TextBlock Text="hello, world!" />
115. </Button><Button Width="100" Height="100">
116. <Button
117. <Button
118.     Width="100"
119.     Height="100"
120.     Background="LightGreen"
121.     >
122.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
123. </Button>Width="100"
124. <Button
125.     Width="100"
126.     Height="100"
127.     Background="LightGreen"
128.     >
129.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
130. </Button>Height="100"
131. <Button
132.     Width="100"
133.     Height="100"
134.     Background="LightGreen"
135.     >
136.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
137. </Button>Background="LightGreen"
138. <Button
139.     Width="100"
140.     Height="100"
141.     Background="LightGreen"
142.     >
143.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
144. </Button>>
145. <Button
146.     Width="100"
147.     Height="100"
148.     Background="LightGreen"
149.     >
150.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
151. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
152. </Button><TextBlock Text="hello, world!" />
153. </Button>

复制代码

八、所谓 DataGrid 和 CellTemplate

这是 DataGrid 的默认样子：

1. [/code]除了显示一些栏位字段属性之外，你可能希望能本来的数据源中显示一些别的控件，比如我们上面界说的 DataTemplate，来帮助我们更加可视化的看到数据。
2. 你可以实现这样的效果：
3. [align=center][img]https://img2024.cnblogs.com/blog/2411090/202503/2411090-20250321115221487-810875909.png[/img][/align]
4. 代码如下：
5. [code]<Button Width="100" Height="100">
6. <Button
7. <Button
8.     Width="100"
9.     Height="100"
10.     Background="LightGreen"
11.     >
12.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
13. </Button>Width="100"
14. <Button
15.     Width="100"
16.     Height="100"
17.     Background="LightGreen"
18.     >
19.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
20. </Button>Height="100"
21. <Button
22.     Width="100"
23.     Height="100"
24.     Background="LightGreen"
25.     >
26.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
27. </Button>Background="LightGreen"
28. <Button
29.     Width="100"
30.     Height="100"
31.     Background="LightGreen"
32.     >
33.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
34. </Button>>
35. <Button
36.     Width="100"
37.     Height="100"
38.     Background="LightGreen"
39.     >
40.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
41. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
42. </Button><TextBlock Text="hello, world!" />
43. </Button><Button Width="100" Height="100">
44. <Button
45. <Button
46.     Width="100"
47.     Height="100"
48.     Background="LightGreen"
49.     >
50.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
51. </Button>Width="100"
52. <Button
53.     Width="100"
54.     Height="100"
55.     Background="LightGreen"
56.     >
57.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
58. </Button>Height="100"
59. <Button
60.     Width="100"
61.     Height="100"
62.     Background="LightGreen"
63.     >
64.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
65. </Button>Background="LightGreen"
66. <Button
67.     Width="100"
68.     Height="100"
69.     Background="LightGreen"
70.     >
71.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
72. </Button>>
73. <Button
74.     Width="100"
75.     Height="100"
76.     Background="LightGreen"
77.     >
78.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
79. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
80. </Button><TextBlock Text="hello, world!" />
81. </Button><Button Width="100" Height="100">
82. <Button
83. <Button
84.     Width="100"
85.     Height="100"
86.     Background="LightGreen"
87.     >
88.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
89. </Button>Width="100"
90. <Button
91.     Width="100"
92.     Height="100"
93.     Background="LightGreen"
94.     >
95.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
96. </Button>Height="100"
97. <Button
98.     Width="100"
99.     Height="100"
100.     Background="LightGreen"
101.     >
102.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
103. </Button>Background="LightGreen"
104. <Button
105.     Width="100"
106.     Height="100"
107.     Background="LightGreen"
108.     >
109.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
110. </Button>>
111. <Button
112.     Width="100"
113.     Height="100"
114.     Background="LightGreen"
115.     >
116.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
117. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
118. </Button><TextBlock Text="hello, world!" />
119. </Button><Button Width="100" Height="100">
120. <Button
121. <Button
122.     Width="100"
123.     Height="100"
124.     Background="LightGreen"
125.     >
126.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
127. </Button>Width="100"
128. <Button
129.     Width="100"
130.     Height="100"
131.     Background="LightGreen"
132.     >
133.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
134. </Button>Height="100"
135. <Button
136.     Width="100"
137.     Height="100"
138.     Background="LightGreen"
139.     >
140.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
141. </Button>Background="LightGreen"
142. <Button
143.     Width="100"
144.     Height="100"
145.     Background="LightGreen"
146.     >
147.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
148. </Button>>
149. <Button
150.     Width="100"
151.     Height="100"
152.     Background="LightGreen"
153.     >
154.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
155. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
156. </Button><TextBlock Text="hello, world!" />
157. </Button><Button Width="100" Height="100">
158. <Button
159. <Button
160.     Width="100"
161.     Height="100"
162.     Background="LightGreen"
163.     >
164.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
165. </Button>Width="100"
166. <Button
167.     Width="100"
168.     Height="100"
169.     Background="LightGreen"
170.     >
171.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
172. </Button>Height="100"
173. <Button
174.     Width="100"
175.     Height="100"
176.     Background="LightGreen"
177.     >
178.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
179. </Button>Background="LightGreen"
180. <Button
181.     Width="100"
182.     Height="100"
183.     Background="LightGreen"
184.     >
185.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
186. </Button>>
187. <Button
188.     Width="100"
189.     Height="100"
190.     Background="LightGreen"
191.     >
192.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
193. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
194. </Button><TextBlock Text="hello, world!" />
195. </Button><Button Width="100" Height="100">
196. <Button
197. <Button
198.     Width="100"
199.     Height="100"
200.     Background="LightGreen"
201.     >
202.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
203. </Button>Width="100"
204. <Button
205.     Width="100"
206.     Height="100"
207.     Background="LightGreen"
208.     >
209.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
210. </Button>Height="100"
211. <Button
212.     Width="100"
213.     Height="100"
214.     Background="LightGreen"
215.     >
216.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
217. </Button>Background="LightGreen"
218. <Button
219.     Width="100"
220.     Height="100"
221.     Background="LightGreen"
222.     >
223.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
224. </Button>>
225. <Button
226.     Width="100"
227.     Height="100"
228.     Background="LightGreen"
229.     >
230.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
231. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
232. </Button><TextBlock Text="hello, world!" />
233. </Button><Button Width="100" Height="100">
234. <Button
235. <Button
236.     Width="100"
237.     Height="100"
238.     Background="LightGreen"
239.     >
240.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
241. </Button>Width="100"
242. <Button
243.     Width="100"
244.     Height="100"
245.     Background="LightGreen"
246.     >
247.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
248. </Button>Height="100"
249. <Button
250.     Width="100"
251.     Height="100"
252.     Background="LightGreen"
253.     >
254.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
255. </Button>Background="LightGreen"
256. <Button
257.     Width="100"
258.     Height="100"
259.     Background="LightGreen"
260.     >
261.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
262. </Button>>
263. <Button
264.     Width="100"
265.     Height="100"
266.     Background="LightGreen"
267.     >
268.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
269. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
270. </Button><TextBlock Text="hello, world!" />
271. </Button><Button Width="100" Height="100">
272. <Button
273. <Button
274.     Width="100"
275.     Height="100"
276.     Background="LightGreen"
277.     >
278.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
279. </Button>Width="100"
280. <Button
281.     Width="100"
282.     Height="100"
283.     Background="LightGreen"
284.     >
285.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
286. </Button>Height="100"
287. <Button
288.     Width="100"
289.     Height="100"
290.     Background="LightGreen"
291.     >
292.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
293. </Button>Background="LightGreen"
294. <Button
295.     Width="100"
296.     Height="100"
297.     Background="LightGreen"
298.     >
299.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
300. </Button>>
301. <Button
302.     Width="100"
303.     Height="100"
304.     Background="LightGreen"
305.     >
306.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
307. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
308. </Button><TextBlock Text="hello, world!" />
309. </Button><Button Width="100" Height="100">
310. <Button
311. <Button
312.     Width="100"
313.     Height="100"
314.     Background="LightGreen"
315.     >
316.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
317. </Button>Width="100"
318. <Button
319.     Width="100"
320.     Height="100"
321.     Background="LightGreen"
322.     >
323.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
324. </Button>Height="100"
325. <Button
326.     Width="100"
327.     Height="100"
328.     Background="LightGreen"
329.     >
330.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
331. </Button>Background="LightGreen"
332. <Button
333.     Width="100"
334.     Height="100"
335.     Background="LightGreen"
336.     >
337.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
338. </Button>>
339. <Button
340.     Width="100"
341.     Height="100"
342.     Background="LightGreen"
343.     >
344.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
345. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
346. </Button><TextBlock Text="hello, world!" />
347. </Button><Button Width="100" Height="100">
348. <Button
349. <Button
350.     Width="100"
351.     Height="100"
352.     Background="LightGreen"
353.     >
354.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
355. </Button>Width="100"
356. <Button
357.     Width="100"
358.     Height="100"
359.     Background="LightGreen"
360.     >
361.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
362. </Button>Height="100"
363. <Button
364.     Width="100"
365.     Height="100"
366.     Background="LightGreen"
367.     >
368.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
369. </Button>Background="LightGreen"
370. <Button
371.     Width="100"
372.     Height="100"
373.     Background="LightGreen"
374.     >
375.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
376. </Button>>
377. <Button
378.     Width="100"
379.     Height="100"
380.     Background="LightGreen"
381.     >
382.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
383. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
384. </Button><TextBlock Text="hello, world!" />
385. </Button><Button Width="100" Height="100">
386. <Button
387. <Button
388.     Width="100"
389.     Height="100"
390.     Background="LightGreen"
391.     >
392.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
393. </Button>Width="100"
394. <Button
395.     Width="100"
396.     Height="100"
397.     Background="LightGreen"
398.     >
399.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
400. </Button>Height="100"
401. <Button
402.     Width="100"
403.     Height="100"
404.     Background="LightGreen"
405.     >
406.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
407. </Button>Background="LightGreen"
408. <Button
409.     Width="100"
410.     Height="100"
411.     Background="LightGreen"
412.     >
413.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
414. </Button>>
415. <Button
416.     Width="100"
417.     Height="100"
418.     Background="LightGreen"
419.     >
420.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
421. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
422. </Button><TextBlock Text="hello, world!" />
423. </Button><Button Width="100" Height="100">
424. <Button
425. <Button
426.     Width="100"
427.     Height="100"
428.     Background="LightGreen"
429.     >
430.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
431. </Button>Width="100"
432. <Button
433.     Width="100"
434.     Height="100"
435.     Background="LightGreen"
436.     >
437.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
438. </Button>Height="100"
439. <Button
440.     Width="100"
441.     Height="100"
442.     Background="LightGreen"
443.     >
444.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
445. </Button>Background="LightGreen"
446. <Button
447.     Width="100"
448.     Height="100"
449.     Background="LightGreen"
450.     >
451.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
452. </Button>>
453. <Button
454.     Width="100"
455.     Height="100"
456.     Background="LightGreen"
457.     >
458.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
459. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
460. </Button><TextBlock Text="hello, world!" />
461. </Button><Button Width="100" Height="100">
462. <Button
463. <Button
464.     Width="100"
465.     Height="100"
466.     Background="LightGreen"
467.     >
468.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
469. </Button>Width="100"
470. <Button
471.     Width="100"
472.     Height="100"
473.     Background="LightGreen"
474.     >
475.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
476. </Button>Height="100"
477. <Button
478.     Width="100"
479.     Height="100"
480.     Background="LightGreen"
481.     >
482.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
483. </Button>Background="LightGreen"
484. <Button
485.     Width="100"
486.     Height="100"
487.     Background="LightGreen"
488.     >
489.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
490. </Button>>
491. <Button
492.     Width="100"
493.     Height="100"
494.     Background="LightGreen"
495.     >
496.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
497. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
498. </Button><TextBlock Text="hello, world!" />
499. </Button><Button Width="100" Height="100">
500. <Button
501. <Button
502.     Width="100"
503.     Height="100"
504.     Background="LightGreen"
505.     >
506.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
507. </Button>Width="100"
508. <Button
509.     Width="100"
510.     Height="100"
511.     Background="LightGreen"
512.     >
513.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
514. </Button>Height="100"
515. <Button
516.     Width="100"
517.     Height="100"
518.     Background="LightGreen"
519.     >
520.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
521. </Button>Background="LightGreen"
522. <Button
523.     Width="100"
524.     Height="100"
525.     Background="LightGreen"
526.     >
527.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
528. </Button>>
529. <Button
530.     Width="100"
531.     Height="100"
532.     Background="LightGreen"
533.     >
534.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
535. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
536. </Button><TextBlock Text="hello, world!" />
537. </Button><Button Width="100" Height="100">
538. <Button
539. <Button
540.     Width="100"
541.     Height="100"
542.     Background="LightGreen"
543.     >
544.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
545. </Button>Width="100"
546. <Button
547.     Width="100"
548.     Height="100"
549.     Background="LightGreen"
550.     >
551.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
552. </Button>Height="100"
553. <Button
554.     Width="100"
555.     Height="100"
556.     Background="LightGreen"
557.     >
558.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
559. </Button>Background="LightGreen"
560. <Button
561.     Width="100"
562.     Height="100"
563.     Background="LightGreen"
564.     >
565.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
566. </Button>>
567. <Button
568.     Width="100"
569.     Height="100"
570.     Background="LightGreen"
571.     >
572.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
573. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
574. </Button><TextBlock Text="hello, world!" />
575. </Button><Button Width="100" Height="100">
576. <Button
577. <Button
578.     Width="100"
579.     Height="100"
580.     Background="LightGreen"
581.     >
582.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
583. </Button>Width="100"
584. <Button
585.     Width="100"
586.     Height="100"
587.     Background="LightGreen"
588.     >
589.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
590. </Button>Height="100"
591. <Button
592.     Width="100"
593.     Height="100"
594.     Background="LightGreen"
595.     >
596.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
597. </Button>Background="LightGreen"
598. <Button
599.     Width="100"
600.     Height="100"
601.     Background="LightGreen"
602.     >
603.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
604. </Button>>
605. <Button
606.     Width="100"
607.     Height="100"
608.     Background="LightGreen"
609.     >
610.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
611. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
612. </Button><TextBlock Text="hello, world!" />
613. </Button><Button Width="100" Height="100">
614. <Button
615. <Button
616.     Width="100"
617.     Height="100"
618.     Background="LightGreen"
619.     >
620.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
621. </Button>Width="100"
622. <Button
623.     Width="100"
624.     Height="100"
625.     Background="LightGreen"
626.     >
627.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
628. </Button>Height="100"
629. <Button
630.     Width="100"
631.     Height="100"
632.     Background="LightGreen"
633.     >
634.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
635. </Button>Background="LightGreen"
636. <Button
637.     Width="100"
638.     Height="100"
639.     Background="LightGreen"
640.     >
641.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
642. </Button>>
643. <Button
644.     Width="100"
645.     Height="100"
646.     Background="LightGreen"
647.     >
648.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
649. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
650. </Button><TextBlock Text="hello, world!" />
651. </Button><Button Width="100" Height="100">
652. <Button
653. <Button
654.     Width="100"
655.     Height="100"
656.     Background="LightGreen"
657.     >
658.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
659. </Button>Width="100"
660. <Button
661.     Width="100"
662.     Height="100"
663.     Background="LightGreen"
664.     >
665.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
666. </Button>Height="100"
667. <Button
668.     Width="100"
669.     Height="100"
670.     Background="LightGreen"
671.     >
672.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
673. </Button>Background="LightGreen"
674. <Button
675.     Width="100"
676.     Height="100"
677.     Background="LightGreen"
678.     >
679.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
680. </Button>>
681. <Button
682.     Width="100"
683.     Height="100"
684.     Background="LightGreen"
685.     >
686.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
687. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
688. </Button><TextBlock Text="hello, world!" />
689. </Button><Button Width="100" Height="100">
690. <Button
691. <Button
692.     Width="100"
693.     Height="100"
694.     Background="LightGreen"
695.     >
696.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
697. </Button>Width="100"
698. <Button
699.     Width="100"
700.     Height="100"
701.     Background="LightGreen"
702.     >
703.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
704. </Button>Height="100"
705. <Button
706.     Width="100"
707.     Height="100"
708.     Background="LightGreen"
709.     >
710.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
711. </Button>Background="LightGreen"
712. <Button
713.     Width="100"
714.     Height="100"
715.     Background="LightGreen"
716.     >
717.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
718. </Button>>
719. <Button
720.     Width="100"
721.     Height="100"
722.     Background="LightGreen"
723.     >
724.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
725. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
726. </Button><TextBlock Text="hello, world!" />
727. </Button><Button Width="100" Height="100">
728. <Button
729. <Button
730.     Width="100"
731.     Height="100"
732.     Background="LightGreen"
733.     >
734.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
735. </Button>Width="100"
736. <Button
737.     Width="100"
738.     Height="100"
739.     Background="LightGreen"
740.     >
741.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
742. </Button>Height="100"
743. <Button
744.     Width="100"
745.     Height="100"
746.     Background="LightGreen"
747.     >
748.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
749. </Button>Background="LightGreen"
750. <Button
751.     Width="100"
752.     Height="100"
753.     Background="LightGreen"
754.     >
755.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
756. </Button>>
757. <Button
758.     Width="100"
759.     Height="100"
760.     Background="LightGreen"
761.     >
762.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
763. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
764. </Button><TextBlock Text="hello, world!" />
765. </Button><Button Width="100" Height="100">
766. <Button
767. <Button
768.     Width="100"
769.     Height="100"
770.     Background="LightGreen"
771.     >
772.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
773. </Button>Width="100"
774. <Button
775.     Width="100"
776.     Height="100"
777.     Background="LightGreen"
778.     >
779.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
780. </Button>Height="100"
781. <Button
782.     Width="100"
783.     Height="100"
784.     Background="LightGreen"
785.     >
786.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
787. </Button>Background="LightGreen"
788. <Button
789.     Width="100"
790.     Height="100"
791.     Background="LightGreen"
792.     >
793.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
794. </Button>>
795. <Button
796.     Width="100"
797.     Height="100"
798.     Background="LightGreen"
799.     >
800.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
801. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
802. </Button><TextBlock Text="hello, world!" />
803. </Button><Button Width="100" Height="100">
804. <Button
805. <Button
806.     Width="100"
807.     Height="100"
808.     Background="LightGreen"
809.     >
810.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
811. </Button>Width="100"
812. <Button
813.     Width="100"
814.     Height="100"
815.     Background="LightGreen"
816.     >
817.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
818. </Button>Height="100"
819. <Button
820.     Width="100"
821.     Height="100"
822.     Background="LightGreen"
823.     >
824.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
825. </Button>Background="LightGreen"
826. <Button
827.     Width="100"
828.     Height="100"
829.     Background="LightGreen"
830.     >
831.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
832. </Button>>
833. <Button
834.     Width="100"
835.     Height="100"
836.     Background="LightGreen"
837.     >
838.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
839. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
840. </Button><TextBlock Text="hello, world!" />
841. </Button><Button Width="100" Height="100">
842. <Button
843. <Button
844.     Width="100"
845.     Height="100"
846.     Background="LightGreen"
847.     >
848.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
849. </Button>Width="100"
850. <Button
851.     Width="100"
852.     Height="100"
853.     Background="LightGreen"
854.     >
855.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
856. </Button>Height="100"
857. <Button
858.     Width="100"
859.     Height="100"
860.     Background="LightGreen"
861.     >
862.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
863. </Button>Background="LightGreen"
864. <Button
865.     Width="100"
866.     Height="100"
867.     Background="LightGreen"
868.     >
869.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
870. </Button>>
871. <Button
872.     Width="100"
873.     Height="100"
874.     Background="LightGreen"
875.     >
876.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
877. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
878. </Button><TextBlock Text="hello, world!" />
879. </Button><Button Width="100" Height="100">
880. <Button
881. <Button
882.     Width="100"
883.     Height="100"
884.     Background="LightGreen"
885.     >
886.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
887. </Button>Width="100"
888. <Button
889.     Width="100"
890.     Height="100"
891.     Background="LightGreen"
892.     >
893.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
894. </Button>Height="100"
895. <Button
896.     Width="100"
897.     Height="100"
898.     Background="LightGreen"
899.     >
900.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
901. </Button>Background="LightGreen"
902. <Button
903.     Width="100"
904.     Height="100"
905.     Background="LightGreen"
906.     >
907.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
908. </Button>>
909. <Button
910.     Width="100"
911.     Height="100"
912.     Background="LightGreen"
913.     >
914.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
915. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
916. </Button><TextBlock Text="hello, world!" />
917. </Button><Button Width="100" Height="100">
918. <Button
919. <Button
920.     Width="100"
921.     Height="100"
922.     Background="LightGreen"
923.     >
924.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
925. </Button>Width="100"
926. <Button
927.     Width="100"
928.     Height="100"
929.     Background="LightGreen"
930.     >
931.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
932. </Button>Height="100"
933. <Button
934.     Width="100"
935.     Height="100"
936.     Background="LightGreen"
937.     >
938.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
939. </Button>Background="LightGreen"
940. <Button
941.     Width="100"
942.     Height="100"
943.     Background="LightGreen"
944.     >
945.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
946. </Button>>
947. <Button
948.     Width="100"
949.     Height="100"
950.     Background="LightGreen"
951.     >
952.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
953. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
954. </Button><TextBlock Text="hello, world!" />
955. </Button><Button Width="100" Height="100">
956. <Button
957. <Button
958.     Width="100"
959.     Height="100"
960.     Background="LightGreen"
961.     >
962.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
963. </Button>Width="100"
964. <Button
965.     Width="100"
966.     Height="100"
967.     Background="LightGreen"
968.     >
969.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
970. </Button>Height="100"
971. <Button
972.     Width="100"
973.     Height="100"
974.     Background="LightGreen"
975.     >
976.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
977. </Button>Background="LightGreen"
978. <Button
979.     Width="100"
980.     Height="100"
981.     Background="LightGreen"
982.     >
983.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
984. </Button>>
985. <Button
986.     Width="100"
987.     Height="100"
988.     Background="LightGreen"
989.     >
990.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
991. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
992. </Button><TextBlock Text="hello, world!" />
993. </Button><Button Width="100" Height="100">
994. <Button
995. <Button
996.     Width="100"
997.     Height="100"
998.     Background="LightGreen"
999.     >
1000.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1001. </Button>Width="100"
1002. <Button
1003.     Width="100"
1004.     Height="100"
1005.     Background="LightGreen"
1006.     >
1007.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1008. </Button>Height="100"
1009. <Button
1010.     Width="100"
1011.     Height="100"
1012.     Background="LightGreen"
1013.     >
1014.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1015. </Button>Background="LightGreen"
1016. <Button
1017.     Width="100"
1018.     Height="100"
1019.     Background="LightGreen"
1020.     >
1021.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1022. </Button>>
1023. <Button
1024.     Width="100"
1025.     Height="100"
1026.     Background="LightGreen"
1027.     >
1028.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1029. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1030. </Button><TextBlock Text="hello, world!" />
1031. </Button><Button Width="100" Height="100">
1032. <Button
1033. <Button
1034.     Width="100"
1035.     Height="100"
1036.     Background="LightGreen"
1037.     >
1038.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1039. </Button>Width="100"
1040. <Button
1041.     Width="100"
1042.     Height="100"
1043.     Background="LightGreen"
1044.     >
1045.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1046. </Button>Height="100"
1047. <Button
1048.     Width="100"
1049.     Height="100"
1050.     Background="LightGreen"
1051.     >
1052.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1053. </Button>Background="LightGreen"
1054. <Button
1055.     Width="100"
1056.     Height="100"
1057.     Background="LightGreen"
1058.     >
1059.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1060. </Button>>
1061. <Button
1062.     Width="100"
1063.     Height="100"
1064.     Background="LightGreen"
1065.     >
1066.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1067. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1068. </Button><TextBlock Text="hello, world!" />
1069. </Button><Button Width="100" Height="100">
1070. <Button
1071. <Button
1072.     Width="100"
1073.     Height="100"
1074.     Background="LightGreen"
1075.     >
1076.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1077. </Button>Width="100"
1078. <Button
1079.     Width="100"
1080.     Height="100"
1081.     Background="LightGreen"
1082.     >
1083.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1084. </Button>Height="100"
1085. <Button
1086.     Width="100"
1087.     Height="100"
1088.     Background="LightGreen"
1089.     >
1090.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1091. </Button>Background="LightGreen"
1092. <Button
1093.     Width="100"
1094.     Height="100"
1095.     Background="LightGreen"
1096.     >
1097.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1098. </Button>>
1099. <Button
1100.     Width="100"
1101.     Height="100"
1102.     Background="LightGreen"
1103.     >
1104.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1105. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1106. </Button><TextBlock Text="hello, world!" />
1107. </Button><Button Width="100" Height="100">
1108. <Button
1109. <Button
1110.     Width="100"
1111.     Height="100"
1112.     Background="LightGreen"
1113.     >
1114.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1115. </Button>Width="100"
1116. <Button
1117.     Width="100"
1118.     Height="100"
1119.     Background="LightGreen"
1120.     >
1121.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1122. </Button>Height="100"
1123. <Button
1124.     Width="100"
1125.     Height="100"
1126.     Background="LightGreen"
1127.     >
1128.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1129. </Button>Background="LightGreen"
1130. <Button
1131.     Width="100"
1132.     Height="100"
1133.     Background="LightGreen"
1134.     >
1135.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1136. </Button>>
1137. <Button
1138.     Width="100"
1139.     Height="100"
1140.     Background="LightGreen"
1141.     >
1142.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1143. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1144. </Button><TextBlock Text="hello, world!" />
1145. </Button><Button Width="100" Height="100">
1146. <Button
1147. <Button
1148.     Width="100"
1149.     Height="100"
1150.     Background="LightGreen"
1151.     >
1152.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1153. </Button>Width="100"
1154. <Button
1155.     Width="100"
1156.     Height="100"
1157.     Background="LightGreen"
1158.     >
1159.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1160. </Button>Height="100"
1161. <Button
1162.     Width="100"
1163.     Height="100"
1164.     Background="LightGreen"
1165.     >
1166.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1167. </Button>Background="LightGreen"
1168. <Button
1169.     Width="100"
1170.     Height="100"
1171.     Background="LightGreen"
1172.     >
1173.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1174. </Button>>
1175. <Button
1176.     Width="100"
1177.     Height="100"
1178.     Background="LightGreen"
1179.     >
1180.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1181. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1182. </Button><TextBlock Text="hello, world!" />
1183. </Button><Button Width="100" Height="100">
1184. <Button
1185. <Button
1186.     Width="100"
1187.     Height="100"
1188.     Background="LightGreen"
1189.     >
1190.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1191. </Button>Width="100"
1192. <Button
1193.     Width="100"
1194.     Height="100"
1195.     Background="LightGreen"
1196.     >
1197.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1198. </Button>Height="100"
1199. <Button
1200.     Width="100"
1201.     Height="100"
1202.     Background="LightGreen"
1203.     >
1204.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1205. </Button>Background="LightGreen"
1206. <Button
1207.     Width="100"
1208.     Height="100"
1209.     Background="LightGreen"
1210.     >
1211.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1212. </Button>>
1213. <Button
1214.     Width="100"
1215.     Height="100"
1216.     Background="LightGreen"
1217.     >
1218.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1219. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1220. </Button><TextBlock Text="hello, world!" />
1221. </Button><Button Width="100" Height="100">
1222. <Button
1223. <Button
1224.     Width="100"
1225.     Height="100"
1226.     Background="LightGreen"
1227.     >
1228.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1229. </Button>Width="100"
1230. <Button
1231.     Width="100"
1232.     Height="100"
1233.     Background="LightGreen"
1234.     >
1235.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1236. </Button>Height="100"
1237. <Button
1238.     Width="100"
1239.     Height="100"
1240.     Background="LightGreen"
1241.     >
1242.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1243. </Button>Background="LightGreen"
1244. <Button
1245.     Width="100"
1246.     Height="100"
1247.     Background="LightGreen"
1248.     >
1249.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1250. </Button>>
1251. <Button
1252.     Width="100"
1253.     Height="100"
1254.     Background="LightGreen"
1255.     >
1256.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1257. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1258. </Button><TextBlock Text="hello, world!" />
1259. </Button><Button Width="100" Height="100">
1260. <Button
1261. <Button
1262.     Width="100"
1263.     Height="100"
1264.     Background="LightGreen"
1265.     >
1266.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1267. </Button>Width="100"
1268. <Button
1269.     Width="100"
1270.     Height="100"
1271.     Background="LightGreen"
1272.     >
1273.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1274. </Button>Height="100"
1275. <Button
1276.     Width="100"
1277.     Height="100"
1278.     Background="LightGreen"
1279.     >
1280.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1281. </Button>Background="LightGreen"
1282. <Button
1283.     Width="100"
1284.     Height="100"
1285.     Background="LightGreen"
1286.     >
1287.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1288. </Button>>
1289. <Button
1290.     Width="100"
1291.     Height="100"
1292.     Background="LightGreen"
1293.     >
1294.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1295. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1296. </Button><TextBlock Text="hello, world!" />
1297. </Button><Button Width="100" Height="100">
1298. <Button
1299. <Button
1300.     Width="100"
1301.     Height="100"
1302.     Background="LightGreen"
1303.     >
1304.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1305. </Button>Width="100"
1306. <Button
1307.     Width="100"
1308.     Height="100"
1309.     Background="LightGreen"
1310.     >
1311.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1312. </Button>Height="100"
1313. <Button
1314.     Width="100"
1315.     Height="100"
1316.     Background="LightGreen"
1317.     >
1318.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1319. </Button>Background="LightGreen"
1320. <Button
1321.     Width="100"
1322.     Height="100"
1323.     Background="LightGreen"
1324.     >
1325.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1326. </Button>>
1327. <Button
1328.     Width="100"
1329.     Height="100"
1330.     Background="LightGreen"
1331.     >
1332.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1333. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1334. </Button><TextBlock Text="hello, world!" />
1335. </Button><Button Width="100" Height="100">
1336. <Button
1337. <Button
1338.     Width="100"
1339.     Height="100"
1340.     Background="LightGreen"
1341.     >
1342.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1343. </Button>Width="100"
1344. <Button
1345.     Width="100"
1346.     Height="100"
1347.     Background="LightGreen"
1348.     >
1349.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1350. </Button>Height="100"
1351. <Button
1352.     Width="100"
1353.     Height="100"
1354.     Background="LightGreen"
1355.     >
1356.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1357. </Button>Background="LightGreen"
1358. <Button
1359.     Width="100"
1360.     Height="100"
1361.     Background="LightGreen"
1362.     >
1363.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1364. </Button>>
1365. <Button
1366.     Width="100"
1367.     Height="100"
1368.     Background="LightGreen"
1369.     >
1370.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1371. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1372. </Button><TextBlock Text="hello, world!" />
1373. </Button><Button Width="100" Height="100">
1374. <Button
1375. <Button
1376.     Width="100"
1377.     Height="100"
1378.     Background="LightGreen"
1379.     >
1380.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1381. </Button>Width="100"
1382. <Button
1383.     Width="100"
1384.     Height="100"
1385.     Background="LightGreen"
1386.     >
1387.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1388. </Button>Height="100"
1389. <Button
1390.     Width="100"
1391.     Height="100"
1392.     Background="LightGreen"
1393.     >
1394.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1395. </Button>Background="LightGreen"
1396. <Button
1397.     Width="100"
1398.     Height="100"
1399.     Background="LightGreen"
1400.     >
1401.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1402. </Button>>
1403. <Button
1404.     Width="100"
1405.     Height="100"
1406.     Background="LightGreen"
1407.     >
1408.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1409. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1410. </Button><TextBlock Text="hello, world!" />
1411. </Button><Button Width="100" Height="100">
1412. <Button
1413. <Button
1414.     Width="100"
1415.     Height="100"
1416.     Background="LightGreen"
1417.     >
1418.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1419. </Button>Width="100"
1420. <Button
1421.     Width="100"
1422.     Height="100"
1423.     Background="LightGreen"
1424.     >
1425.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1426. </Button>Height="100"
1427. <Button
1428.     Width="100"
1429.     Height="100"
1430.     Background="LightGreen"
1431.     >
1432.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1433. </Button>Background="LightGreen"
1434. <Button
1435.     Width="100"
1436.     Height="100"
1437.     Background="LightGreen"
1438.     >
1439.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1440. </Button>>
1441. <Button
1442.     Width="100"
1443.     Height="100"
1444.     Background="LightGreen"
1445.     >
1446.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1447. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1448. </Button><TextBlock Text="hello, world!" />
1449. </Button><Button Width="100" Height="100">
1450. <Button
1451. <Button
1452.     Width="100"
1453.     Height="100"
1454.     Background="LightGreen"
1455.     >
1456.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1457. </Button>Width="100"
1458. <Button
1459.     Width="100"
1460.     Height="100"
1461.     Background="LightGreen"
1462.     >
1463.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1464. </Button>Height="100"
1465. <Button
1466.     Width="100"
1467.     Height="100"
1468.     Background="LightGreen"
1469.     >
1470.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1471. </Button>Background="LightGreen"
1472. <Button
1473.     Width="100"
1474.     Height="100"
1475.     Background="LightGreen"
1476.     >
1477.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1478. </Button>>
1479. <Button
1480.     Width="100"
1481.     Height="100"
1482.     Background="LightGreen"
1483.     >
1484.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1485. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1486. </Button><TextBlock Text="hello, world!" />
1487. </Button><Button Width="100" Height="100">
1488. <Button
1489. <Button
1490.     Width="100"
1491.     Height="100"
1492.     Background="LightGreen"
1493.     >
1494.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1495. </Button>Width="100"
1496. <Button
1497.     Width="100"
1498.     Height="100"
1499.     Background="LightGreen"
1500.     >
1501.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1502. </Button>Height="100"
1503. <Button
1504.     Width="100"
1505.     Height="100"
1506.     Background="LightGreen"
1507.     >
1508.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1509. </Button>Background="LightGreen"
1510. <Button
1511.     Width="100"
1512.     Height="100"
1513.     Background="LightGreen"
1514.     >
1515.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1516. </Button>>
1517. <Button
1518.     Width="100"
1519.     Height="100"
1520.     Background="LightGreen"
1521.     >
1522.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1523. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1524. </Button><TextBlock Text="hello, world!" />
1525. </Button><Button Width="100" Height="100">
1526. <Button
1527. <Button
1528.     Width="100"
1529.     Height="100"
1530.     Background="LightGreen"
1531.     >
1532.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1533. </Button>Width="100"
1534. <Button
1535.     Width="100"
1536.     Height="100"
1537.     Background="LightGreen"
1538.     >
1539.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1540. </Button>Height="100"
1541. <Button
1542.     Width="100"
1543.     Height="100"
1544.     Background="LightGreen"
1545.     >
1546.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1547. </Button>Background="LightGreen"
1548. <Button
1549.     Width="100"
1550.     Height="100"
1551.     Background="LightGreen"
1552.     >
1553.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1554. </Button>>
1555. <Button
1556.     Width="100"
1557.     Height="100"
1558.     Background="LightGreen"
1559.     >
1560.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1561. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1562. </Button><TextBlock Text="hello, world!" />
1563. </Button><Button Width="100" Height="100">
1564. <Button
1565. <Button
1566.     Width="100"
1567.     Height="100"
1568.     Background="LightGreen"
1569.     >
1570.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1571. </Button>Width="100"
1572. <Button
1573.     Width="100"
1574.     Height="100"
1575.     Background="LightGreen"
1576.     >
1577.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1578. </Button>Height="100"
1579. <Button
1580.     Width="100"
1581.     Height="100"
1582.     Background="LightGreen"
1583.     >
1584.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1585. </Button>Background="LightGreen"
1586. <Button
1587.     Width="100"
1588.     Height="100"
1589.     Background="LightGreen"
1590.     >
1591.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1592. </Button>>
1593. <Button
1594.     Width="100"
1595.     Height="100"
1596.     Background="LightGreen"
1597.     >
1598.     <TextBlock Name="PART_TextBlock" Text="hello, world!" />
1599. </Button><TextBlock Name="PART_TextBlock" Text="hello, world!" />
1600. </Button><TextBlock Text="hello, world!" />
1601. </Button>

复制代码

推荐用法：可以用来显示重要程度比如红色绿色、进度百分比等等效果，具体想要可视化什么取决于业务需求。
九、总结

属性名类型用法TemplateControlTemplate在 Control 控件中的 Template 属性，是 WPF 最为底子的内容，是所有控件的可复用性的保障，通常和 Style 搭配，编写 ControlTemplate 就好比在 xaml 中编写函数一样，具有非常重要的工程意义。ContentTemplateDataTemplate所有 ContentControl（如 Button）实现，会在控件模板 ControlTemplate 中的某些 ContentPresenter 将会负担解析和出现它们的使命，条件是你需要传递已往。ItemTemplateDataTemplate集合容器之以是可以或许出现内容就是由于它每一项都是一个 ContentPresenter，容器将会把界说的 ItemTemplate 信息交给每一个 ContentPresenter 的 ContentTemplate 中，把每一项的数据信息交给 ContentPresenter 的 Content 中，末了实现列表项的出现，具领会有 ItemsPresenter 的参与ItemsPanelItemsPanelTemplate属于 ItemsControl 和 ListBox 等数据呈出现容器，用于描述每一项应该如何排布，默认是 StackPanel Vertical 布局，你完全可以改成 WrapPanel，Canvas，StackPanel Horizontal，Grid 等等的布局容器CellTemplateDataTemplateWPF 出于 DataGrid 更好可视化的角度为你提供的办法
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。