Win10 UWP开发中的重复性静态UI绘制小技巧 2

小技巧1 地址：

介绍

我们在上一篇博文中展示了通过Shape.Stroke族属性实现静态重复性UI绘制，使得UWP界面的实现变得稍微灵活一些了。

但这一技巧还是有不少局限的，毕竟折腾StrokeDashArray属性看上去并不是那么直观和适用（还存在用扇形欺骗观众这样的“问题”啦）。

这一篇博文我们将为大家介绍一种更为适用，同时也更为灵活和强大的重复性UI绘制技巧。

 

ItemsControl.ItemsSource和ItemsControl.ItemTemplate组合技

ItemsControl是一个很常见的控件，虽然它经常是以ListView、ListBox等衍生类的形式出现，想必大家也是经常使用它们。

而ItemsControl本身，则提供了最基本的“作为对象集合”的功能。

而其中ItemsControl.ItemsSource和ItemsControl.ItemTemplate两个属性最为重要。前者将通过指定策略预处理的数据赋予控件，后者将源数据映射为UI元素。

灵活运用它们，就能方便的做出精准而又快速的设计。

 

比如：

 

这段XAML也是很有趣，其中的ItemsSource仅仅是提供了一个IEnumerable<int>，也就是斐波那契数列，

而我们控制Canvas.Left画出了一系列标注线，它们距左端的位移分别是斐波那契数列的值！

或许在一些数理教学的App里能用得上呢……

 

另外

Source类同样可以暴露出使用形如FoobarItem的IEnumerable<T>，就可以在FoobarItem中设置更多更丰富的属性，

然后在ItemsControl.ItemTemplate（DataTemplate）进行Binding，辅以Style和Converter，实现更加丰富的效果。

 

这样做有什么好处？

这两篇博文为大家介绍了两种绘制重复性UI的办法，那我们掌握这些办法有什么意义，或者说我们能获得什么好处呢？

 

解耦。

将这些与程序逻辑完全无关的UI设定，完全地与功能逻辑剥离开。即使需要写一些代码，也和功能逻辑完全没有关联。

让code behind清爽，更加专注于功能的实现，而UI的变换仍旧是动态的。

 

精确。

由于使用XAML和原始数据生成UI，所以UI元素的属性和位移、旋转等变换是完全精准的，免去手工校准之虞。

并且配合CacheMode和ViewBox，使得UI在适配和渲染时表现清晰不失真，兼顾性能。

 

同时也提供了新的UI元素控制方式。

比如例子中的圆形进度条的实现。我们可以在后台代码中更新StrokeDashArray来展示进度。

又比如我们设定好了ItemsControl的数据展示策略，只需要再设定数据源，就能轻易地将其展示。

 

 

希望这两篇博客能够抛砖引玉，唤来更多创意和技巧，为大家在UWP中的开发提供方便！;)

)

相关阅读