WPF下制作的简单瀑布流效果.docx

1、WPF下制作的简单瀑布流效果最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Uniform,设置Columns,再添加几个ItemsControl.2.添加Item的时候,判断每个ItemsControl的实际高度,把子项添加到最小的那个ItemsControl,这样避免了某一列拉得很长.3.再做一层封装,就变成了一个支持Binding的Waterfall

2、Control.这里上几段控件的源码,供参考:1.WaterfallControl.cs 1 TemplatePart(Name = grdRoot, Type = typeof(UniformGrid) 2 public class WaterfallControl : ItemsControl 3 4 private UniformGrid grdRoot; 5 6 private List itemsContorls; 7 8 public int Columns 9 10 get return (int)GetValue(ColumnsProperty); 11 set SetValu

3、e(ColumnsProperty, value); 12 13 14 / Using a DependencyProperty as the backing store for Columns. This enables animation, styling, binding, etc. 15 public static readonly DependencyProperty ColumnsProperty = 16 DependencyProperty.Register(Columns, typeof(int), typeof(WaterfallControl), new Property

4、Metadata(3, OnColumnsChanged); 17 18 private static void OnColumnsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) 19 20 int columns = (int)e.NewValue; 21 if (columns 1) 22 23 throw new ArgumentOutOfRangeException(Columns); 24 25 var control = sender as WaterfallControl; 26 con

5、trol.Columns = columns; 27 control.InitPanel(); 28 29 30 public WaterfallControl() 31 32 this.Loaded += WaterfallControl_Loaded; 33 this.itemsContorls = new List(); 34 35 36 void WaterfallControl_Loaded(object sender, RoutedEventArgs e) 37 38 this.InitPanel(); 39 40 41 private void InitPanel() 42 43

6、 if (!this.IsLoaded) 44 45 return; 46 47 48 grdRoot.Children.Clear(); 49 itemsContorls.Clear(); 50 for (var i = 0; i t.ActualHeight).FirstOrDefault(); 78 ic.Items.Add(value); 79 ic.UpdateLayout(); 80 81 82 protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedE

7、ventArgs e) 83 84 if (e.Action = NotifyCollectionChangedAction.Add | e.Action = NotifyCollectionChangedAction.Remove) 85 86 var enumerator = e.NewItems.GetEnumerator(); 87 while (enumerator.MoveNext() 88 89 if (e.Action = NotifyCollectionChangedAction.Add) 90 91 this.AddChild(enumerator.Current); 92

8、 93 else 94 95 foreach (var ic in this.itemsContorls) 96 97 ic.Items.Remove(enumerator.Current); 98 99 100 101 102 103 View Code 2.WaterfallControl的样式 View Code 3.调用WaterfallControl继承自ItemsControl,所以和ItemsControl的使用没有区别,只需要额外指定一个Columns即可.可能遇到的问题:1.遇到图片不能直接计算高度,可能导致某列很长.可以用扩展属性给图片指定一个初始占位高度.2.遇到界面大小

9、变化,列数是不是应该动态变化,这个要实现也简单,监视下Window.SizeChanged,然后改变Columns就行了.3.我直接把ScrollViewer放到WaterfallControl的模板里了,建议抽出来,监视下滚动事件,实现滚动到底加载数据.4.不知道是否有更简单明了的方法.WPF制作的小型笔记本-仿有道云笔记楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一个, 先看下实际运行图片:1. 初始化的时候2.添加了些笔记3. 添加笔记本窗口4.改了模板,做的一个还算好看的

10、菜单5.日记列表可以选择不同的视图, 比如我改成了简单列表视图6.模仿云笔记做的历史版本功能,只能看,还没做还原和对比功能7.日记可以导出成不同格式,这个东西真心没用8.顶部也有个菜单谈下这个小东西:1. 程序采用WPF+MVVM实现, 修改了大部分控件的Template, 以达到高仿的目的. 同时, 也得感谢有道在安装目录下有一套图片资源,可以原封不动的搬过来美化界面.2. 实现了笔记本的增删改, 笔记的增删改. 笔记的查询只实现了关键字查询.3. 自己做了一些有意思的控件, 比如一个LoadingButton, 在Loading的时候会转个圈圈, 后台处理完毕后隐藏. 还做了一个文本编辑框

11、, 其实有道的编辑框相当漂亮,但是没有放出按钮图片,我只有网上淘了些山寨的图片, 而且有些功能就没去实现,比如添加表格添加超链接什么的,我自己都不知道这个能干嘛用.4.采用SQLite数据库把所有数据保存到了本地, 我自己也有虚拟主机, 本来想顺便公布一套WEB API实现真正的云笔记, 但是现在的客户端设计怕是要经过大改才能实现, 这个想到就头痛.5. 历史版本功能本来是可以继续做下去的, 比如还原到某一版本这个功能就很好做. 但是有道有个对比不同文本的功能,这个就像源码管理工具那样,我不知道该怎么整了.6. 本来想实现插入图片的, 但是有两个问题, 第一就是我们公司没有截图程序, 我用不上

12、, 第二就是这里的图片只能保存到RTF, 加载时会写入内存, 数据量大或者图片大了会影响性能.7. 本来也想实现插入文件的, 这个对我很有用, 不过还没想好UI怎么画, 一直就没做.8. 编辑框输入很卡, 还没去研究什么原因.9. 微软的个人版TFS相当不错, 我在不能用U盘的情况下, 家里和办公室都可以开发.最后, 实在是觉得很遗憾,一个项目我可以兴冲冲的很快完成70%的代码,但是剩下的30%就实在太折磨人了. 现在一打开VS就犯困, 实在是没法把剩下的东西全部实现完. 这个笔记目前在公司运行良好, 我需要的功能几乎都有, 也就不打算再继续下去了. 在此放出源代码, 供有兴趣的同学研究下控件样式, MVVM, Prism, 依赖注入等WPF里面常见的问题.