windows平台上动态生成控件的一些小技巧

啊说起来真的好久木有写Blog了,其实也不是忙就是因为懒。

前几天经人介绍,认识了一个在写windows platform的学妹(果然程序员 ,一开始还挺开心,在聊了几句之后发现其实就来参加一个比赛… 好吧不过这也没什么,学妹说之后会多问我问题的,然后昨天果然就问了一个很基础的问题。她问我如何动态展示图片,那我就有好几种思路了。

  1. 就仅仅是一个Image控件,只不过通过Task.Delay()来造成动态的效果。

  2. Image不断的出现,每个Image的Margin都不同来达成卡片式的效果。

啊那这两种都很简单啊。然后给了示意图,是想要第二种效果,稍微解释一下发现听不懂之后,写了一个demo。

View:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>

<Grid x:Name="disGrid" Grid.Row="0"/>

<Button Grid.Row="1"
Height="40" Width="120" Content="Show"
BorderThickness="0" Background="LightBlue" Foreground="White"
Click="ShowImageClick">

</Button>
</Grid>

Code bebind:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private async void ShowImageClick(object sender, RoutedEventArgs e)
{

for (; i < 5; i++)
{
disGrid.Children.Add(OnceImage("ImagePath", i*10,i*10));
await Task.Delay(500);
}
}

public Image OnceImage(string url, double widthBlack, double heightBlack)
{

Image _image = new Image()
{
Source = new BitmapImage(new Uri(@url)),
Height = 100,
HorizontalAlignment = HorizontalAlignment.Left,
VerticalAlignment = VerticalAlignment.Top,
Margin = new Thickness(widthBlack, heightBlack, widthBlack, heightBlack)
};
return _image;
}

效果图:
demo

代码是很直观的,不过由于在windows平台的开发中,xaml实在是太强大了,因此很多人并不会考虑到用code来完成view的渲染。当然了,在android的开发中,这是一件很常见的事情。见过了太多android的程序员写页面时候的尴尬场面了。

但其实,用code-behind来生成页面,在某些场景下是非常灵活的。

  • 举例1、在之前的一个项目《排序的动态演示》中,会有动态生成图表的内容,在尝试各种Chart插件都需收费之后,我决定自己写图表的样式。因为是直方图,所以定义好Column之后实际上是很好进行Rec的动态生成的,而且效率也会比较好。当然在这里也可以尝试利用binding的方式,通过ListView来达到这种效果,不过为了当时的便捷我选择了这种方法。最后的效果还不错。

  • 举例2、若是页面跟随数据而变化,这样的情况是一定会动态生成控件的。比如说以前遇到的一个demo,公交车动态查询。这里面的地图路线,每一个都不一样,而且有的站点多,有的站点少,这时候就能体现出code的灵活性,不过需要一些小小的计算来确定margin等属性。

不过之前既然说了xaml是强大的,那么对于这些也其实是有办法的。
重复性静态绘制小技巧也有邹老师团队总结过了:

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

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

如果在code绘制页面的时候遇上什么问题,可站内交流 :)