WPF 和 Avalonia 开发者的 html css 前端指南 Grid 篇

WPF 和 Avalonia 开发者的 html css 前端指南 Grid 篇

笔者前端框架使用的是 Vue3 + Deno。
笔者主要会以 Avalonia 作为 C# 技术部分的示例。
本文主要是向大家列出 WPF 和 Avalonia 的 Grid 在 html 和 css 的实现方法。
你其实也完全可以使用纯原生的 html+css，或者是 React、Blazor 等等框架来实现，因为本质是 html + css。

一、Grid 的创建

在 Avalonia 中，我们创建了一个这样的 Grid，一个天蓝色的具有固定尺寸，内部具有一个 TextBlock 元素的布局。

1. <Grid
2. <Grid
3.     Width="300"
4.     Height="300"
5.     Background="Aqua">
6.     <TextBlock
7. <template>
8.   
9.    
10.   
11. </template>HorizontalAlignment="Center"
12. <template>
13.   
14.    
15.   
16. </template>VerticalAlignment="Center"
17. <template>
18.   
19.    
20.   
21. </template>Text="hello avalonia" />
22. </Grid>Width="300"
23. <Grid
24.     Width="300"
25.     Height="300"
26.     Background="Aqua">
27.     <TextBlock
28. <template>
29.   
30.    
31.   
32. </template>HorizontalAlignment="Center"
33. <template>
34.   
35.    
36.   
37. </template>VerticalAlignment="Center"
38. <template>
39.   
40.    
41.   
42. </template>Text="hello avalonia" />
43. </Grid>Height="300"
44. <Grid
45.     Width="300"
46.     Height="300"
47.     Background="Aqua">
48.     <TextBlock
49. <template>
50.   
51.    
52.   
53. </template>HorizontalAlignment="Center"
54. <template>
55.   
56.    
57.   
58. </template>VerticalAlignment="Center"
59. <template>
60.   
61.    
62.   
63. </template>Text="hello avalonia" />
64. </Grid>Background="Aqua">
65. <Grid
66.     Width="300"
67.     Height="300"
68.     Background="Aqua">
69.     <TextBlock
70. <template>
71.   
72.    
73.   
74. </template>HorizontalAlignment="Center"
75. <template>
76.   
77.    
78.   
79. </template>VerticalAlignment="Center"
80. <template>
81.   
82.    
83.   
84. </template>Text="hello avalonia" />
85. </Grid><TextBlock Text="hello avalonia" />
86. </Grid>

复制代码

在 WPF 中，内部的 TextBlock 理应会居中……但是 Avalonia 中是这样的，很是奇怪。
在前端的部分，我们可以以这样的方式创建一个同样效果的网格。

1. <Grid
2. <Grid
3.     Width="300"
4.     Height="300"
5.     Background="Aqua">
6.     <TextBlock
7. <template>
8.   
9.    
10.   
11. </template>HorizontalAlignment="Center"
12. <template>
13.   
14.    
15.   
16. </template>VerticalAlignment="Center"
17. <template>
18.   
19.    
20.   
21. </template>Text="hello avalonia" />
22. </Grid>Width="300"
23. <Grid
24.     Width="300"
25.     Height="300"
26.     Background="Aqua">
27.     <TextBlock
28. <template>
29.   
30.    
31.   
32. </template>HorizontalAlignment="Center"
33. <template>
34.   
35.    
36.   
37. </template>VerticalAlignment="Center"
38. <template>
39.   
40.    
41.   
42. </template>Text="hello avalonia" />
43. </Grid>Height="300"
44. <Grid
45.     Width="300"
46.     Height="300"
47.     Background="Aqua">
48.     <TextBlock
49. <template>
50.   
51.    
52.   
53. </template>HorizontalAlignment="Center"
54. <template>
55.   
56.    
57.   
58. </template>VerticalAlignment="Center"
59. <template>
60.   
61.    
62.   
63. </template>Text="hello avalonia" />
64. </Grid>Background="Aqua">
65. <Grid
66.     Width="300"
67.     Height="300"
68.     Background="Aqua">
69.     <TextBlock
70. <template>
71.   
72.    
73.   
74. </template>HorizontalAlignment="Center"
75. <template>
76.   
77.    
78.   
79. </template>VerticalAlignment="Center"
80. <template>
81.   
82.    
83.   
84. </template>Text="hello avalonia" />
85. </Grid><TextBlock Text="hello avalonia" />
86. </Grid>  hello html+css  

复制代码

在这边，你可以发现一些共通之处，于是我们来列一下对应关系吧。
WPF 和 Avaloniahtml + css备注display:gridBackgroundbackground-color事实上 background-color 只是 css 中代表纯色的样式，如果要填入图片得用另外的属性，我们会在 background 的地方详细说明Widthwidth在 css 中要注意有单位，如 pxHeightheight在 css 中要注意有单位，如 px二、在网格中的对齐

你可以发现，我们默认创建出来的结构，样子根本不一样，原因是因为各个框架对于默认对齐的看法不一样，在前端中，水平居中比垂直居中要来的显眼很多……
那么我们来将内容进行居中吧。
在 Avalonia 中，我们为内部的 TextBlock 添加了 HorizontalAlignment="Center" 和 VerticalAlignment="Center"，通过这种方式实现了居中。

具体代码请看这里：

1. <Grid
2. <Grid
3.     Width="300"
4.     Height="300"
5.     Background="Aqua">
6.     <TextBlock
7. <template>
8.   
9.    
10.   
11. </template>HorizontalAlignment="Center"
12. <template>
13.   
14.    
15.   
16. </template>VerticalAlignment="Center"
17. <template>
18.   
19.    
20.   
21. </template>Text="hello avalonia" />
22. </Grid>Width="300"
23. <Grid
24.     Width="300"
25.     Height="300"
26.     Background="Aqua">
27.     <TextBlock
28. <template>
29.   
30.    
31.   
32. </template>HorizontalAlignment="Center"
33. <template>
34.   
35.    
36.   
37. </template>VerticalAlignment="Center"
38. <template>
39.   
40.    
41.   
42. </template>Text="hello avalonia" />
43. </Grid>Height="300"
44. <Grid
45.     Width="300"
46.     Height="300"
47.     Background="Aqua">
48.     <TextBlock
49. <template>
50.   
51.    
52.   
53. </template>HorizontalAlignment="Center"
54. <template>
55.   
56.    
57.   
58. </template>VerticalAlignment="Center"
59. <template>
60.   
61.    
62.   
63. </template>Text="hello avalonia" />
64. </Grid>Background="Aqua">
65. <Grid
66.     Width="300"
67.     Height="300"
68.     Background="Aqua">
69.     <TextBlock
70. <template>
71.   
72.    
73.   
74. </template>HorizontalAlignment="Center"
75. <template>
76.   
77.    
78.   
79. </template>VerticalAlignment="Center"
80. <template>
81.   
82.    
83.   
84. </template>Text="hello avalonia" />
85. </Grid><TextBlock Text="hello avalonia" />
86. </Grid>

复制代码

在前端的实现中，我们可以做成这样的效果：

我们使用了 justify-self: center 和 align-self: center 来让内容进行了居中。
其中 justify-self 代表水平对齐，参考 HorizontalAlignment ，align-self 代表垂直对齐，参考 VerticalAlignment。
详细的对应表我们可以来看一下这个：
WPF 和 Avaloniahtml + css备注HorizontalAlignment="Left"justify-self: self-start水平、左对齐HorizontalAlignment="Right"justify-self: self-end水平、右对齐HorizontalAlignment="Center"justify-self: center水平、居中VerticalAlignment="Top"align-self: self-start竖直、顶对齐VerticalAlignment="Bottom"align-self: self-end竖直、底对齐VerticalAlignment="Center"align-self: center竖直、居中VerticalAlignment="Stretch"align-self: stretch水平、拉伸VerticalAlignment="Stretch"align-self: stretch竖直、拉伸

同样的，如果你使用 Stretch 拉伸，宽度和高度请不要指定。

我们来看一下在前端使用 stretch 和 margin 的例子：

这就是 具体代码请注意 .grid-child 的效果。

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

复制代码

三、Grid 的网格切分

1. WPF 和 Avalonia 的网格切分

说到网格，必不可少的就是介绍网格的切分了。
我们虽然我使用的是 Avalonia，但是为了保证和 WPF 的兼容，我们还是使用符合 WPF 风格的网格切分来进行布局。
我们希望在每个网格上提供一个 TextBlock，来看看怎么样吧。

