WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面
我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.
1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Uniform,设置Columns,再添加几个ItemsControl.
2.添加Item的时候,判断每个ItemsControl的实际高度,把子项添加到最小的那个ItemsControl,这样避免了某一列拉得很长.
3.再做一层封装,就变成了一个支持Binding的WaterfallControl.
这里上几段控件的源码,供参考:
1.WaterfallControl.cs
33this.itemsContorls=new List
34}
35
36void WaterfallControl_Loaded(object sender,RoutedEventArgs e) 37{
38this.InitPanel();
39}
40
41private void InitPanel()
42{
43if(!this.IsLoaded)
44{
45return;
46}
47
48grdRoot.Children.Clear();
49itemsContorls.Clear();
50for(var i=0;i 51{ 52var ic=new ItemsControl(); 53ic.ItemTemplate=this.ItemTemplate; 54ic.VerticalAlignment= System.Windows.VerticalAlignment.Top; 55grdRoot.Children.Add(ic); 56itemsContorls.Add(ic); 57} 58 59if(this.ItemsSource!=null) 60{ 61var enumerator=this.ItemsSource.GetEnumerator(); 62while(enumerator.MoveNext()) 63{ 64this.AddChild(enumerator.Current); 65} 66} 67} 68 69public override void OnApplyTemplate() 70{ 71base.OnApplyTemplate(); 72grdRoot=(UniformGrid)this.GetTemplateChild("grdRoot"); 73} 74 75protected override void AddChild(object value) 103 2.WaterfallControl的样式 3.调用 WaterfallControl继承自ItemsControl,所以和ItemsControl的使用没有区别,只需要额外指定一个Columns即可. 可能遇到的问题: 1.遇到图片不能直接计算高度,可能导致某列很长.可以用扩展属性给图片指定一个初始占位高度. 2.遇到界面大小变化,列数是不是应该动态变化,这个要实现也简单,监视下 Window.SizeChanged,然后改变Columns就行了. 3.我直接把ScrollViewer放到WaterfallControl的模板里了,建议抽出来,监视下滚动事件,实现滚动到底加载数据. 4.不知道是否有更简单明了的方法. WPF制作的小型笔记本-仿有道云笔记 楼主所在的公司不允许下载外部资源,不允许私自安装应用程序,平时记录东西都是用记事本,时间久了很难找到以前记的东西.平时在家都用有道笔记,因此就模仿着做了一个,先看下实际运行图片: 1.初始化的时候 2.添加了些笔记 3.添加笔记本窗口 4.改了模板,做的一个还算好看的菜单 5.日记列表可以选择不同的视图,比如我改成了简单列表视图 6.模仿云笔记做的历史版本功能,只能看,还没做还原和对比功能 7.日记可以导出成不同格式,这个东西真心没用 8.顶部也有个菜单 谈下这个小东西: 1.程序采用WPF+MVVM实现,修改了大部分控件的Template,以达到高仿的目的.同时,也得感谢有道在安装目录下有一套图片资源,可以原封不动的搬过来美化界面. 2.实现了笔记本的增删改,笔记的增删改.笔记的查询只实现了关键字查询. 3.自己做了一些有意思的控件,比如一个LoadingButton,在Loading的时候会转个圈圈,后台处理完毕后隐藏.还做了一个文本编辑框,其实有道的编辑框相当漂亮,但是没有放出按钮图片,我只有网上淘了些山寨的图片,而且有些功能就没去实现,比如添加表格添加超链接什么的,我自己都不知道这个能干嘛用. 4.采用SQLite数据库把所有数据保存到了本地,我自己也有虚拟主机,本来想顺便公布一套WEB API实现真正的云笔记,但是现在的客户端设计怕是要经过大改才能实现,这个想到就头痛. 5.历史版本功能本来是可以继续做下去的,比如还原到某一版本这个功能就很好做.但是有道有个对比不同文本的功能,这个就像源码管理工具那样,我不知道该怎么整了. 6.本来想实现插入图片的,但是有两个问题,第一就是我们公司没有截图程序,我用不上,第二就是这里的图片只能保存到RTF,加载时会写入内存,数据量大或者图片大了会影响性能. 7.本来也想实现插入文件的,这个对我很有用,不过还没想好UI怎么画,一直就没做. 8.编辑框输入很卡,还没去研究什么原因. 9.微软的个人版TFS相当不错,我在不能用U盘的情况下,家里和办公室都可以开发. 最后,实在是觉得很遗憾,一个项目我可以兴冲冲的很快完成70%的代码,但是剩下的30%就实在太折磨人了.现在一打开VS就犯困,实在是没法把剩下的东西全部实现完.这个笔记目前在公司运行良好,我需要的功能几乎都有,也就不打算再继续下去了.在此放出源代码,供有兴趣的同学研究下控件样式,MVVM,Prism,依赖注入等WPF里面常见的问题.