1. <Grid
2. <Grid
3.     Width="300"
4.     Height="300"
5.     Background="Aqua">
6.     <TextBlock
7. <template>
8.   
9.    
10.   
11. </template>HorizontalAlignment="Center"
12. <template>
13.   
14.    
15.   
16. </template>VerticalAlignment="Center"
17. <template>
18.   
19.    
20.   
21. </template>Text="hello avalonia" />
22. </Grid>Width="300"
23. <Grid
24.     Width="300"
25.     Height="300"
26.     Background="Aqua">
27.     <TextBlock
28. <template>
29.   
30.    
31.   
32. </template>HorizontalAlignment="Center"
33. <template>
34.   
35.    
36.   
37. </template>VerticalAlignment="Center"
38. <template>
39.   
40.    
41.   
42. </template>Text="hello avalonia" />
43. </Grid>Height="300"
44. <Grid
45.     Width="300"
46.     Height="300"
47.     Background="Aqua">
48.     <TextBlock
49. <template>
50.   
51.    
52.   
53. </template>HorizontalAlignment="Center"
54. <template>
55.   
56.    
57.   
58. </template>VerticalAlignment="Center"
59. <template>
60.   
61.    
62.   
63. </template>Text="hello avalonia" />
64. </Grid>Background="Aqua">
65. <Grid
66.     Width="300"
67.     Height="300"
68.     Background="Aqua">
69.     <TextBlock
70. <template>
71.   
72.    
73.   
74. </template>HorizontalAlignment="Center"
75. <template>
76.   
77.    
78.   
79. </template>VerticalAlignment="Center"
80. <template>
81.   
82.    
83.   
84. </template>Text="hello avalonia" />
85. </Grid><TextBlock Text="hello avalonia" />
86. </Grid><Grid
87. <Grid
88.     Width="300"
89.     Height="300"
90.     Background="Aqua">
91.     <TextBlock
92. <template>
93.   
94.    
95.   
96. </template>HorizontalAlignment="Center"
97. <template>
98.   
99.    
100.   
101. </template>VerticalAlignment="Center"
102. <template>
103.   
104.    
105.   
106. </template>Text="hello avalonia" />
107. </Grid>Width="300"
108. <Grid
109.     Width="300"
110.     Height="300"
111.     Background="Aqua">
112.     <TextBlock
113. <template>
114.   
115.    
116.   
117. </template>HorizontalAlignment="Center"
118. <template>
119.   
120.    
121.   
122. </template>VerticalAlignment="Center"
123. <template>
124.   
125.    
126.   
127. </template>Text="hello avalonia" />
128. </Grid>Height="300"
129. <Grid
130.     Width="300"
131.     Height="300"
132.     Background="Aqua">
133.     <TextBlock
134. <template>
135.   
136.    
137.   
138. </template>HorizontalAlignment="Center"
139. <template>
140.   
141.    
142.   
143. </template>VerticalAlignment="Center"
144. <template>
145.   
146.    
147.   
148. </template>Text="hello avalonia" />
149. </Grid>Background="Aqua">
150. <Grid
151.     Width="300"
152.     Height="300"
153.     Background="Aqua">
154.     <TextBlock
155. <template>
156.   
157.    
158.   
159. </template>HorizontalAlignment="Center"
160. <template>
161.   
162.    
163.   
164. </template>VerticalAlignment="Center"
165. <template>
166.   
167.    
168.   
169. </template>Text="hello avalonia" />
170. </Grid><TextBlock Text="hello avalonia" />
171. </Grid><Grid
172. <Grid
173.     Width="300"
174.     Height="300"
175.     Background="Aqua">
176.     <TextBlock
177. <template>
178.   
179.    
180.   
181. </template>HorizontalAlignment="Center"
182. <template>
183.   
184.    
185.   
186. </template>VerticalAlignment="Center"
187. <template>
188.   
189.    
190.   
191. </template>Text="hello avalonia" />
192. </Grid>Width="300"
193. <Grid
194.     Width="300"
195.     Height="300"
196.     Background="Aqua">
197.     <TextBlock
198. <template>
199.   
200.    
201.   
202. </template>HorizontalAlignment="Center"
203. <template>
204.   
205.    
206.   
207. </template>VerticalAlignment="Center"
208. <template>
209.   
210.    
211.   
212. </template>Text="hello avalonia" />
213. </Grid>Height="300"
214. <Grid
215.     Width="300"
216.     Height="300"
217.     Background="Aqua">
218.     <TextBlock
219. <template>
220.   
221.    
222.   
223. </template>HorizontalAlignment="Center"
224. <template>
225.   
226.    
227.   
228. </template>VerticalAlignment="Center"
229. <template>
230.   
231.    
232.   
233. </template>Text="hello avalonia" />
234. </Grid>Background="Aqua">
235. <Grid
236.     Width="300"
237.     Height="300"
238.     Background="Aqua">
239.     <TextBlock
240. <template>
241.   
242.    
243.   
244. </template>HorizontalAlignment="Center"
245. <template>
246.   
247.    
248.   
249. </template>VerticalAlignment="Center"
250. <template>
251.   
252.    
253.   
254. </template>Text="hello avalonia" />
255. </Grid><TextBlock Text="hello avalonia" />
256. </Grid><Grid
257. <Grid
258.     Width="300"
259.     Height="300"
260.     Background="Aqua">
261.     <TextBlock
262. <template>
263.   
264.    
265.   
266. </template>HorizontalAlignment="Center"
267. <template>
268.   
269.    
270.   
271. </template>VerticalAlignment="Center"
272. <template>
273.   
274.    
275.   
276. </template>Text="hello avalonia" />
277. </Grid>Width="300"
278. <Grid
279.     Width="300"
280.     Height="300"
281.     Background="Aqua">
282.     <TextBlock
283. <template>
284.   
285.    
286.   
287. </template>HorizontalAlignment="Center"
288. <template>
289.   
290.    
291.   
292. </template>VerticalAlignment="Center"
293. <template>
294.   
295.    
296.   
297. </template>Text="hello avalonia" />
298. </Grid>Height="300"
299. <Grid
300.     Width="300"
301.     Height="300"
302.     Background="Aqua">
303.     <TextBlock
304. <template>
305.   
306.    
307.   
308. </template>HorizontalAlignment="Center"
309. <template>
310.   
311.    
312.   
313. </template>VerticalAlignment="Center"
314. <template>
315.   
316.    
317.   
318. </template>Text="hello avalonia" />
319. </Grid>Background="Aqua">
320. <Grid
321.     Width="300"
322.     Height="300"
323.     Background="Aqua">
324.     <TextBlock
325. <template>
326.   
327.    
328.   
329. </template>HorizontalAlignment="Center"
330. <template>
331.   
332.    
333.   
334. </template>VerticalAlignment="Center"
335. <template>
336.   
337.    
338.   
339. </template>Text="hello avalonia" />
340. </Grid><TextBlock Text="hello avalonia" />
341. </Grid><Grid
342. <Grid
343.     Width="300"
344.     Height="300"
345.     Background="Aqua">
346.     <TextBlock
347. <template>
348.   
349.    
350.   
351. </template>HorizontalAlignment="Center"
352. <template>
353.   
354.    
355.   
356. </template>VerticalAlignment="Center"
357. <template>
358.   
359.    
360.   
361. </template>Text="hello avalonia" />
362. </Grid>Width="300"
363. <Grid
364.     Width="300"
365.     Height="300"
366.     Background="Aqua">
367.     <TextBlock
368. <template>
369.   
370.    
371.   
372. </template>HorizontalAlignment="Center"
373. <template>
374.   
375.    
376.   
377. </template>VerticalAlignment="Center"
378. <template>
379.   
380.    
381.   
382. </template>Text="hello avalonia" />
383. </Grid>Height="300"
384. <Grid
385.     Width="300"
386.     Height="300"
387.     Background="Aqua">
388.     <TextBlock
389. <template>
390.   
391.    
392.   
393. </template>HorizontalAlignment="Center"
394. <template>
395.   
396.    
397.   
398. </template>VerticalAlignment="Center"
399. <template>
400.   
401.    
402.   
403. </template>Text="hello avalonia" />
404. </Grid>Background="Aqua">
405. <Grid
406.     Width="300"
407.     Height="300"
408.     Background="Aqua">
409.     <TextBlock
410. <template>
411.   
412.    
413.   
414. </template>HorizontalAlignment="Center"
415. <template>
416.   
417.    
418.   
419. </template>VerticalAlignment="Center"
420. <template>
421.   
422.    
423.   
424. </template>Text="hello avalonia" />
425. </Grid><TextBlock Text="hello avalonia" />
426. </Grid><Grid
427. <Grid
428.     Width="300"
429.     Height="300"
430.     Background="Aqua">
431.     <TextBlock
432. <template>
433.   
434.    
435.   
436. </template>HorizontalAlignment="Center"
437. <template>
438.   
439.    
440.   
441. </template>VerticalAlignment="Center"
442. <template>
443.   
444.    
445.   
446. </template>Text="hello avalonia" />
447. </Grid>Width="300"
448. <Grid
449.     Width="300"
450.     Height="300"
451.     Background="Aqua">
452.     <TextBlock
453. <template>
454.   
455.    
456.   
457. </template>HorizontalAlignment="Center"
458. <template>
459.   
460.    
461.   
462. </template>VerticalAlignment="Center"
463. <template>
464.   
465.    
466.   
467. </template>Text="hello avalonia" />
468. </Grid>Height="300"
469. <Grid
470.     Width="300"
471.     Height="300"
472.     Background="Aqua">
473.     <TextBlock
474. <template>
475.   
476.    
477.   
478. </template>HorizontalAlignment="Center"
479. <template>
480.   
481.    
482.   
483. </template>VerticalAlignment="Center"
484. <template>
485.   
486.    
487.   
488. </template>Text="hello avalonia" />
489. </Grid>Background="Aqua">
490. <Grid
491.     Width="300"
492.     Height="300"
493.     Background="Aqua">
494.     <TextBlock
495. <template>
496.   
497.    
498.   
499. </template>HorizontalAlignment="Center"
500. <template>
501.   
502.    
503.   
504. </template>VerticalAlignment="Center"
505. <template>
506.   
507.    
508.   
509. </template>Text="hello avalonia" />
510. </Grid><TextBlock Text="hello avalonia" />
511. </Grid><Grid
512. <Grid
513.     Width="300"
514.     Height="300"
515.     Background="Aqua">
516.     <TextBlock
517. <template>
518.   
519.    
520.   
521. </template>HorizontalAlignment="Center"
522. <template>
523.   
524.    
525.   
526. </template>VerticalAlignment="Center"
527. <template>
528.   
529.    
530.   
531. </template>Text="hello avalonia" />
532. </Grid>Width="300"
533. <Grid
534.     Width="300"
535.     Height="300"
536.     Background="Aqua">
537.     <TextBlock
538. <template>
539.   
540.    
541.   
542. </template>HorizontalAlignment="Center"
543. <template>
544.   
545.    
546.   
547. </template>VerticalAlignment="Center"
548. <template>
549.   
550.    
551.   
552. </template>Text="hello avalonia" />
553. </Grid>Height="300"
554. <Grid
555.     Width="300"
556.     Height="300"
557.     Background="Aqua">
558.     <TextBlock
559. <template>
560.   
561.    
562.   
563. </template>HorizontalAlignment="Center"
564. <template>
565.   
566.    
567.   
568. </template>VerticalAlignment="Center"
569. <template>
570.   
571.    
572.   
573. </template>Text="hello avalonia" />
574. </Grid>Background="Aqua">
575. <Grid
576.     Width="300"
577.     Height="300"
578.     Background="Aqua">
579.     <TextBlock
580. <template>
581.   
582.    
583.   
584. </template>HorizontalAlignment="Center"
585. <template>
586.   
587.    
588.   
589. </template>VerticalAlignment="Center"
590. <template>
591.   
592.    
593.   
594. </template>Text="hello avalonia" />
595. </Grid><TextBlock Text="hello avalonia" />
596. </Grid><Grid
597. <Grid
598.     Width="300"
599.     Height="300"
600.     Background="Aqua">
601.     <TextBlock
602. <template>
603.   
604.    
605.   
606. </template>HorizontalAlignment="Center"
607. <template>
608.   
609.    
610.   
611. </template>VerticalAlignment="Center"
612. <template>
613.   
614.    
615.   
616. </template>Text="hello avalonia" />
617. </Grid>Width="300"
618. <Grid
619.     Width="300"
620.     Height="300"
621.     Background="Aqua">
622.     <TextBlock
623. <template>
624.   
625.    
626.   
627. </template>HorizontalAlignment="Center"
628. <template>
629.   
630.    
631.   
632. </template>VerticalAlignment="Center"
633. <template>
634.   
635.    
636.   
637. </template>Text="hello avalonia" />
638. </Grid>Height="300"
639. <Grid
640.     Width="300"
641.     Height="300"
642.     Background="Aqua">
643.     <TextBlock
644. <template>
645.   
646.    
647.   
648. </template>HorizontalAlignment="Center"
649. <template>
650.   
651.    
652.   
653. </template>VerticalAlignment="Center"
654. <template>
655.   
656.    
657.   
658. </template>Text="hello avalonia" />
659. </Grid>Background="Aqua">
660. <Grid
661.     Width="300"
662.     Height="300"
663.     Background="Aqua">
664.     <TextBlock
665. <template>
666.   
667.    
668.   
669. </template>HorizontalAlignment="Center"
670. <template>
671.   
672.    
673.   
674. </template>VerticalAlignment="Center"
675. <template>
676.   
677.    
678.   
679. </template>Text="hello avalonia" />
680. </Grid><TextBlock Text="hello avalonia" />
681. </Grid><Grid
682. <Grid
683.     Width="300"
684.     Height="300"
685.     Background="Aqua">
686.     <TextBlock
687. <template>
688.   
689.    
690.   
691. </template>HorizontalAlignment="Center"
692. <template>
693.   
694.    
695.   
696. </template>VerticalAlignment="Center"
697. <template>
698.   
699.    
700.   
701. </template>Text="hello avalonia" />
702. </Grid>Width="300"
703. <Grid
704.     Width="300"
705.     Height="300"
706.     Background="Aqua">
707.     <TextBlock
708. <template>
709.   
710.    
711.   
712. </template>HorizontalAlignment="Center"
713. <template>
714.   
715.    
716.   
717. </template>VerticalAlignment="Center"
718. <template>
719.   
720.    
721.   
722. </template>Text="hello avalonia" />
723. </Grid>Height="300"
724. <Grid
725.     Width="300"
726.     Height="300"
727.     Background="Aqua">
728.     <TextBlock
729. <template>
730.   
731.    
732.   
733. </template>HorizontalAlignment="Center"
734. <template>
735.   
736.    
737.   
738. </template>VerticalAlignment="Center"
739. <template>
740.   
741.    
742.   
743. </template>Text="hello avalonia" />
744. </Grid>Background="Aqua">
745. <Grid
746.     Width="300"
747.     Height="300"
748.     Background="Aqua">
749.     <TextBlock
750. <template>
751.   
752.    
753.   
754. </template>HorizontalAlignment="Center"
755. <template>
756.   
757.    
758.   
759. </template>VerticalAlignment="Center"
760. <template>
761.   
762.    
763.   
764. </template>Text="hello avalonia" />
765. </Grid><TextBlock Text="hello avalonia" />
766. </Grid><Grid
767. <Grid
768.     Width="300"
769.     Height="300"
770.     Background="Aqua">
771.     <TextBlock
772. <template>
773.   
774.    
775.   
776. </template>HorizontalAlignment="Center"
777. <template>
778.   
779.    
780.   
781. </template>VerticalAlignment="Center"
782. <template>
783.   
784.    
785.   
786. </template>Text="hello avalonia" />
787. </Grid>Width="300"
788. <Grid
789.     Width="300"
790.     Height="300"
791.     Background="Aqua">
792.     <TextBlock
793. <template>
794.   
795.    
796.   
797. </template>HorizontalAlignment="Center"
798. <template>
799.   
800.    
801.   
802. </template>VerticalAlignment="Center"
803. <template>
804.   
805.    
806.   
807. </template>Text="hello avalonia" />
808. </Grid>Height="300"
809. <Grid
810.     Width="300"
811.     Height="300"
812.     Background="Aqua">
813.     <TextBlock
814. <template>
815.   
816.    
817.   
818. </template>HorizontalAlignment="Center"
819. <template>
820.   
821.    
822.   
823. </template>VerticalAlignment="Center"
824. <template>
825.   
826.    
827.   
828. </template>Text="hello avalonia" />
829. </Grid>Background="Aqua">
830. <Grid
831.     Width="300"
832.     Height="300"
833.     Background="Aqua">
834.     <TextBlock
835. <template>
836.   
837.    
838.   
839. </template>HorizontalAlignment="Center"
840. <template>
841.   
842.    
843.   
844. </template>VerticalAlignment="Center"
845. <template>
846.   
847.    
848.   
849. </template>Text="hello avalonia" />
850. </Grid><TextBlock Text="hello avalonia" />
851. </Grid><Grid
852. <Grid
853.     Width="300"
854.     Height="300"
855.     Background="Aqua">
856.     <TextBlock
857. <template>
858.   
859.    
860.   
861. </template>HorizontalAlignment="Center"
862. <template>
863.   
864.    
865.   
866. </template>VerticalAlignment="Center"
867. <template>
868.   
869.    
870.   
871. </template>Text="hello avalonia" />
872. </Grid>Width="300"
873. <Grid
874.     Width="300"
875.     Height="300"
876.     Background="Aqua">
877.     <TextBlock
878. <template>
879.   
880.    
881.   
882. </template>HorizontalAlignment="Center"
883. <template>
884.   
885.    
886.   
887. </template>VerticalAlignment="Center"
888. <template>
889.   
890.    
891.   
892. </template>Text="hello avalonia" />
893. </Grid>Height="300"
894. <Grid
895.     Width="300"
896.     Height="300"
897.     Background="Aqua">
898.     <TextBlock
899. <template>
900.   
901.    
902.   
903. </template>HorizontalAlignment="Center"
904. <template>
905.   
906.    
907.   
908. </template>VerticalAlignment="Center"
909. <template>
910.   
911.    
912.   
913. </template>Text="hello avalonia" />
914. </Grid>Background="Aqua">
915. <Grid
916.     Width="300"
917.     Height="300"
918.     Background="Aqua">
919.     <TextBlock
920. <template>
921.   
922.    
923.   
924. </template>HorizontalAlignment="Center"
925. <template>
926.   
927.    
928.   
929. </template>VerticalAlignment="Center"
930. <template>
931.   
932.    
933.   
934. </template>Text="hello avalonia" />
935. </Grid><TextBlock Text="hello avalonia" />
936. </Grid><Grid
937. <Grid
938.     Width="300"
939.     Height="300"
940.     Background="Aqua">
941.     <TextBlock
942. <template>
943.   
944.    
945.   
946. </template>HorizontalAlignment="Center"
947. <template>
948.   
949.    
950.   
951. </template>VerticalAlignment="Center"
952. <template>
953.   
954.    
955.   
956. </template>Text="hello avalonia" />
957. </Grid>Width="300"
958. <Grid
959.     Width="300"
960.     Height="300"
961.     Background="Aqua">
962.     <TextBlock
963. <template>
964.   
965.    
966.   
967. </template>HorizontalAlignment="Center"
968. <template>
969.   
970.    
971.   
972. </template>VerticalAlignment="Center"
973. <template>
974.   
975.    
976.   
977. </template>Text="hello avalonia" />
978. </Grid>Height="300"
979. <Grid
980.     Width="300"
981.     Height="300"
982.     Background="Aqua">
983.     <TextBlock
984. <template>
985.   
986.    
987.   
988. </template>HorizontalAlignment="Center"
989. <template>
990.   
991.    
992.   
993. </template>VerticalAlignment="Center"
994. <template>
995.   
996.    
997.   
998. </template>Text="hello avalonia" />
999. </Grid>Background="Aqua">
1000. <Grid
1001.     Width="300"
1002.     Height="300"
1003.     Background="Aqua">
1004.     <TextBlock
1005. <template>
1006.   
1007.    
1008.   
1009. </template>HorizontalAlignment="Center"
1010. <template>
1011.   
1012.    
1013.   
1014. </template>VerticalAlignment="Center"
1015. <template>
1016.   
1017.    
1018.   
1019. </template>Text="hello avalonia" />
1020. </Grid><TextBlock Text="hello avalonia" />
1021. </Grid><Grid
1022. <Grid
1023.     Width="300"
1024.     Height="300"
1025.     Background="Aqua">
1026.     <TextBlock
1027. <template>
1028.   
1029.    
1030.   
1031. </template>HorizontalAlignment="Center"
1032. <template>
1033.   
1034.    
1035.   
1036. </template>VerticalAlignment="Center"
1037. <template>
1038.   
1039.    
1040.   
1041. </template>Text="hello avalonia" />
1042. </Grid>Width="300"
1043. <Grid
1044.     Width="300"
1045.     Height="300"
1046.     Background="Aqua">
1047.     <TextBlock
1048. <template>
1049.   
1050.    
1051.   
1052. </template>HorizontalAlignment="Center"
1053. <template>
1054.   
1055.    
1056.   
1057. </template>VerticalAlignment="Center"
1058. <template>
1059.   
1060.    
1061.   
1062. </template>Text="hello avalonia" />
1063. </Grid>Height="300"
1064. <Grid
1065.     Width="300"
1066.     Height="300"
1067.     Background="Aqua">
1068.     <TextBlock
1069. <template>
1070.   
1071.    
1072.   
1073. </template>HorizontalAlignment="Center"
1074. <template>
1075.   
1076.    
1077.   
1078. </template>VerticalAlignment="Center"
1079. <template>
1080.   
1081.    
1082.   
1083. </template>Text="hello avalonia" />
1084. </Grid>Background="Aqua">
1085. <Grid
1086.     Width="300"
1087.     Height="300"
1088.     Background="Aqua">
1089.     <TextBlock
1090. <template>
1091.   
1092.    
1093.   
1094. </template>HorizontalAlignment="Center"
1095. <template>
1096.   
1097.    
1098.   
1099. </template>VerticalAlignment="Center"
1100. <template>
1101.   
1102.    
1103.   
1104. </template>Text="hello avalonia" />
1105. </Grid><TextBlock Text="hello avalonia" />
1106. </Grid><Grid
1107. <Grid
1108.     Width="300"
1109.     Height="300"
1110.     Background="Aqua">
1111.     <TextBlock
1112. <template>
1113.   
1114.    
1115.   
1116. </template>HorizontalAlignment="Center"
1117. <template>
1118.   
1119.    
1120.   
1121. </template>VerticalAlignment="Center"
1122. <template>
1123.   
1124.    
1125.   
1126. </template>Text="hello avalonia" />
1127. </Grid>Width="300"
1128. <Grid
1129.     Width="300"
1130.     Height="300"
1131.     Background="Aqua">
1132.     <TextBlock
1133. <template>
1134.   
1135.    
1136.   
1137. </template>HorizontalAlignment="Center"
1138. <template>
1139.   
1140.    
1141.   
1142. </template>VerticalAlignment="Center"
1143. <template>
1144.   
1145.    
1146.   
1147. </template>Text="hello avalonia" />
1148. </Grid>Height="300"
1149. <Grid
1150.     Width="300"
1151.     Height="300"
1152.     Background="Aqua">
1153.     <TextBlock
1154. <template>
1155.   
1156.    
1157.   
1158. </template>HorizontalAlignment="Center"
1159. <template>
1160.   
1161.    
1162.   
1163. </template>VerticalAlignment="Center"
1164. <template>
1165.   
1166.    
1167.   
1168. </template>Text="hello avalonia" />
1169. </Grid>Background="Aqua">
1170. <Grid
1171.     Width="300"
1172.     Height="300"
1173.     Background="Aqua">
1174.     <TextBlock
1175. <template>
1176.   
1177.    
1178.   
1179. </template>HorizontalAlignment="Center"
1180. <template>
1181.   
1182.    
1183.   
1184. </template>VerticalAlignment="Center"
1185. <template>
1186.   
1187.    
1188.   
1189. </template>Text="hello avalonia" />
1190. </Grid><TextBlock Text="hello avalonia" />
1191. </Grid><Grid
1192. <Grid
1193.     Width="300"
1194.     Height="300"
1195.     Background="Aqua">
1196.     <TextBlock
1197. <template>
1198.   
1199.    
1200.   
1201. </template>HorizontalAlignment="Center"
1202. <template>
1203.   
1204.    
1205.   
1206. </template>VerticalAlignment="Center"
1207. <template>
1208.   
1209.    
1210.   
1211. </template>Text="hello avalonia" />
1212. </Grid>Width="300"
1213. <Grid
1214.     Width="300"
1215.     Height="300"
1216.     Background="Aqua">
1217.     <TextBlock
1218. <template>
1219.   
1220.    
1221.   
1222. </template>HorizontalAlignment="Center"
1223. <template>
1224.   
1225.    
1226.   
1227. </template>VerticalAlignment="Center"
1228. <template>
1229.   
1230.    
1231.   
1232. </template>Text="hello avalonia" />
1233. </Grid>Height="300"
1234. <Grid
1235.     Width="300"
1236.     Height="300"
1237.     Background="Aqua">
1238.     <TextBlock
1239. <template>
1240.   
1241.    
1242.   
1243. </template>HorizontalAlignment="Center"
1244. <template>
1245.   
1246.    
1247.   
1248. </template>VerticalAlignment="Center"
1249. <template>
1250.   
1251.    
1252.   
1253. </template>Text="hello avalonia" />
1254. </Grid>Background="Aqua">
1255. <Grid
1256.     Width="300"
1257.     Height="300"
1258.     Background="Aqua">
1259.     <TextBlock
1260. <template>
1261.   
1262.    
1263.   
1264. </template>HorizontalAlignment="Center"
1265. <template>
1266.   
1267.    
1268.   
1269. </template>VerticalAlignment="Center"
1270. <template>
1271.   
1272.    
1273.   
1274. </template>Text="hello avalonia" />
1275. </Grid><TextBlock Text="hello avalonia" />
1276. </Grid><Grid
1277. <Grid
1278.     Width="300"
1279.     Height="300"
1280.     Background="Aqua">
1281.     <TextBlock
1282. <template>
1283.   
1284.    
1285.   
1286. </template>HorizontalAlignment="Center"
1287. <template>
1288.   
1289.    
1290.   
1291. </template>VerticalAlignment="Center"
1292. <template>
1293.   
1294.    
1295.   
1296. </template>Text="hello avalonia" />
1297. </Grid>Width="300"
1298. <Grid
1299.     Width="300"
1300.     Height="300"
1301.     Background="Aqua">
1302.     <TextBlock
1303. <template>
1304.   
1305.    
1306.   
1307. </template>HorizontalAlignment="Center"
1308. <template>
1309.   
1310.    
1311.   
1312. </template>VerticalAlignment="Center"
1313. <template>
1314.   
1315.    
1316.   
1317. </template>Text="hello avalonia" />
1318. </Grid>Height="300"
1319. <Grid
1320.     Width="300"
1321.     Height="300"
1322.     Background="Aqua">
1323.     <TextBlock
1324. <template>
1325.   
1326.    
1327.   
1328. </template>HorizontalAlignment="Center"
1329. <template>
1330.   
1331.    
1332.   
1333. </template>VerticalAlignment="Center"
1334. <template>
1335.   
1336.    
1337.   
1338. </template>Text="hello avalonia" />
1339. </Grid>Background="Aqua">
1340. <Grid
1341.     Width="300"
1342.     Height="300"
1343.     Background="Aqua">
1344.     <TextBlock
1345. <template>
1346.   
1347.    
1348.   
1349. </template>HorizontalAlignment="Center"
1350. <template>
1351.   
1352.    
1353.   
1354. </template>VerticalAlignment="Center"
1355. <template>
1356.   
1357.    
1358.   
1359. </template>Text="hello avalonia" />
1360. </Grid><TextBlock Text="hello avalonia" />
1361. </Grid><Grid
1362. <Grid
1363.     Width="300"
1364.     Height="300"
1365.     Background="Aqua">
1366.     <TextBlock
1367. <template>
1368.   
1369.    
1370.   
1371. </template>HorizontalAlignment="Center"
1372. <template>
1373.   
1374.    
1375.   
1376. </template>VerticalAlignment="Center"
1377. <template>
1378.   
1379.    
1380.   
1381. </template>Text="hello avalonia" />
1382. </Grid>Width="300"
1383. <Grid
1384.     Width="300"
1385.     Height="300"
1386.     Background="Aqua">
1387.     <TextBlock
1388. <template>
1389.   
1390.    
1391.   
1392. </template>HorizontalAlignment="Center"
1393. <template>
1394.   
1395.    
1396.   
1397. </template>VerticalAlignment="Center"
1398. <template>
1399.   
1400.    
1401.   
1402. </template>Text="hello avalonia" />
1403. </Grid>Height="300"
1404. <Grid
1405.     Width="300"
1406.     Height="300"
1407.     Background="Aqua">
1408.     <TextBlock
1409. <template>
1410.   
1411.    
1412.   
1413. </template>HorizontalAlignment="Center"
1414. <template>
1415.   
1416.    
1417.   
1418. </template>VerticalAlignment="Center"
1419. <template>
1420.   
1421.    
1422.   
1423. </template>Text="hello avalonia" />
1424. </Grid>Background="Aqua">
1425. <Grid
1426.     Width="300"
1427.     Height="300"
1428.     Background="Aqua">
1429.     <TextBlock
1430. <template>
1431.   
1432.    
1433.   
1434. </template>HorizontalAlignment="Center"
1435. <template>
1436.   
1437.    
1438.   
1439. </template>VerticalAlignment="Center"
1440. <template>
1441.   
1442.    
1443.   
1444. </template>Text="hello avalonia" />
1445. </Grid><TextBlock Text="hello avalonia" />
1446. </Grid><Grid
1447. <Grid
1448.     Width="300"
1449.     Height="300"
1450.     Background="Aqua">
1451.     <TextBlock
1452. <template>
1453.   
1454.    
1455.   
1456. </template>HorizontalAlignment="Center"
1457. <template>
1458.   
1459.    
1460.   
1461. </template>VerticalAlignment="Center"
1462. <template>
1463.   
1464.    
1465.   
1466. </template>Text="hello avalonia" />
1467. </Grid>Width="300"
1468. <Grid
1469.     Width="300"
1470.     Height="300"
1471.     Background="Aqua">
1472.     <TextBlock
1473. <template>
1474.   
1475.    
1476.   
1477. </template>HorizontalAlignment="Center"
1478. <template>
1479.   
1480.    
1481.   
1482. </template>VerticalAlignment="Center"
1483. <template>
1484.   
1485.    
1486.   
1487. </template>Text="hello avalonia" />
1488. </Grid>Height="300"
1489. <Grid
1490.     Width="300"
1491.     Height="300"
1492.     Background="Aqua">
1493.     <TextBlock
1494. <template>
1495.   
1496.    
1497.   
1498. </template>HorizontalAlignment="Center"
1499. <template>
1500.   
1501.    
1502.   
1503. </template>VerticalAlignment="Center"
1504. <template>
1505.   
1506.    
1507.   
1508. </template>Text="hello avalonia" />
1509. </Grid>Background="Aqua">
1510. <Grid
1511.     Width="300"
1512.     Height="300"
1513.     Background="Aqua">
1514.     <TextBlock
1515. <template>
1516.   
1517.    
1518.   
1519. </template>HorizontalAlignment="Center"
1520. <template>
1521.   
1522.    
1523.   
1524. </template>VerticalAlignment="Center"
1525. <template>
1526.   
1527.    
1528.   
1529. </template>Text="hello avalonia" />
1530. </Grid><TextBlock Text="hello avalonia" />
1531. </Grid><Grid
1532. <Grid
1533.     Width="300"
1534.     Height="300"
1535.     Background="Aqua">
1536.     <TextBlock
1537. <template>
1538.   
1539.    
1540.   
1541. </template>HorizontalAlignment="Center"
1542. <template>
1543.   
1544.    
1545.   
1546. </template>VerticalAlignment="Center"
1547. <template>
1548.   
1549.    
1550.   
1551. </template>Text="hello avalonia" />
1552. </Grid>Width="300"
1553. <Grid
1554.     Width="300"
1555.     Height="300"
1556.     Background="Aqua">
1557.     <TextBlock
1558. <template>
1559.   
1560.    
1561.   
1562. </template>HorizontalAlignment="Center"
1563. <template>
1564.   
1565.    
1566.   
1567. </template>VerticalAlignment="Center"
1568. <template>
1569.   
1570.    
1571.   
1572. </template>Text="hello avalonia" />
1573. </Grid>Height="300"
1574. <Grid
1575.     Width="300"
1576.     Height="300"
1577.     Background="Aqua">
1578.     <TextBlock
1579. <template>
1580.   
1581.    
1582.   
1583. </template>HorizontalAlignment="Center"
1584. <template>
1585.   
1586.    
1587.   
1588. </template>VerticalAlignment="Center"
1589. <template>
1590.   
1591.    
1592.   
1593. </template>Text="hello avalonia" />
1594. </Grid>Background="Aqua">
1595. <Grid
1596.     Width="300"
1597.     Height="300"
1598.     Background="Aqua">
1599.     <TextBlock
1600. <template>
1601.   
1602.    
1603.   
1604. </template>HorizontalAlignment="Center"
1605. <template>
1606.   
1607.    
1608.   
1609. </template>VerticalAlignment="Center"
1610. <template>
1611.   
1612.    
1613.   
1614. </template>Text="hello avalonia" />
1615. </Grid><TextBlock Text="hello avalonia" />
1616. </Grid><Grid
1617. <Grid
1618.     Width="300"
1619.     Height="300"
1620.     Background="Aqua">
1621.     <TextBlock
1622. <template>
1623.   
1624.    
1625.   
1626. </template>HorizontalAlignment="Center"
1627. <template>
1628.   
1629.    
1630.   
1631. </template>VerticalAlignment="Center"
1632. <template>
1633.   
1634.    
1635.   
1636. </template>Text="hello avalonia" />
1637. </Grid>Width="300"
1638. <Grid
1639.     Width="300"
1640.     Height="300"
1641.     Background="Aqua">
1642.     <TextBlock
1643. <template>
1644.   
1645.    
1646.   
1647. </template>HorizontalAlignment="Center"
1648. <template>
1649.   
1650.    
1651.   
1652. </template>VerticalAlignment="Center"
1653. <template>
1654.   
1655.    
1656.   
1657. </template>Text="hello avalonia" />
1658. </Grid>Height="300"
1659. <Grid
1660.     Width="300"
1661.     Height="300"
1662.     Background="Aqua">
1663.     <TextBlock
1664. <template>
1665.   
1666.    
1667.   
1668. </template>HorizontalAlignment="Center"
1669. <template>
1670.   
1671.    
1672.   
1673. </template>VerticalAlignment="Center"
1674. <template>
1675.   
1676.    
1677.   
1678. </template>Text="hello avalonia" />
1679. </Grid>Background="Aqua">
1680. <Grid
1681.     Width="300"
1682.     Height="300"
1683.     Background="Aqua">
1684.     <TextBlock
1685. <template>
1686.   
1687.    
1688.   
1689. </template>HorizontalAlignment="Center"
1690. <template>
1691.   
1692.    
1693.   
1694. </template>VerticalAlignment="Center"
1695. <template>
1696.   
1697.    
1698.   
1699. </template>Text="hello avalonia" />
1700. </Grid><TextBlock Text="hello avalonia" />
1701. </Grid><Grid
1702. <Grid
1703.     Width="300"
1704.     Height="300"
1705.     Background="Aqua">
1706.     <TextBlock
1707. <template>
1708.   
1709.    
1710.   
1711. </template>HorizontalAlignment="Center"
1712. <template>
1713.   
1714.    
1715.   
1716. </template>VerticalAlignment="Center"
1717. <template>
1718.   
1719.    
1720.   
1721. </template>Text="hello avalonia" />
1722. </Grid>Width="300"
1723. <Grid
1724.     Width="300"
1725.     Height="300"
1726.     Background="Aqua">
1727.     <TextBlock
1728. <template>
1729.   
1730.    
1731.   
1732. </template>HorizontalAlignment="Center"
1733. <template>
1734.   
1735.    
1736.   
1737. </template>VerticalAlignment="Center"
1738. <template>
1739.   
1740.    
1741.   
1742. </template>Text="hello avalonia" />
1743. </Grid>Height="300"
1744. <Grid
1745.     Width="300"
1746.     Height="300"
1747.     Background="Aqua">
1748.     <TextBlock
1749. <template>
1750.   
1751.    
1752.   
1753. </template>HorizontalAlignment="Center"
1754. <template>
1755.   
1756.    
1757.   
1758. </template>VerticalAlignment="Center"
1759. <template>
1760.   
1761.    
1762.   
1763. </template>Text="hello avalonia" />
1764. </Grid>Background="Aqua">
1765. <Grid
1766.     Width="300"
1767.     Height="300"
1768.     Background="Aqua">
1769.     <TextBlock
1770. <template>
1771.   
1772.    
1773.   
1774. </template>HorizontalAlignment="Center"
1775. <template>
1776.   
1777.    
1778.   
1779. </template>VerticalAlignment="Center"
1780. <template>
1781.   
1782.    
1783.   
1784. </template>Text="hello avalonia" />
1785. </Grid><TextBlock Text="hello avalonia" />
1786. </Grid><Grid
1787. <Grid
1788.     Width="300"
1789.     Height="300"
1790.     Background="Aqua">
1791.     <TextBlock
1792. <template>
1793.   
1794.    
1795.   
1796. </template>HorizontalAlignment="Center"
1797. <template>
1798.   
1799.    
1800.   
1801. </template>VerticalAlignment="Center"
1802. <template>
1803.   
1804.    
1805.   
1806. </template>Text="hello avalonia" />
1807. </Grid>Width="300"
1808. <Grid
1809.     Width="300"
1810.     Height="300"
1811.     Background="Aqua">
1812.     <TextBlock
1813. <template>
1814.   
1815.    
1816.   
1817. </template>HorizontalAlignment="Center"
1818. <template>
1819.   
1820.    
1821.   
1822. </template>VerticalAlignment="Center"
1823. <template>
1824.   
1825.    
1826.   
1827. </template>Text="hello avalonia" />
1828. </Grid>Height="300"
1829. <Grid
1830.     Width="300"
1831.     Height="300"
1832.     Background="Aqua">
1833.     <TextBlock
1834. <template>
1835.   
1836.    
1837.   
1838. </template>HorizontalAlignment="Center"
1839. <template>
1840.   
1841.    
1842.   
1843. </template>VerticalAlignment="Center"
1844. <template>
1845.   
1846.    
1847.   
1848. </template>Text="hello avalonia" />
1849. </Grid>Background="Aqua">
1850. <Grid
1851.     Width="300"
1852.     Height="300"
1853.     Background="Aqua">
1854.     <TextBlock
1855. <template>
1856.   
1857.    
1858.   
1859. </template>HorizontalAlignment="Center"
1860. <template>
1861.   
1862.    
1863.   
1864. </template>VerticalAlignment="Center"
1865. <template>
1866.   
1867.    
1868.   
1869. </template>Text="hello avalonia" />
1870. </Grid><TextBlock Text="hello avalonia" />
1871. </Grid><Grid
1872. <Grid
1873.     Width="300"
1874.     Height="300"
1875.     Background="Aqua">
1876.     <TextBlock
1877. <template>
1878.   
1879.    
1880.   
1881. </template>HorizontalAlignment="Center"
1882. <template>
1883.   
1884.    
1885.   
1886. </template>VerticalAlignment="Center"
1887. <template>
1888.   
1889.    
1890.   
1891. </template>Text="hello avalonia" />
1892. </Grid>Width="300"
1893. <Grid
1894.     Width="300"
1895.     Height="300"
1896.     Background="Aqua">
1897.     <TextBlock
1898. <template>
1899.   
1900.    
1901.   
1902. </template>HorizontalAlignment="Center"
1903. <template>
1904.   
1905.    
1906.   
1907. </template>VerticalAlignment="Center"
1908. <template>
1909.   
1910.    
1911.   
1912. </template>Text="hello avalonia" />
1913. </Grid>Height="300"
1914. <Grid
1915.     Width="300"
1916.     Height="300"
1917.     Background="Aqua">
1918.     <TextBlock
1919. <template>
1920.   
1921.    
1922.   
1923. </template>HorizontalAlignment="Center"
1924. <template>
1925.   
1926.    
1927.   
1928. </template>VerticalAlignment="Center"
1929. <template>
1930.   
1931.    
1932.   
1933. </template>Text="hello avalonia" />
1934. </Grid>Background="Aqua">
1935. <Grid
1936.     Width="300"
1937.     Height="300"
1938.     Background="Aqua">
1939.     <TextBlock
1940. <template>
1941.   
1942.    
1943.   
1944. </template>HorizontalAlignment="Center"
1945. <template>
1946.   
1947.    
1948.   
1949. </template>VerticalAlignment="Center"
1950. <template>
1951.   
1952.    
1953.   
1954. </template>Text="hello avalonia" />
1955. </Grid><TextBlock Text="hello avalonia" />
1956. </Grid><Grid
1957. <Grid
1958.     Width="300"
1959.     Height="300"
1960.     Background="Aqua">
1961.     <TextBlock
1962. <template>
1963.   
1964.    
1965.   
1966. </template>HorizontalAlignment="Center"
1967. <template>
1968.   
1969.    
1970.   
1971. </template>VerticalAlignment="Center"
1972. <template>
1973.   
1974.    
1975.   
1976. </template>Text="hello avalonia" />
1977. </Grid>Width="300"
1978. <Grid
1979.     Width="300"
1980.     Height="300"
1981.     Background="Aqua">
1982.     <TextBlock
1983. <template>
1984.   
1985.    
1986.   
1987. </template>HorizontalAlignment="Center"
1988. <template>
1989.   
1990.    
1991.   
1992. </template>VerticalAlignment="Center"
1993. <template>
1994.   
1995.    
1996.   
1997. </template>Text="hello avalonia" />
1998. </Grid>Height="300"
1999. <Grid
2000.     Width="300"
2001.     Height="300"
2002.     Background="Aqua">
2003.     <TextBlock
2004. <template>
2005.   
2006.    
2007.   
2008. </template>HorizontalAlignment="Center"
2009. <template>
2010.   
2011.    
2012.   
2013. </template>VerticalAlignment="Center"
2014. <template>
2015.   
2016.    
2017.   
2018. </template>Text="hello avalonia" />
2019. </Grid>Background="Aqua">
2020. <Grid
2021.     Width="300"
2022.     Height="300"
2023.     Background="Aqua">
2024.     <TextBlock
2025. <template>
2026.   
2027.    
2028.   
2029. </template>HorizontalAlignment="Center"
2030. <template>
2031.   
2032.    
2033.   
2034. </template>VerticalAlignment="Center"
2035. <template>
2036.   
2037.    
2038.   
2039. </template>Text="hello avalonia" />
2040. </Grid><TextBlock Text="hello avalonia" />
2041. </Grid><Grid
2042. <Grid
2043.     Width="300"
2044.     Height="300"
2045.     Background="Aqua">
2046.     <TextBlock
2047. <template>
2048.   
2049.    
2050.   
2051. </template>HorizontalAlignment="Center"
2052. <template>
2053.   
2054.    
2055.   
2056. </template>VerticalAlignment="Center"
2057. <template>
2058.   
2059.    
2060.   
2061. </template>Text="hello avalonia" />
2062. </Grid>Width="300"
2063. <Grid
2064.     Width="300"
2065.     Height="300"
2066.     Background="Aqua">
2067.     <TextBlock
2068. <template>
2069.   
2070.    
2071.   
2072. </template>HorizontalAlignment="Center"
2073. <template>
2074.   
2075.    
2076.   
2077. </template>VerticalAlignment="Center"
2078. <template>
2079.   
2080.    
2081.   
2082. </template>Text="hello avalonia" />
2083. </Grid>Height="300"
2084. <Grid
2085.     Width="300"
2086.     Height="300"
2087.     Background="Aqua">
2088.     <TextBlock
2089. <template>
2090.   
2091.    
2092.   
2093. </template>HorizontalAlignment="Center"
2094. <template>
2095.   
2096.    
2097.   
2098. </template>VerticalAlignment="Center"
2099. <template>
2100.   
2101.    
2102.   
2103. </template>Text="hello avalonia" />
2104. </Grid>Background="Aqua">
2105. <Grid
2106.     Width="300"
2107.     Height="300"
2108.     Background="Aqua">
2109.     <TextBlock
2110. <template>
2111.   
2112.    
2113.   
2114. </template>HorizontalAlignment="Center"
2115. <template>
2116.   
2117.    
2118.   
2119. </template>VerticalAlignment="Center"
2120. <template>
2121.   
2122.    
2123.   
2124. </template>Text="hello avalonia" />
2125. </Grid><TextBlock Text="hello avalonia" />
2126. </Grid><Grid
2127. <Grid
2128.     Width="300"
2129.     Height="300"
2130.     Background="Aqua">
2131.     <TextBlock
2132. <template>
2133.   
2134.    
2135.   
2136. </template>HorizontalAlignment="Center"
2137. <template>
2138.   
2139.    
2140.   
2141. </template>VerticalAlignment="Center"
2142. <template>
2143.   
2144.    
2145.   
2146. </template>Text="hello avalonia" />
2147. </Grid>Width="300"
2148. <Grid
2149.     Width="300"
2150.     Height="300"
2151.     Background="Aqua">
2152.     <TextBlock
2153. <template>
2154.   
2155.    
2156.   
2157. </template>HorizontalAlignment="Center"
2158. <template>
2159.   
2160.    
2161.   
2162. </template>VerticalAlignment="Center"
2163. <template>
2164.   
2165.    
2166.   
2167. </template>Text="hello avalonia" />
2168. </Grid>Height="300"
2169. <Grid
2170.     Width="300"
2171.     Height="300"
2172.     Background="Aqua">
2173.     <TextBlock
2174. <template>
2175.   
2176.    
2177.   
2178. </template>HorizontalAlignment="Center"
2179. <template>
2180.   
2181.    
2182.   
2183. </template>VerticalAlignment="Center"
2184. <template>
2185.   
2186.    
2187.   
2188. </template>Text="hello avalonia" />
2189. </Grid>Background="Aqua">
2190. <Grid
2191.     Width="300"
2192.     Height="300"
2193.     Background="Aqua">
2194.     <TextBlock
2195. <template>
2196.   
2197.    
2198.   
2199. </template>HorizontalAlignment="Center"
2200. <template>
2201.   
2202.    
2203.   
2204. </template>VerticalAlignment="Center"
2205. <template>
2206.   
2207.    
2208.   
2209. </template>Text="hello avalonia" />
2210. </Grid><TextBlock Text="hello avalonia" />
2211. </Grid><Grid
2212. <Grid
2213.     Width="300"
2214.     Height="300"
2215.     Background="Aqua">
2216.     <TextBlock
2217. <template>
2218.   
2219.    
2220.   
2221. </template>HorizontalAlignment="Center"
2222. <template>
2223.   
2224.    
2225.   
2226. </template>VerticalAlignment="Center"
2227. <template>
2228.   
2229.    
2230.   
2231. </template>Text="hello avalonia" />
2232. </Grid>Width="300"
2233. <Grid
2234.     Width="300"
2235.     Height="300"
2236.     Background="Aqua">
2237.     <TextBlock
2238. <template>
2239.   
2240.    
2241.   
2242. </template>HorizontalAlignment="Center"
2243. <template>
2244.   
2245.    
2246.   
2247. </template>VerticalAlignment="Center"
2248. <template>
2249.   
2250.    
2251.   
2252. </template>Text="hello avalonia" />
2253. </Grid>Height="300"
2254. <Grid
2255.     Width="300"
2256.     Height="300"
2257.     Background="Aqua">
2258.     <TextBlock
2259. <template>
2260.   
2261.    
2262.   
2263. </template>HorizontalAlignment="Center"
2264. <template>
2265.   
2266.    
2267.   
2268. </template>VerticalAlignment="Center"
2269. <template>
2270.   
2271.    
2272.   
2273. </template>Text="hello avalonia" />
2274. </Grid>Background="Aqua">
2275. <Grid
2276.     Width="300"
2277.     Height="300"
2278.     Background="Aqua">
2279.     <TextBlock
2280. <template>
2281.   
2282.    
2283.   
2284. </template>HorizontalAlignment="Center"
2285. <template>
2286.   
2287.    
2288.   
2289. </template>VerticalAlignment="Center"
2290. <template>
2291.   
2292.    
2293.   
2294. </template>Text="hello avalonia" />
2295. </Grid><TextBlock Text="hello avalonia" />
2296. </Grid><Grid
2297. <Grid
2298.     Width="300"
2299.     Height="300"
2300.     Background="Aqua">
2301.     <TextBlock
2302. <template>
2303.   
2304.    
2305.   
2306. </template>HorizontalAlignment="Center"
2307. <template>
2308.   
2309.    
2310.   
2311. </template>VerticalAlignment="Center"
2312. <template>
2313.   
2314.    
2315.   
2316. </template>Text="hello avalonia" />
2317. </Grid>Width="300"
2318. <Grid
2319.     Width="300"
2320.     Height="300"
2321.     Background="Aqua">
2322.     <TextBlock
2323. <template>
2324.   
2325.    
2326.   
2327. </template>HorizontalAlignment="Center"
2328. <template>
2329.   
2330.    
2331.   
2332. </template>VerticalAlignment="Center"
2333. <template>
2334.   
2335.    
2336.   
2337. </template>Text="hello avalonia" />
2338. </Grid>Height="300"
2339. <Grid
2340.     Width="300"
2341.     Height="300"
2342.     Background="Aqua">
2343.     <TextBlock
2344. <template>
2345.   
2346.    
2347.   
2348. </template>HorizontalAlignment="Center"
2349. <template>
2350.   
2351.    
2352.   
2353. </template>VerticalAlignment="Center"
2354. <template>
2355.   
2356.    
2357.   
2358. </template>Text="hello avalonia" />
2359. </Grid>Background="Aqua">
2360. <Grid
2361.     Width="300"
2362.     Height="300"
2363.     Background="Aqua">
2364.     <TextBlock
2365. <template>
2366.   
2367.    
2368.   
2369. </template>HorizontalAlignment="Center"
2370. <template>
2371.   
2372.    
2373.   
2374. </template>VerticalAlignment="Center"
2375. <template>
2376.   
2377.    
2378.   
2379. </template>Text="hello avalonia" />
2380. </Grid><TextBlock Text="hello avalonia" />
2381. </Grid><Grid
2382. <Grid
2383.     Width="300"
2384.     Height="300"
2385.     Background="Aqua">
2386.     <TextBlock
2387. <template>
2388.   
2389.    
2390.   
2391. </template>HorizontalAlignment="Center"
2392. <template>
2393.   
2394.    
2395.   
2396. </template>VerticalAlignment="Center"
2397. <template>
2398.   
2399.    
2400.   
2401. </template>Text="hello avalonia" />
2402. </Grid>Width="300"
2403. <Grid
2404.     Width="300"
2405.     Height="300"
2406.     Background="Aqua">
2407.     <TextBlock
2408. <template>
2409.   
2410.    
2411.   
2412. </template>HorizontalAlignment="Center"
2413. <template>
2414.   
2415.    
2416.   
2417. </template>VerticalAlignment="Center"
2418. <template>
2419.   
2420.    
2421.   
2422. </template>Text="hello avalonia" />
2423. </Grid>Height="300"
2424. <Grid
2425.     Width="300"
2426.     Height="300"
2427.     Background="Aqua">
2428.     <TextBlock
2429. <template>
2430.   
2431.    
2432.   
2433. </template>HorizontalAlignment="Center"
2434. <template>
2435.   
2436.    
2437.   
2438. </template>VerticalAlignment="Center"
2439. <template>
2440.   
2441.    
2442.   
2443. </template>Text="hello avalonia" />
2444. </Grid>Background="Aqua">
2445. <Grid
2446.     Width="300"
2447.     Height="300"
2448.     Background="Aqua">
2449.     <TextBlock
2450. <template>
2451.   
2452.    
2453.   
2454. </template>HorizontalAlignment="Center"
2455. <template>
2456.   
2457.    
2458.   
2459. </template>VerticalAlignment="Center"
2460. <template>
2461.   
2462.    
2463.   
2464. </template>Text="hello avalonia" />
2465. </Grid><TextBlock Text="hello avalonia" />
2466. </Grid><Grid
2467. <Grid
2468.     Width="300"
2469.     Height="300"
2470.     Background="Aqua">
2471.     <TextBlock
2472. <template>
2473.   
2474.    
2475.   
2476. </template>HorizontalAlignment="Center"
2477. <template>
2478.   
2479.    
2480.   
2481. </template>VerticalAlignment="Center"
2482. <template>
2483.   
2484.    
2485.   
2486. </template>Text="hello avalonia" />
2487. </Grid>Width="300"
2488. <Grid
2489.     Width="300"
2490.     Height="300"
2491.     Background="Aqua">
2492.     <TextBlock
2493. <template>
2494.   
2495.    
2496.   
2497. </template>HorizontalAlignment="Center"
2498. <template>
2499.   
2500.    
2501.   
2502. </template>VerticalAlignment="Center"
2503. <template>
2504.   
2505.    
2506.   
2507. </template>Text="hello avalonia" />
2508. </Grid>Height="300"
2509. <Grid
2510.     Width="300"
2511.     Height="300"
2512.     Background="Aqua">
2513.     <TextBlock
2514. <template>
2515.   
2516.    
2517.   
2518. </template>HorizontalAlignment="Center"
2519. <template>
2520.   
2521.    
2522.   
2523. </template>VerticalAlignment="Center"
2524. <template>
2525.   
2526.    
2527.   
2528. </template>Text="hello avalonia" />
2529. </Grid>Background="Aqua">
2530. <Grid
2531.     Width="300"
2532.     Height="300"
2533.     Background="Aqua">
2534.     <TextBlock
2535. <template>
2536.   
2537.    
2538.   
2539. </template>HorizontalAlignment="Center"
2540. <template>
2541.   
2542.    
2543.   
2544. </template>VerticalAlignment="Center"
2545. <template>
2546.   
2547.    
2548.   
2549. </template>Text="hello avalonia" />
2550. </Grid><TextBlock Text="hello avalonia" />
2551. </Grid><Grid
2552. <Grid
2553.     Width="300"
2554.     Height="300"
2555.     Background="Aqua">
2556.     <TextBlock
2557. <template>
2558.   
2559.    
2560.   
2561. </template>HorizontalAlignment="Center"
2562. <template>
2563.   
2564.    
2565.   
2566. </template>VerticalAlignment="Center"
2567. <template>
2568.   
2569.    
2570.   
2571. </template>Text="hello avalonia" />
2572. </Grid>Width="300"
2573. <Grid
2574.     Width="300"
2575.     Height="300"
2576.     Background="Aqua">
2577.     <TextBlock
2578. <template>
2579.   
2580.    
2581.   
2582. </template>HorizontalAlignment="Center"
2583. <template>
2584.   
2585.    
2586.   
2587. </template>VerticalAlignment="Center"
2588. <template>
2589.   
2590.    
2591.   
2592. </template>Text="hello avalonia" />
2593. </Grid>Height="300"
2594. <Grid
2595.     Width="300"
2596.     Height="300"
2597.     Background="Aqua">
2598.     <TextBlock
2599. <template>
2600.   
2601.    
2602.   
2603. </template>HorizontalAlignment="Center"
2604. <template>
2605.   
2606.    
2607.   
2608. </template>VerticalAlignment="Center"
2609. <template>
2610.   
2611.    
2612.   
2613. </template>Text="hello avalonia" />
2614. </Grid>Background="Aqua">
2615. <Grid
2616.     Width="300"
2617.     Height="300"
2618.     Background="Aqua">
2619.     <TextBlock
2620. <template>
2621.   
2622.    
2623.   
2624. </template>HorizontalAlignment="Center"
2625. <template>
2626.   
2627.    
2628.   
2629. </template>VerticalAlignment="Center"
2630. <template>
2631.   
2632.    
2633.   
2634. </template>Text="hello avalonia" />
2635. </Grid><TextBlock Text="hello avalonia" />
2636. </Grid><Grid
2637. <Grid
2638.     Width="300"
2639.     Height="300"
2640.     Background="Aqua">
2641.     <TextBlock
2642. <template>
2643.   
2644.    
2645.   
2646. </template>HorizontalAlignment="Center"
2647. <template>
2648.   
2649.    
2650.   
2651. </template>VerticalAlignment="Center"
2652. <template>
2653.   
2654.    
2655.   
2656. </template>Text="hello avalonia" />
2657. </Grid>Width="300"
2658. <Grid
2659.     Width="300"
2660.     Height="300"
2661.     Background="Aqua">
2662.     <TextBlock
2663. <template>
2664.   
2665.    
2666.   
2667. </template>HorizontalAlignment="Center"
2668. <template>
2669.   
2670.    
2671.   
2672. </template>VerticalAlignment="Center"
2673. <template>
2674.   
2675.    
2676.   
2677. </template>Text="hello avalonia" />
2678. </Grid>Height="300"
2679. <Grid
2680.     Width="300"
2681.     Height="300"
2682.     Background="Aqua">
2683.     <TextBlock
2684. <template>
2685.   
2686.    
2687.   
2688. </template>HorizontalAlignment="Center"
2689. <template>
2690.   
2691.    
2692.   
2693. </template>VerticalAlignment="Center"
2694. <template>
2695.   
2696.    
2697.   
2698. </template>Text="hello avalonia" />
2699. </Grid>Background="Aqua">
2700. <Grid
2701.     Width="300"
2702.     Height="300"
2703.     Background="Aqua">
2704.     <TextBlock
2705. <template>
2706.   
2707.    
2708.   
2709. </template>HorizontalAlignment="Center"
2710. <template>
2711.   
2712.    
2713.   
2714. </template>VerticalAlignment="Center"
2715. <template>
2716.   
2717.    
2718.   
2719. </template>Text="hello avalonia" />
2720. </Grid><TextBlock Text="hello avalonia" />
2721. </Grid><Grid
2722. <Grid
2723.     Width="300"
2724.     Height="300"
2725.     Background="Aqua">
2726.     <TextBlock
2727. <template>
2728.   
2729.    
2730.   
2731. </template>HorizontalAlignment="Center"
2732. <template>
2733.   
2734.    
2735.   
2736. </template>VerticalAlignment="Center"
2737. <template>
2738.   
2739.    
2740.   
2741. </template>Text="hello avalonia" />
2742. </Grid>Width="300"
2743. <Grid
2744.     Width="300"
2745.     Height="300"
2746.     Background="Aqua">
2747.     <TextBlock
2748. <template>
2749.   
2750.    
2751.   
2752. </template>HorizontalAlignment="Center"
2753. <template>
2754.   
2755.    
2756.   
2757. </template>VerticalAlignment="Center"
2758. <template>
2759.   
2760.    
2761.   
2762. </template>Text="hello avalonia" />
2763. </Grid>Height="300"
2764. <Grid
2765.     Width="300"
2766.     Height="300"
2767.     Background="Aqua">
2768.     <TextBlock
2769. <template>
2770.   
2771.    
2772.   
2773. </template>HorizontalAlignment="Center"
2774. <template>
2775.   
2776.    
2777.   
2778. </template>VerticalAlignment="Center"
2779. <template>
2780.   
2781.    
2782.   
2783. </template>Text="hello avalonia" />
2784. </Grid>Background="Aqua">
2785. <Grid
2786.     Width="300"
2787.     Height="300"
2788.     Background="Aqua">
2789.     <TextBlock
2790. <template>
2791.   
2792.    
2793.   
2794. </template>HorizontalAlignment="Center"
2795. <template>
2796.   
2797.    
2798.   
2799. </template>VerticalAlignment="Center"
2800. <template>
2801.   
2802.    
2803.   
2804. </template>Text="hello avalonia" />
2805. </Grid><TextBlock Text="hello avalonia" />
2806. </Grid><Grid
2807. <Grid
2808.     Width="300"
2809.     Height="300"
2810.     Background="Aqua">
2811.     <TextBlock
2812. <template>
2813.   
2814.    
2815.   
2816. </template>HorizontalAlignment="Center"
2817. <template>
2818.   
2819.    
2820.   
2821. </template>VerticalAlignment="Center"
2822. <template>
2823.   
2824.    
2825.   
2826. </template>Text="hello avalonia" />
2827. </Grid>Width="300"
2828. <Grid
2829.     Width="300"
2830.     Height="300"
2831.     Background="Aqua">
2832.     <TextBlock
2833. <template>
2834.   
2835.    
2836.   
2837. </template>HorizontalAlignment="Center"
2838. <template>
2839.   
2840.    
2841.   
2842. </template>VerticalAlignment="Center"
2843. <template>
2844.   
2845.    
2846.   
2847. </template>Text="hello avalonia" />
2848. </Grid>Height="300"
2849. <Grid
2850.     Width="300"
2851.     Height="300"
2852.     Background="Aqua">
2853.     <TextBlock
2854. <template>
2855.   
2856.    
2857.   
2858. </template>HorizontalAlignment="Center"
2859. <template>
2860.   
2861.    
2862.   
2863. </template>VerticalAlignment="Center"
2864. <template>
2865.   
2866.    
2867.   
2868. </template>Text="hello avalonia" />
2869. </Grid>Background="Aqua">
2870. <Grid
2871.     Width="300"
2872.     Height="300"
2873.     Background="Aqua">
2874.     <TextBlock
2875. <template>
2876.   
2877.    
2878.   
2879. </template>HorizontalAlignment="Center"
2880. <template>
2881.   
2882.    
2883.   
2884. </template>VerticalAlignment="Center"
2885. <template>
2886.   
2887.    
2888.   
2889. </template>Text="hello avalonia" />
2890. </Grid><TextBlock Text="hello avalonia" />
2891. </Grid><Grid
2892. <Grid
2893.     Width="300"
2894.     Height="300"
2895.     Background="Aqua">
2896.     <TextBlock
2897. <template>
2898.   
2899.    
2900.   
2901. </template>HorizontalAlignment="Center"
2902. <template>
2903.   
2904.    
2905.   
2906. </template>VerticalAlignment="Center"
2907. <template>
2908.   
2909.    
2910.   
2911. </template>Text="hello avalonia" />
2912. </Grid>Width="300"
2913. <Grid
2914.     Width="300"
2915.     Height="300"
2916.     Background="Aqua">
2917.     <TextBlock
2918. <template>
2919.   
2920.    
2921.   
2922. </template>HorizontalAlignment="Center"
2923. <template>
2924.   
2925.    
2926.   
2927. </template>VerticalAlignment="Center"
2928. <template>
2929.   
2930.    
2931.   
2932. </template>Text="hello avalonia" />
2933. </Grid>Height="300"
2934. <Grid
2935.     Width="300"
2936.     Height="300"
2937.     Background="Aqua">
2938.     <TextBlock
2939. <template>
2940.   
2941.    
2942.   
2943. </template>HorizontalAlignment="Center"
2944. <template>
2945.   
2946.    
2947.   
2948. </template>VerticalAlignment="Center"
2949. <template>
2950.   
2951.    
2952.   
2953. </template>Text="hello avalonia" />
2954. </Grid>Background="Aqua">
2955. <Grid
2956.     Width="300"
2957.     Height="300"
2958.     Background="Aqua">
2959.     <TextBlock
2960. <template>
2961.   
2962.    
2963.   
2964. </template>HorizontalAlignment="Center"
2965. <template>
2966.   
2967.    
2968.   
2969. </template>VerticalAlignment="Center"
2970. <template>
2971.   
2972.    
2973.   
2974. </template>Text="hello avalonia" />
2975. </Grid><TextBlock Text="hello avalonia" />
2976. </Grid><Grid
2977. <Grid
2978.     Width="300"
2979.     Height="300"
2980.     Background="Aqua">
2981.     <TextBlock
2982. <template>
2983.   
2984.    
2985.   
2986. </template>HorizontalAlignment="Center"
2987. <template>
2988.   
2989.    
2990.   
2991. </template>VerticalAlignment="Center"
2992. <template>
2993.   
2994.    
2995.   
2996. </template>Text="hello avalonia" />
2997. </Grid>Width="300"
2998. <Grid
2999.     Width="300"
3000.     Height="300"
3001.     Background="Aqua">
3002.     <TextBlock
3003. <template>
3004.   
3005.    
3006.   
3007. </template>HorizontalAlignment="Center"
3008. <template>
3009.   
3010.    
3011.   
3012. </template>VerticalAlignment="Center"
3013. <template>
3014.   
3015.    
3016.   
3017. </template>Text="hello avalonia" />
3018. </Grid>Height="300"
3019. <Grid
3020.     Width="300"
3021.     Height="300"
3022.     Background="Aqua">
3023.     <TextBlock
3024. <template>
3025.   
3026.    
3027.   
3028. </template>HorizontalAlignment="Center"
3029. <template>
3030.   
3031.    
3032.   
3033. </template>VerticalAlignment="Center"
3034. <template>
3035.   
3036.    
3037.   
3038. </template>Text="hello avalonia" />
3039. </Grid>Background="Aqua">
3040. <Grid
3041.     Width="300"
3042.     Height="300"
3043.     Background="Aqua">
3044.     <TextBlock
3045. <template>
3046.   
3047.    
3048.   
3049. </template>HorizontalAlignment="Center"
3050. <template>
3051.   
3052.    
3053.   
3054. </template>VerticalAlignment="Center"
3055. <template>
3056.   
3057.    
3058.   
3059. </template>Text="hello avalonia" />
3060. </Grid><TextBlock Text="hello avalonia" />
3061. </Grid><Grid
3062. <Grid
3063.     Width="300"
3064.     Height="300"
3065.     Background="Aqua">
3066.     <TextBlock
3067. <template>
3068.   
3069.    
3070.   
3071. </template>HorizontalAlignment="Center"
3072. <template>
3073.   
3074.    
3075.   
3076. </template>VerticalAlignment="Center"
3077. <template>
3078.   
3079.    
3080.   
3081. </template>Text="hello avalonia" />
3082. </Grid>Width="300"
3083. <Grid
3084.     Width="300"
3085.     Height="300"
3086.     Background="Aqua">
3087.     <TextBlock
3088. <template>
3089.   
3090.    
3091.   
3092. </template>HorizontalAlignment="Center"
3093. <template>
3094.   
3095.    
3096.   
3097. </template>VerticalAlignment="Center"
3098. <template>
3099.   
3100.    
3101.   
3102. </template>Text="hello avalonia" />
3103. </Grid>Height="300"
3104. <Grid
3105.     Width="300"
3106.     Height="300"
3107.     Background="Aqua">
3108.     <TextBlock
3109. <template>
3110.   
3111.    
3112.   
3113. </template>HorizontalAlignment="Center"
3114. <template>
3115.   
3116.    
3117.   
3118. </template>VerticalAlignment="Center"
3119. <template>
3120.   
3121.    
3122.   
3123. </template>Text="hello avalonia" />
3124. </Grid>Background="Aqua">
3125. <Grid
3126.     Width="300"
3127.     Height="300"
3128.     Background="Aqua">
3129.     <TextBlock
3130. <template>
3131.   
3132.    
3133.   
3134. </template>HorizontalAlignment="Center"
3135. <template>
3136.   
3137.    
3138.   
3139. </template>VerticalAlignment="Center"
3140. <template>
3141.   
3142.    
3143.   
3144. </template>Text="hello avalonia" />
3145. </Grid><TextBlock Text="hello avalonia" />
3146. </Grid><Grid
3147. <Grid
3148.     Width="300"
3149.     Height="300"
3150.     Background="Aqua">
3151.     <TextBlock
3152. <template>
3153.   
3154.    
3155.   
3156. </template>HorizontalAlignment="Center"
3157. <template>
3158.   
3159.    
3160.   
3161. </template>VerticalAlignment="Center"
3162. <template>
3163.   
3164.    
3165.   
3166. </template>Text="hello avalonia" />
3167. </Grid>Width="300"
3168. <Grid
3169.     Width="300"
3170.     Height="300"
3171.     Background="Aqua">
3172.     <TextBlock
3173. <template>
3174.   
3175.    
3176.   
3177. </template>HorizontalAlignment="Center"
3178. <template>
3179.   
3180.    
3181.   
3182. </template>VerticalAlignment="Center"
3183. <template>
3184.   
3185.    
3186.   
3187. </template>Text="hello avalonia" />
3188. </Grid>Height="300"
3189. <Grid
3190.     Width="300"
3191.     Height="300"
3192.     Background="Aqua">
3193.     <TextBlock
3194. <template>
3195.   
3196.    
3197.   
3198. </template>HorizontalAlignment="Center"
3199. <template>
3200.   
3201.    
3202.   
3203. </template>VerticalAlignment="Center"
3204. <template>
3205.   
3206.    
3207.   
3208. </template>Text="hello avalonia" />
3209. </Grid>Background="Aqua">
3210. <Grid
3211.     Width="300"
3212.     Height="300"
3213.     Background="Aqua">
3214.     <TextBlock
3215. <template>
3216.   
3217.    
3218.   
3219. </template>HorizontalAlignment="Center"
3220. <template>
3221.   
3222.    
3223.   
3224. </template>VerticalAlignment="Center"
3225. <template>
3226.   
3227.    
3228.   
3229. </template>Text="hello avalonia" />
3230. </Grid><TextBlock Text="hello avalonia" />
3231. </Grid><Grid
3232. <Grid
3233.     Width="300"
3234.     Height="300"
3235.     Background="Aqua">
3236.     <TextBlock
3237. <template>
3238.   
3239.    
3240.   
3241. </template>HorizontalAlignment="Center"
3242. <template>
3243.   
3244.    
3245.   
3246. </template>VerticalAlignment="Center"
3247. <template>
3248.   
3249.    
3250.   
3251. </template>Text="hello avalonia" />
3252. </Grid>Width="300"
3253. <Grid
3254.     Width="300"
3255.     Height="300"
3256.     Background="Aqua">
3257.     <TextBlock
3258. <template>
3259.   
3260.    
3261.   
3262. </template>HorizontalAlignment="Center"
3263. <template>
3264.   
3265.    
3266.   
3267. </template>VerticalAlignment="Center"
3268. <template>
3269.   
3270.    
3271.   
3272. </template>Text="hello avalonia" />
3273. </Grid>Height="300"
3274. <Grid
3275.     Width="300"
3276.     Height="300"
3277.     Background="Aqua">
3278.     <TextBlock
3279. <template>
3280.   
3281.    
3282.   
3283. </template>HorizontalAlignment="Center"
3284. <template>
3285.   
3286.    
3287.   
3288. </template>VerticalAlignment="Center"
3289. <template>
3290.   
3291.    
3292.   
3293. </template>Text="hello avalonia" />
3294. </Grid>Background="Aqua">
3295. <Grid
3296.     Width="300"
3297.     Height="300"
3298.     Background="Aqua">
3299.     <TextBlock
3300. <template>
3301.   
3302.    
3303.   
3304. </template>HorizontalAlignment="Center"
3305. <template>
3306.   
3307.    
3308.   
3309. </template>VerticalAlignment="Center"
3310. <template>
3311.   
3312.    
3313.   
3314. </template>Text="hello avalonia" />
3315. </Grid><TextBlock Text="hello avalonia" />
3316. </Grid><Grid
3317. <Grid
3318.     Width="300"
3319.     Height="300"
3320.     Background="Aqua">
3321.     <TextBlock
3322. <template>
3323.   
3324.    
3325.   
3326. </template>HorizontalAlignment="Center"
3327. <template>
3328.   
3329.    
3330.   
3331. </template>VerticalAlignment="Center"
3332. <template>
3333.   
3334.    
3335.   
3336. </template>Text="hello avalonia" />
3337. </Grid>Width="300"
3338. <Grid
3339.     Width="300"
3340.     Height="300"
3341.     Background="Aqua">
3342.     <TextBlock
3343. <template>
3344.   
3345.    
3346.   
3347. </template>HorizontalAlignment="Center"
3348. <template>
3349.   
3350.    
3351.   
3352. </template>VerticalAlignment="Center"
3353. <template>
3354.   
3355.    
3356.   
3357. </template>Text="hello avalonia" />
3358. </Grid>Height="300"
3359. <Grid
3360.     Width="300"
3361.     Height="300"
3362.     Background="Aqua">
3363.     <TextBlock
3364. <template>
3365.   
3366.    
3367.   
3368. </template>HorizontalAlignment="Center"
3369. <template>
3370.   
3371.    
3372.   
3373. </template>VerticalAlignment="Center"
3374. <template>
3375.   
3376.    
3377.   
3378. </template>Text="hello avalonia" />
3379. </Grid>Background="Aqua">
3380. <Grid
3381.     Width="300"
3382.     Height="300"
3383.     Background="Aqua">
3384.     <TextBlock
3385. <template>
3386.   
3387.    
3388.   
3389. </template>HorizontalAlignment="Center"
3390. <template>
3391.   
3392.    
3393.   
3394. </template>VerticalAlignment="Center"
3395. <template>
3396.   
3397.    
3398.   
3399. </template>Text="hello avalonia" />
3400. </Grid><TextBlock Text="hello avalonia" />
3401. </Grid><Grid
3402. <Grid
3403.     Width="300"
3404.     Height="300"
3405.     Background="Aqua">
3406.     <TextBlock
3407. <template>
3408.   
3409.    
3410.   
3411. </template>HorizontalAlignment="Center"
3412. <template>
3413.   
3414.    
3415.   
3416. </template>VerticalAlignment="Center"
3417. <template>
3418.   
3419.    
3420.   
3421. </template>Text="hello avalonia" />
3422. </Grid>Width="300"
3423. <Grid
3424.     Width="300"
3425.     Height="300"
3426.     Background="Aqua">
3427.     <TextBlock
3428. <template>
3429.   
3430.    
3431.   
3432. </template>HorizontalAlignment="Center"
3433. <template>
3434.   
3435.    
3436.   
3437. </template>VerticalAlignment="Center"
3438. <template>
3439.   
3440.    
3441.   
3442. </template>Text="hello avalonia" />
3443. </Grid>Height="300"
3444. <Grid
3445.     Width="300"
3446.     Height="300"
3447.     Background="Aqua">
3448.     <TextBlock
3449. <template>
3450.   
3451.    
3452.   
3453. </template>HorizontalAlignment="Center"
3454. <template>
3455.   
3456.    
3457.   
3458. </template>VerticalAlignment="Center"
3459. <template>
3460.   
3461.    
3462.   
3463. </template>Text="hello avalonia" />
3464. </Grid>Background="Aqua">
3465. <Grid
3466.     Width="300"
3467.     Height="300"
3468.     Background="Aqua">
3469.     <TextBlock
3470. <template>
3471.   
3472.    
3473.   
3474. </template>HorizontalAlignment="Center"
3475. <template>
3476.   
3477.    
3478.   
3479. </template>VerticalAlignment="Center"
3480. <template>
3481.   
3482.    
3483.   
3484. </template>Text="hello avalonia" />
3485. </Grid><TextBlock Text="hello avalonia" />
3486. </Grid><Grid
3487. <Grid
3488.     Width="300"
3489.     Height="300"
3490.     Background="Aqua">
3491.     <TextBlock
3492. <template>
3493.   
3494.    
3495.   
3496. </template>HorizontalAlignment="Center"
3497. <template>
3498.   
3499.    
3500.   
3501. </template>VerticalAlignment="Center"
3502. <template>
3503.   
3504.    
3505.   
3506. </template>Text="hello avalonia" />
3507. </Grid>Width="300"
3508. <Grid
3509.     Width="300"
3510.     Height="300"
3511.     Background="Aqua">
3512.     <TextBlock
3513. <template>
3514.   
3515.    
3516.   
3517. </template>HorizontalAlignment="Center"
3518. <template>
3519.   
3520.    
3521.   
3522. </template>VerticalAlignment="Center"
3523. <template>
3524.   
3525.    
3526.   
3527. </template>Text="hello avalonia" />
3528. </Grid>Height="300"
3529. <Grid
3530.     Width="300"
3531.     Height="300"
3532.     Background="Aqua">
3533.     <TextBlock
3534. <template>
3535.   
3536.    
3537.   
3538. </template>HorizontalAlignment="Center"
3539. <template>
3540.   
3541.    
3542.   
3543. </template>VerticalAlignment="Center"
3544. <template>
3545.   
3546.    
3547.   
3548. </template>Text="hello avalonia" />
3549. </Grid>Background="Aqua">
3550. <Grid
3551.     Width="300"
3552.     Height="300"
3553.     Background="Aqua">
3554.     <TextBlock
3555. <template>
3556.   
3557.    
3558.   
3559. </template>HorizontalAlignment="Center"
3560. <template>
3561.   
3562.    
3563.   
3564. </template>VerticalAlignment="Center"
3565. <template>
3566.   
3567.    
3568.   
3569. </template>Text="hello avalonia" />
3570. </Grid><TextBlock Text="hello avalonia" />
3571. </Grid><Grid
3572. <Grid
3573.     Width="300"
3574.     Height="300"
3575.     Background="Aqua">
3576.     <TextBlock
3577. <template>
3578.   
3579.    
3580.   
3581. </template>HorizontalAlignment="Center"
3582. <template>
3583.   
3584.    
3585.   
3586. </template>VerticalAlignment="Center"
3587. <template>
3588.   
3589.    
3590.   
3591. </template>Text="hello avalonia" />
3592. </Grid>Width="300"
3593. <Grid
3594.     Width="300"
3595.     Height="300"
3596.     Background="Aqua">
3597.     <TextBlock
3598. <template>
3599.   
3600.    
3601.   
3602. </template>HorizontalAlignment="Center"
3603. <template>
3604.   
3605.    
3606.   
3607. </template>VerticalAlignment="Center"
3608. <template>
3609.   
3610.    
3611.   
3612. </template>Text="hello avalonia" />
3613. </Grid>Height="300"
3614. <Grid
3615.     Width="300"
3616.     Height="300"
3617.     Background="Aqua">
3618.     <TextBlock
3619. <template>
3620.   
3621.    
3622.   
3623. </template>HorizontalAlignment="Center"
3624. <template>
3625.   
3626.    
3627.   
3628. </template>VerticalAlignment="Center"
3629. <template>
3630.   
3631.    
3632.   
3633. </template>Text="hello avalonia" />
3634. </Grid>Background="Aqua">
3635. <Grid
3636.     Width="300"
3637.     Height="300"
3638.     Background="Aqua">
3639.     <TextBlock
3640. <template>
3641.   
3642.    
3643.   
3644. </template>HorizontalAlignment="Center"
3645. <template>
3646.   
3647.    
3648.   
3649. </template>VerticalAlignment="Center"
3650. <template>
3651.   
3652.    
3653.   
3654. </template>Text="hello avalonia" />
3655. </Grid><TextBlock Text="hello avalonia" />
3656. </Grid><Grid
3657. <Grid
3658.     Width="300"
3659.     Height="300"
3660.     Background="Aqua">
3661.     <TextBlock
3662. <template>
3663.   
3664.    
3665.   
3666. </template>HorizontalAlignment="Center"
3667. <template>
3668.   
3669.    
3670.   
3671. </template>VerticalAlignment="Center"
3672. <template>
3673.   
3674.    
3675.   
3676. </template>Text="hello avalonia" />
3677. </Grid>Width="300"
3678. <Grid
3679.     Width="300"
3680.     Height="300"
3681.     Background="Aqua">
3682.     <TextBlock
3683. <template>
3684.   
3685.    
3686.   
3687. </template>HorizontalAlignment="Center"
3688. <template>
3689.   
3690.    
3691.   
3692. </template>VerticalAlignment="Center"
3693. <template>
3694.   
3695.    
3696.   
3697. </template>Text="hello avalonia" />
3698. </Grid>Height="300"
3699. <Grid
3700.     Width="300"
3701.     Height="300"
3702.     Background="Aqua">
3703.     <TextBlock
3704. <template>
3705.   
3706.    
3707.   
3708. </template>HorizontalAlignment="Center"
3709. <template>
3710.   
3711.    
3712.   
3713. </template>VerticalAlignment="Center"
3714. <template>
3715.   
3716.    
3717.   
3718. </template>Text="hello avalonia" />
3719. </Grid>Background="Aqua">
3720. <Grid
3721.     Width="300"
3722.     Height="300"
3723.     Background="Aqua">
3724.     <TextBlock
3725. <template>
3726.   
3727.    
3728.   
3729. </template>HorizontalAlignment="Center"
3730. <template>
3731.   
3732.    
3733.   
3734. </template>VerticalAlignment="Center"
3735. <template>
3736.   
3737.    
3738.   
3739. </template>Text="hello avalonia" />
3740. </Grid><TextBlock Text="hello avalonia" />
3741. </Grid><Grid
3742. <Grid
3743.     Width="300"
3744.     Height="300"
3745.     Background="Aqua">
3746.     <TextBlock
3747. <template>
3748.   
3749.    
3750.   
3751. </template>HorizontalAlignment="Center"
3752. <template>
3753.   
3754.    
3755.   
3756. </template>VerticalAlignment="Center"
3757. <template>
3758.   
3759.    
3760.   
3761. </template>Text="hello avalonia" />
3762. </Grid>Width="300"
3763. <Grid
3764.     Width="300"
3765.     Height="300"
3766.     Background="Aqua">
3767.     <TextBlock
3768. <template>
3769.   
3770.    
3771.   
3772. </template>HorizontalAlignment="Center"
3773. <template>
3774.   
3775.    
3776.   
3777. </template>VerticalAlignment="Center"
3778. <template>
3779.   
3780.    
3781.   
3782. </template>Text="hello avalonia" />
3783. </Grid>Height="300"
3784. <Grid
3785.     Width="300"
3786.     Height="300"
3787.     Background="Aqua">
3788.     <TextBlock
3789. <template>
3790.   
3791.    
3792.   
3793. </template>HorizontalAlignment="Center"
3794. <template>
3795.   
3796.    
3797.   
3798. </template>VerticalAlignment="Center"
3799. <template>
3800.   
3801.    
3802.   
3803. </template>Text="hello avalonia" />
3804. </Grid>Background="Aqua">
3805. <Grid
3806.     Width="300"
3807.     Height="300"
3808.     Background="Aqua">
3809.     <TextBlock
3810. <template>
3811.   
3812.    
3813.   
3814. </template>HorizontalAlignment="Center"
3815. <template>
3816.   
3817.    
3818.   
3819. </template>VerticalAlignment="Center"
3820. <template>
3821.   
3822.    
3823.   
3824. </template>Text="hello avalonia" />
3825. </Grid><TextBlock Text="hello avalonia" />
3826. </Grid><Grid
3827. <Grid
3828.     Width="300"
3829.     Height="300"
3830.     Background="Aqua">
3831.     <TextBlock
3832. <template>
3833.   
3834.    
3835.   
3836. </template>HorizontalAlignment="Center"
3837. <template>
3838.   
3839.    
3840.   
3841. </template>VerticalAlignment="Center"
3842. <template>
3843.   
3844.    
3845.   
3846. </template>Text="hello avalonia" />
3847. </Grid>Width="300"
3848. <Grid
3849.     Width="300"
3850.     Height="300"
3851.     Background="Aqua">
3852.     <TextBlock
3853. <template>
3854.   
3855.    
3856.   
3857. </template>HorizontalAlignment="Center"
3858. <template>
3859.   
3860.    
3861.   
3862. </template>VerticalAlignment="Center"
3863. <template>
3864.   
3865.    
3866.   
3867. </template>Text="hello avalonia" />
3868. </Grid>Height="300"
3869. <Grid
3870.     Width="300"
3871.     Height="300"
3872.     Background="Aqua">
3873.     <TextBlock
3874. <template>
3875.   
3876.    
3877.   
3878. </template>HorizontalAlignment="Center"
3879. <template>
3880.   
3881.    
3882.   
3883. </template>VerticalAlignment="Center"
3884. <template>
3885.   
3886.    
3887.   
3888. </template>Text="hello avalonia" />
3889. </Grid>Background="Aqua">
3890. <Grid
3891.     Width="300"
3892.     Height="300"
3893.     Background="Aqua">
3894.     <TextBlock
3895. <template>
3896.   
3897.    
3898.   
3899. </template>HorizontalAlignment="Center"
3900. <template>
3901.   
3902.    
3903.   
3904. </template>VerticalAlignment="Center"
3905. <template>
3906.   
3907.    
3908.   
3909. </template>Text="hello avalonia" />
3910. </Grid><TextBlock Text="hello avalonia" />
3911. </Grid><Grid
3912. <Grid
3913.     Width="300"
3914.     Height="300"
3915.     Background="Aqua">
3916.     <TextBlock
3917. <template>
3918.   
3919.    
3920.   
3921. </template>HorizontalAlignment="Center"
3922. <template>
3923.   
3924.    
3925.   
3926. </template>VerticalAlignment="Center"
3927. <template>
3928.   
3929.    
3930.   
3931. </template>Text="hello avalonia" />
3932. </Grid>Width="300"
3933. <Grid
3934.     Width="300"
3935.     Height="300"
3936.     Background="Aqua">
3937.     <TextBlock
3938. <template>
3939.   
3940.    
3941.   
3942. </template>HorizontalAlignment="Center"
3943. <template>
3944.   
3945.    
3946.   
3947. </template>VerticalAlignment="Center"
3948. <template>
3949.   
3950.    
3951.   
3952. </template>Text="hello avalonia" />
3953. </Grid>Height="300"
3954. <Grid
3955.     Width="300"
3956.     Height="300"
3957.     Background="Aqua">
3958.     <TextBlock
3959. <template>
3960.   
3961.    
3962.   
3963. </template>HorizontalAlignment="Center"
3964. <template>
3965.   
3966.    
3967.   
3968. </template>VerticalAlignment="Center"
3969. <template>
3970.   
3971.    
3972.   
3973. </template>Text="hello avalonia" />
3974. </Grid>Background="Aqua">
3975. <Grid
3976.     Width="300"
3977.     Height="300"
3978.     Background="Aqua">
3979.     <TextBlock
3980. <template>
3981.   
3982.    
3983.   
3984. </template>HorizontalAlignment="Center"
3985. <template>
3986.   
3987.    
3988.   
3989. </template>VerticalAlignment="Center"
3990. <template>
3991.   
3992.    
3993.   
3994. </template>Text="hello avalonia" />
3995. </Grid><TextBlock Text="hello avalonia" />
3996. </Grid><Grid
3997. <Grid
3998.     Width="300"
3999.     Height="300"
4000.     Background="Aqua">
4001.     <TextBlock
4002. <template>
4003.   
4004.    
4005.   
4006. </template>HorizontalAlignment="Center"
4007. <template>
4008.   
4009.    
4010.   
4011. </template>VerticalAlignment="Center"
4012. <template>
4013.   
4014.    
4015.   
4016. </template>Text="hello avalonia" />
4017. </Grid>Width="300"
4018. <Grid
4019.     Width="300"
4020.     Height="300"
4021.     Background="Aqua">
4022.     <TextBlock
4023. <template>
4024.   
4025.    
4026.   
4027. </template>HorizontalAlignment="Center"
4028. <template>
4029.   
4030.    
4031.   
4032. </template>VerticalAlignment="Center"
4033. <template>
4034.   
4035.    
4036.   
4037. </template>Text="hello avalonia" />
4038. </Grid>Height="300"
4039. <Grid
4040.     Width="300"
4041.     Height="300"
4042.     Background="Aqua">
4043.     <TextBlock
4044. <template>
4045.   
4046.    
4047.   
4048. </template>HorizontalAlignment="Center"
4049. <template>
4050.   
4051.    
4052.   
4053. </template>VerticalAlignment="Center"
4054. <template>
4055.   
4056.    
4057.   
4058. </template>Text="hello avalonia" />
4059. </Grid>Background="Aqua">
4060. <Grid
4061.     Width="300"
4062.     Height="300"
4063.     Background="Aqua">
4064.     <TextBlock
4065. <template>
4066.   
4067.    
4068.   
4069. </template>HorizontalAlignment="Center"
4070. <template>
4071.   
4072.    
4073.   
4074. </template>VerticalAlignment="Center"
4075. <template>
4076.   
4077.    
4078.   
4079. </template>Text="hello avalonia" />
4080. </Grid><TextBlock Text="hello avalonia" />
4081. </Grid><Grid
4082. <Grid
4083.     Width="300"
4084.     Height="300"
4085.     Background="Aqua">
4086.     <TextBlock
4087. <template>
4088.   
4089.    
4090.   
4091. </template>HorizontalAlignment="Center"
4092. <template>
4093.   
4094.    
4095.   
4096. </template>VerticalAlignment="Center"
4097. <template>
4098.   
4099.    
4100.   
4101. </template>Text="hello avalonia" />
4102. </Grid>Width="300"
4103. <Grid
4104.     Width="300"
4105.     Height="300"
4106.     Background="Aqua">
4107.     <TextBlock
4108. <template>
4109.   
4110.    
4111.   
4112. </template>HorizontalAlignment="Center"
4113. <template>
4114.   
4115.    
4116.   
4117. </template>VerticalAlignment="Center"
4118. <template>
4119.   
4120.    
4121.   
4122. </template>Text="hello avalonia" />
4123. </Grid>Height="300"
4124. <Grid
4125.     Width="300"
4126.     Height="300"
4127.     Background="Aqua">
4128.     <TextBlock
4129. <template>
4130.   
4131.    
4132.   
4133. </template>HorizontalAlignment="Center"
4134. <template>
4135.   
4136.    
4137.   
4138. </template>VerticalAlignment="Center"
4139. <template>
4140.   
4141.    
4142.   
4143. </template>Text="hello avalonia" />
4144. </Grid>Background="Aqua">
4145. <Grid
4146.     Width="300"
4147.     Height="300"
4148.     Background="Aqua">
4149.     <TextBlock
4150. <template>
4151.   
4152.    
4153.   
4154. </template>HorizontalAlignment="Center"
4155. <template>
4156.   
4157.    
4158.   
4159. </template>VerticalAlignment="Center"
4160. <template>
4161.   
4162.    
4163.   
4164. </template>Text="hello avalonia" />
4165. </Grid><TextBlock Text="hello avalonia" />
4166. </Grid><Grid
4167. <Grid
4168.     Width="300"
4169.     Height="300"
4170.     Background="Aqua">
4171.     <TextBlock
4172. <template>
4173.   
4174.    
4175.   
4176. </template>HorizontalAlignment="Center"
4177. <template>
4178.   
4179.    
4180.   
4181. </template>VerticalAlignment="Center"
4182. <template>
4183.   
4184.    
4185.   
4186. </template>Text="hello avalonia" />
4187. </Grid>Width="300"
4188. <Grid
4189.     Width="300"
4190.     Height="300"
4191.     Background="Aqua">
4192.     <TextBlock
4193. <template>
4194.   
4195.    
4196.   
4197. </template>HorizontalAlignment="Center"
4198. <template>
4199.   
4200.    
4201.   
4202. </template>VerticalAlignment="Center"
4203. <template>
4204.   
4205.    
4206.   
4207. </template>Text="hello avalonia" />
4208. </Grid>Height="300"
4209. <Grid
4210.     Width="300"
4211.     Height="300"
4212.     Background="Aqua">
4213.     <TextBlock
4214. <template>
4215.   
4216.    
4217.   
4218. </template>HorizontalAlignment="Center"
4219. <template>
4220.   
4221.    
4222.   
4223. </template>VerticalAlignment="Center"
4224. <template>
4225.   
4226.    
4227.   
4228. </template>Text="hello avalonia" />
4229. </Grid>Background="Aqua">
4230. <Grid
4231.     Width="300"
4232.     Height="300"
4233.     Background="Aqua">
4234.     <TextBlock
4235. <template>
4236.   
4237.    
4238.   
4239. </template>HorizontalAlignment="Center"
4240. <template>
4241.   
4242.    
4243.   
4244. </template>VerticalAlignment="Center"
4245. <template>
4246.   
4247.    
4248.   
4249. </template>Text="hello avalonia" />
4250. </Grid><TextBlock Text="hello avalonia" />
4251. </Grid><Grid
4252. <Grid
4253.     Width="300"
4254.     Height="300"
4255.     Background="Aqua">
4256.     <TextBlock
4257. <template>
4258.   
4259.    
4260.   
4261. </template>HorizontalAlignment="Center"
4262. <template>
4263.   
4264.    
4265.   
4266. </template>VerticalAlignment="Center"
4267. <template>
4268.   
4269.    
4270.   
4271. </template>Text="hello avalonia" />
4272. </Grid>Width="300"
4273. <Grid
4274.     Width="300"
4275.     Height="300"
4276.     Background="Aqua">
4277.     <TextBlock
4278. <template>
4279.   
4280.    
4281.   
4282. </template>HorizontalAlignment="Center"
4283. <template>
4284.   
4285.    
4286.   
4287. </template>VerticalAlignment="Center"
4288. <template>
4289.   
4290.    
4291.   
4292. </template>Text="hello avalonia" />
4293. </Grid>Height="300"
4294. <Grid
4295.     Width="300"
4296.     Height="300"
4297.     Background="Aqua">
4298.     <TextBlock
4299. <template>
4300.   
4301.    
4302.   
4303. </template>HorizontalAlignment="Center"
4304. <template>
4305.   
4306.    
4307.   
4308. </template>VerticalAlignment="Center"
4309. <template>
4310.   
4311.    
4312.   
4313. </template>Text="hello avalonia" />
4314. </Grid>Background="Aqua">
4315. <Grid
4316.     Width="300"
4317.     Height="300"
4318.     Background="Aqua">
4319.     <TextBlock
4320. <template>
4321.   
4322.    
4323.   
4324. </template>HorizontalAlignment="Center"
4325. <template>
4326.   
4327.    
4328.   
4329. </template>VerticalAlignment="Center"
4330. <template>
4331.   
4332.    
4333.   
4334. </template>Text="hello avalonia" />
4335. </Grid><TextBlock Text="hello avalonia" />
4336. </Grid><Grid
4337. <Grid
4338.     Width="300"
4339.     Height="300"
4340.     Background="Aqua">
4341.     <TextBlock
4342. <template>
4343.   
4344.    
4345.   
4346. </template>HorizontalAlignment="Center"
4347. <template>
4348.   
4349.    
4350.   
4351. </template>VerticalAlignment="Center"
4352. <template>
4353.   
4354.    
4355.   
4356. </template>Text="hello avalonia" />
4357. </Grid>Width="300"
4358. <Grid
4359.     Width="300"
4360.     Height="300"
4361.     Background="Aqua">
4362.     <TextBlock
4363. <template>
4364.   
4365.    
4366.   
4367. </template>HorizontalAlignment="Center"
4368. <template>
4369.   
4370.    
4371.   
4372. </template>VerticalAlignment="Center"
4373. <template>
4374.   
4375.    
4376.   
4377. </template>Text="hello avalonia" />
4378. </Grid>Height="300"
4379. <Grid
4380.     Width="300"
4381.     Height="300"
4382.     Background="Aqua">
4383.     <TextBlock
4384. <template>
4385.   
4386.    
4387.   
4388. </template>HorizontalAlignment="Center"
4389. <template>
4390.   
4391.    
4392.   
4393. </template>VerticalAlignment="Center"
4394. <template>
4395.   
4396.    
4397.   
4398. </template>Text="hello avalonia" />
4399. </Grid>Background="Aqua">
4400. <Grid
4401.     Width="300"
4402.     Height="300"
4403.     Background="Aqua">
4404.     <TextBlock
4405. <template>
4406.   
4407.    
4408.   
4409. </template>HorizontalAlignment="Center"
4410. <template>
4411.   
4412.    
4413.   
4414. </template>VerticalAlignment="Center"
4415. <template>
4416.   
4417.    
4418.   
4419. </template>Text="hello avalonia" />
4420. </Grid><TextBlock Text="hello avalonia" />
4421. </Grid><Grid
4422. <Grid
4423.     Width="300"
4424.     Height="300"
4425.     Background="Aqua">
4426.     <TextBlock
4427. <template>
4428.   
4429.    
4430.   
4431. </template>HorizontalAlignment="Center"
4432. <template>
4433.   
4434.    
4435.   
4436. </template>VerticalAlignment="Center"
4437. <template>
4438.   
4439.    
4440.   
4441. </template>Text="hello avalonia" />
4442. </Grid>Width="300"
4443. <Grid
4444.     Width="300"
4445.     Height="300"
4446.     Background="Aqua">
4447.     <TextBlock
4448. <template>
4449.   
4450.    
4451.   
4452. </template>HorizontalAlignment="Center"
4453. <template>
4454.   
4455.    
4456.   
4457. </template>VerticalAlignment="Center"
4458. <template>
4459.   
4460.    
4461.   
4462. </template>Text="hello avalonia" />
4463. </Grid>Height="300"
4464. <Grid
4465.     Width="300"
4466.     Height="300"
4467.     Background="Aqua">
4468.     <TextBlock
4469. <template>
4470.   
4471.    
4472.   
4473. </template>HorizontalAlignment="Center"
4474. <template>
4475.   
4476.    
4477.   
4478. </template>VerticalAlignment="Center"
4479. <template>
4480.   
4481.    
4482.   
4483. </template>Text="hello avalonia" />
4484. </Grid>Background="Aqua">
4485. <Grid
4486.     Width="300"
4487.     Height="300"
4488.     Background="Aqua">
4489.     <TextBlock
4490. <template>
4491.   
4492.    
4493.   
4494. </template>HorizontalAlignment="Center"
4495. <template>
4496.   
4497.    
4498.   
4499. </template>VerticalAlignment="Center"
4500. <template>
4501.   
4502.    
4503.   
4504. </template>Text="hello avalonia" />
4505. </Grid><TextBlock Text="hello avalonia" />
4506. </Grid><Grid
4507. <Grid
4508.     Width="300"
4509.     Height="300"
4510.     Background="Aqua">
4511.     <TextBlock
4512. <template>
4513.   
4514.    
4515.   
4516. </template>HorizontalAlignment="Center"
4517. <template>
4518.   
4519.    
4520.   
4521. </template>VerticalAlignment="Center"
4522. <template>
4523.   
4524.    
4525.   
4526. </template>Text="hello avalonia" />
4527. </Grid>Width="300"
4528. <Grid
4529.     Width="300"
4530.     Height="300"
4531.     Background="Aqua">
4532.     <TextBlock
4533. <template>
4534.   
4535.    
4536.   
4537. </template>HorizontalAlignment="Center"
4538. <template>
4539.   
4540.    
4541.   
4542. </template>VerticalAlignment="Center"
4543. <template>
4544.   
4545.    
4546.   
4547. </template>Text="hello avalonia" />
4548. </Grid>Height="300"
4549. <Grid
4550.     Width="300"
4551.     Height="300"
4552.     Background="Aqua">
4553.     <TextBlock
4554. <template>
4555.   
4556.    
4557.   
4558. </template>HorizontalAlignment="Center"
4559. <template>
4560.   
4561.    
4562.   
4563. </template>VerticalAlignment="Center"
4564. <template>
4565.   
4566.    
4567.   
4568. </template>Text="hello avalonia" />
4569. </Grid>Background="Aqua">
4570. <Grid
4571.     Width="300"
4572.     Height="300"
4573.     Background="Aqua">
4574.     <TextBlock
4575. <template>
4576.   
4577.    
4578.   
4579. </template>HorizontalAlignment="Center"
4580. <template>
4581.   
4582.    
4583.   
4584. </template>VerticalAlignment="Center"
4585. <template>
4586.   
4587.    
4588.   
4589. </template>Text="hello avalonia" />
4590. </Grid><TextBlock Text="hello avalonia" />
4591. </Grid><Grid
4592. <Grid
4593.     Width="300"
4594.     Height="300"
4595.     Background="Aqua">
4596.     <TextBlock
4597. <template>
4598.   
4599.    
4600.   
4601. </template>HorizontalAlignment="Center"
4602. <template>
4603.   
4604.    
4605.   
4606. </template>VerticalAlignment="Center"
4607. <template>
4608.   
4609.    
4610.   
4611. </template>Text="hello avalonia" />
4612. </Grid>Width="300"
4613. <Grid
4614.     Width="300"
4615.     Height="300"
4616.     Background="Aqua">
4617.     <TextBlock
4618. <template>
4619.   
4620.    
4621.   
4622. </template>HorizontalAlignment="Center"
4623. <template>
4624.   
4625.    
4626.   
4627. </template>VerticalAlignment="Center"
4628. <template>
4629.   
4630.    
4631.   
4632. </template>Text="hello avalonia" />
4633. </Grid>Height="300"
4634. <Grid
4635.     Width="300"
4636.     Height="300"
4637.     Background="Aqua">
4638.     <TextBlock
4639. <template>
4640.   
4641.    
4642.   
4643. </template>HorizontalAlignment="Center"
4644. <template>
4645.   
4646.    
4647.   
4648. </template>VerticalAlignment="Center"
4649. <template>
4650.   
4651.    
4652.   
4653. </template>Text="hello avalonia" />
4654. </Grid>Background="Aqua">
4655. <Grid
4656.     Width="300"
4657.     Height="300"
4658.     Background="Aqua">
4659.     <TextBlock
4660. <template>
4661.   
4662.    
4663.   
4664. </template>HorizontalAlignment="Center"
4665. <template>
4666.   
4667.    
4668.   
4669. </template>VerticalAlignment="Center"
4670. <template>
4671.   
4672.    
4673.   
4674. </template>Text="hello avalonia" />
4675. </Grid><TextBlock Text="hello avalonia" />
4676. </Grid>

复制代码

我知道这个写法很长，事实上，因为我们没有办法照顾到 WPF 和 Avalonia 的样式的写法，为此选择了最为冗长的写法。
我们的网格划分照顾到了 Grid 的 3 种划分方式：

• 像素
  
• 星*
  
• Auto
  

在 WPF 和 Avalonia 中，这几个的意思是：

• 这里指定了第一行就是 80 像素
  
• 和  可以将除了像素 和 Auto 分完后剩下的东西，再进行比例的拆分，这里的 1* 和 2* 的意思就是将剩下的内容，其中 1* 占 1/(1+2) 份，而 2* 占 2/(1+2)份。
  
• Auto 的高度取决于内部的控件，如果内部控件很大，那 Auto 也会很大。
  

好了，下面我们来看前端的实现。
2. html + css 前端的网格切分

在 html 和 css 中，你可以使用 grid-template-rows 和 grid-template-columns 以及在容器中，使用 grid-row 和 grid-column 。
具体的效果是这样的：

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

复制代码

你需要看到的是，你可以用类似 80px 表示 WPF 和 Avalonia 中的像素写法。
关于 WPF 和 Avalonia 的星号相对比例写法，你可以使用 fr 单位来表示，而 Auto 在 css 里面也是支持的。
3. html + css 前端的差别

差异表可以在这里看到。
WPF 和 Avaloniahtml + css备注Grid.RowDefinitions 和一系列定义grid-template-rows同样支持像素、星号和 Auto 的写法，其中像素在 css 里面要带单位 px，星号在 css 里面会写成 fr，如 1fr,2fr，Auto 写成 autoGrid.ColumnDefinitions 和一系列定义grid-template-columns同样支持像素、星号和 Auto 的写法，其中像素在 css 里面要带单位 px，星号在 css 里面会写成 fr，如 1fr,2fr，Auto 写成 autoGrid.Rowgrid-rowWPF 和 Avalonia 里面从 0 开始，但是 css 里面从 1 开始，不用带单位！Grid.Columngrid-columnWPF 和 Avalonia 里面从 0 开始，但是 css 里面从 1 开始，不用带单位！

我们在这里没有讨论 Grid.ColumnSpan 和 Grid.RowSpan 的状况，实际上你可以使用 grid-column-start、grid-column-end、grid-row-start和grid-row-end来进行相关配置。

四、网格内容的层叠

在 Avalonia 中，如果你没有划分网格，只有层叠的需求。
Avalonia 会推荐你使用 Panel 来实现同样的效果，Panel 不具有划分网格的能力，
但是足够简单，如果为了性能而优化的话，使用 Panel 是一个更好的选择。

在 WPF 和 Avalonia 中，我们会使用 Grid 在同一个格点堆叠一些 Border 或者是 TextBlock 这样的内容实现卡片的效果。
总之，网格的层叠是我们实现样式外观的一种方式。
我们来看一下 WPF 和 Avalonia 中，我们会使用这种技巧做怎样的事情。
如你所见，虽然你可以使用 Border 内部的 Child 实现嵌套，但是 Grid 本身也是支持层叠的。
Grid 的层叠在很多时候，可以帮助你实现一些特殊的效果，比如右上角的装饰。
注意右上角的 New!!!!!!!!。

代码请看下面这样。

1. <Grid
2. <Grid
3.     Width="300"
4.     Height="300"
5.     Background="Aqua">
6.     <TextBlock
7. <template>
8.   
9.    
10.   
11. </template>HorizontalAlignment="Center"
12. <template>
13.   
14.    
15.   
16. </template>VerticalAlignment="Center"
17. <template>
18.   
19.    
20.   
21. </template>Text="hello avalonia" />
22. </Grid>Width="300"
23. <Grid
24.     Width="300"
25.     Height="300"
26.     Background="Aqua">
27.     <TextBlock
28. <template>
29.   
30.    
31.   
32. </template>HorizontalAlignment="Center"
33. <template>
34.   
35.    
36.   
37. </template>VerticalAlignment="Center"
38. <template>
39.   
40.    
41.   
42. </template>Text="hello avalonia" />
43. </Grid>Height="300"
44. <Grid
45.     Width="300"
46.     Height="300"
47.     Background="Aqua">
48.     <TextBlock
49. <template>
50.   
51.    
52.   
53. </template>HorizontalAlignment="Center"
54. <template>
55.   
56.    
57.   
58. </template>VerticalAlignment="Center"
59. <template>
60.   
61.    
62.   
63. </template>Text="hello avalonia" />
64. </Grid>Background="Aqua">
65. <Grid
66.     Width="300"
67.     Height="300"
68.     Background="Aqua">
69.     <TextBlock
70. <template>
71.   
72.    
73.   
74. </template>HorizontalAlignment="Center"
75. <template>
76.   
77.    
78.   
79. </template>VerticalAlignment="Center"
80. <template>
81.   
82.    
83.   
84. </template>Text="hello avalonia" />
85. </Grid><TextBlock Text="hello avalonia" />
86. </Grid><Grid
87. <Grid
88.     Width="300"
89.     Height="300"
90.     Background="Aqua">
91.     <TextBlock
92. <template>
93.   
94.    
95.   
96. </template>HorizontalAlignment="Center"
97. <template>
98.   
99.    
100.   
101. </template>VerticalAlignment="Center"
102. <template>
103.   
104.    
105.   
106. </template>Text="hello avalonia" />
107. </Grid>Width="300"
108. <Grid
109.     Width="300"
110.     Height="300"
111.     Background="Aqua">
112.     <TextBlock
113. <template>
114.   
115.    
116.   
117. </template>HorizontalAlignment="Center"
118. <template>
119.   
120.    
121.   
122. </template>VerticalAlignment="Center"
123. <template>
124.   
125.    
126.   
127. </template>Text="hello avalonia" />
128. </Grid>Height="300"
129. <Grid
130.     Width="300"
131.     Height="300"
132.     Background="Aqua">
133.     <TextBlock
134. <template>
135.   
136.    
137.   
138. </template>HorizontalAlignment="Center"
139. <template>
140.   
141.    
142.   
143. </template>VerticalAlignment="Center"
144. <template>
145.   
146.    
147.   
148. </template>Text="hello avalonia" />
149. </Grid>Background="Aqua">
150. <Grid
151.     Width="300"
152.     Height="300"
153.     Background="Aqua">
154.     <TextBlock
155. <template>
156.   
157.    
158.   
159. </template>HorizontalAlignment="Center"
160. <template>
161.   
162.    
163.   
164. </template>VerticalAlignment="Center"
165. <template>
166.   
167.    
168.   
169. </template>Text="hello avalonia" />
170. </Grid><TextBlock Text="hello avalonia" />
171. </Grid><Grid
172. <Grid
173.     Width="300"
174.     Height="300"
175.     Background="Aqua">
176.     <TextBlock
177. <template>
178.   
179.    
180.   
181. </template>HorizontalAlignment="Center"
182. <template>
183.   
184.    
185.   
186. </template>VerticalAlignment="Center"
187. <template>
188.   
189.    
190.   
191. </template>Text="hello avalonia" />
192. </Grid>Width="300"
193. <Grid
194.     Width="300"
195.     Height="300"
196.     Background="Aqua">
197.     <TextBlock
198. <template>
199.   
200.    
201.   
202. </template>HorizontalAlignment="Center"
203. <template>
204.   
205.    
206.   
207. </template>VerticalAlignment="Center"
208. <template>
209.   
210.    
211.   
212. </template>Text="hello avalonia" />
213. </Grid>Height="300"
214. <Grid
215.     Width="300"
216.     Height="300"
217.     Background="Aqua">
218.     <TextBlock
219. <template>
220.   
221.    
222.   
223. </template>HorizontalAlignment="Center"
224. <template>
225.   
226.    
227.   
228. </template>VerticalAlignment="Center"
229. <template>
230.   
231.    
232.   
233. </template>Text="hello avalonia" />
234. </Grid>Background="Aqua">
235. <Grid
236.     Width="300"
237.     Height="300"
238.     Background="Aqua">
239.     <TextBlock
240. <template>
241.   
242.    
243.   
244. </template>HorizontalAlignment="Center"
245. <template>
246.   
247.    
248.   
249. </template>VerticalAlignment="Center"
250. <template>
251.   
252.    
253.   
254. </template>Text="hello avalonia" />
255. </Grid><TextBlock Text="hello avalonia" />
256. </Grid><Grid
257. <Grid
258.     Width="300"
259.     Height="300"
260.     Background="Aqua">
261.     <TextBlock
262. <template>
263.   
264.    
265.   
266. </template>HorizontalAlignment="Center"
267. <template>
268.   
269.    
270.   
271. </template>VerticalAlignment="Center"
272. <template>
273.   
274.    
275.   
276. </template>Text="hello avalonia" />
277. </Grid>Width="300"
278. <Grid
279.     Width="300"
280.     Height="300"
281.     Background="Aqua">
282.     <TextBlock
283. <template>
284.   
285.    
286.   
287. </template>HorizontalAlignment="Center"
288. <template>
289.   
290.    
291.   
292. </template>VerticalAlignment="Center"
293. <template>
294.   
295.    
296.   
297. </template>Text="hello avalonia" />
298. </Grid>Height="300"
299. <Grid
300.     Width="300"
301.     Height="300"
302.     Background="Aqua">
303.     <TextBlock
304. <template>
305.   
306.    
307.   
308. </template>HorizontalAlignment="Center"
309. <template>
310.   
311.    
312.   
313. </template>VerticalAlignment="Center"
314. <template>
315.   
316.    
317.   
318. </template>Text="hello avalonia" />
319. </Grid>Background="Aqua">
320. <Grid
321.     Width="300"
322.     Height="300"
323.     Background="Aqua">
324.     <TextBlock
325. <template>
326.   
327.    
328.   
329. </template>HorizontalAlignment="Center"
330. <template>
331.   
332.    
333.   
334. </template>VerticalAlignment="Center"
335. <template>
336.   
337.    
338.   
339. </template>Text="hello avalonia" />
340. </Grid><TextBlock Text="hello avalonia" />
341. </Grid><Grid
342. <Grid
343.     Width="300"
344.     Height="300"
345.     Background="Aqua">
346.     <TextBlock
347. <template>
348.   
349.    
350.   
351. </template>HorizontalAlignment="Center"
352. <template>
353.   
354.    
355.   
356. </template>VerticalAlignment="Center"
357. <template>
358.   
359.    
360.   
361. </template>Text="hello avalonia" />
362. </Grid>Width="300"
363. <Grid
364.     Width="300"
365.     Height="300"
366.     Background="Aqua">
367.     <TextBlock
368. <template>
369.   
370.    
371.   
372. </template>HorizontalAlignment="Center"
373. <template>
374.   
375.    
376.   
377. </template>VerticalAlignment="Center"
378. <template>
379.   
380.    
381.   
382. </template>Text="hello avalonia" />
383. </Grid>Height="300"
384. <Grid
385.     Width="300"
386.     Height="300"
387.     Background="Aqua">
388.     <TextBlock
389. <template>
390.   
391.    
392.   
393. </template>HorizontalAlignment="Center"
394. <template>
395.   
396.    
397.   
398. </template>VerticalAlignment="Center"
399. <template>
400.   
401.    
402.   
403. </template>Text="hello avalonia" />
404. </Grid>Background="Aqua">
405. <Grid
406.     Width="300"
407.     Height="300"
408.     Background="Aqua">
409.     <TextBlock
410. <template>
411.   
412.    
413.   
414. </template>HorizontalAlignment="Center"
415. <template>
416.   
417.    
418.   
419. </template>VerticalAlignment="Center"
420. <template>
421.   
422.    
423.   
424. </template>Text="hello avalonia" />
425. </Grid><TextBlock Text="hello avalonia" />
426. </Grid><Grid
427. <Grid
428.     Width="300"
429.     Height="300"
430.     Background="Aqua">
431.     <TextBlock
432. <template>
433.   
434.    
435.   
436. </template>HorizontalAlignment="Center"
437. <template>
438.   
439.    
440.   
441. </template>VerticalAlignment="Center"
442. <template>
443.   
444.    
445.   
446. </template>Text="hello avalonia" />
447. </Grid>Width="300"
448. <Grid
449.     Width="300"
450.     Height="300"
451.     Background="Aqua">
452.     <TextBlock
453. <template>
454.   
455.    
456.   
457. </template>HorizontalAlignment="Center"
458. <template>
459.   
460.    
461.   
462. </template>VerticalAlignment="Center"
463. <template>
464.   
465.    
466.   
467. </template>Text="hello avalonia" />
468. </Grid>Height="300"
469. <Grid
470.     Width="300"
471.     Height="300"
472.     Background="Aqua">
473.     <TextBlock
474. <template>
475.   
476.    
477.   
478. </template>HorizontalAlignment="Center"
479. <template>
480.   
481.    
482.   
483. </template>VerticalAlignment="Center"
484. <template>
485.   
486.    
487.   
488. </template>Text="hello avalonia" />
489. </Grid>Background="Aqua">
490. <Grid
491.     Width="300"
492.     Height="300"
493.     Background="Aqua">
494.     <TextBlock
495. <template>
496.   
497.    
498.   
499. </template>HorizontalAlignment="Center"
500. <template>
501.   
502.    
503.   
504. </template>VerticalAlignment="Center"
505. <template>
506.   
507.    
508.   
509. </template>Text="hello avalonia" />
510. </Grid><TextBlock Text="hello avalonia" />
511. </Grid>

复制代码

那么我们可以如何在前端 html 和 css 中实现对应效果呢？
4.1 错误的实现

在前端中，grid 系统内部存在自动分格子的机制，所以，下面的这种效果就是你想当然的做法，作为错误示例，希望你能够看到。
完全和上面不一样吧。

错误的代码是这样的。

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

复制代码

4.2 正确的实现，对与错其实很近

其实你离正确的实现只差几步，下面是你要做的事情：

• 指定网格要划分几格
  
• 为元素指定放置在哪个格子
  

其实在 WPF 和 Avalonia 里面，你也完全可以指定要划分多少格子以及放置在哪里。

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

复制代码

五、结论

WPF 和 Avalonia 的 Grid 完全可以在 html css 上直接迁移，虽然会有一些名字上的差异，但是完全对迁移没有任何影响。
WPF 和 Avalonia 的 Grid 可以说是 UI 的基础逻辑，虽然前端也有 flex 这样更为经典的布局容器，但是我认为，如果你更擅长 WPF 和 Avalonia，使用 Grid 也同样能够做出一样的效果，完全没有使用 flex 的必要。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！