WPF下制作的简单瀑布流效果.docx
《WPF下制作的简单瀑布流效果.docx》由会员分享，可在线阅读，更多相关《WPF下制作的简单瀑布流效果.docx（11页珍藏版）》请在冰豆网上搜索。
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面
我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.
1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Uniform,设置Columns,再添加几个ItemsControl.
2.添加Item的时候,判断每个ItemsControl的实际高度,把子项添加到最小的那个ItemsControl,这样避免了某一列拉得很长.
3.再做一层封装,就变成了一个支持Binding的WaterfallControl.
这里上几段控件的源码,供参考:
1.WaterfallControl.cs
1[TemplatePart（Name="grdRoot",Type=typeof（UniformGrid））]
2publicclassWaterfallControl:
ItemsControl
3{
4privateUniformGridgrdRoot;
5
6privateListitemsContorls;
7
8publicintColumns
9{
10get{return（int）GetValue（ColumnsProperty）;}
11set{SetValue（ColumnsProperty,value）;}
12}
13
14//UsingaDependencyPropertyasthebackingstoreforColumns.Thisenablesanimation,styling,binding,etc...
15publicstaticreadonlyDependencyPropertyColumnsProperty=
16DependencyProperty.Register（"Columns",typeof（int）,typeof（WaterfallControl）,newPropertyMetadata（3,OnColumnsChanged））;
17
18privatestaticvoidOnColumnsChanged（DependencyObjectsender,DependencyPropertyChangedEventArgse）
19{
20intcolumns=（int）e.NewValue;
21if（columns<1）
22{
23thrownewArgumentOutOfRangeException（"Columns"）;
24}
25varcontrol=senderasWaterfallControl;
26control.Columns=columns;
27control.InitPanel（）;
28}
29
30publicWaterfallControl（）
31{
32this.Loaded+=WaterfallControl_Loaded;
33this.itemsContorls=newList（）;
34}
35
36voidWaterfallControl_Loaded（objectsender,RoutedEventArgse）
37{
38this.InitPanel（）;
39}
40
41privatevoidInitPanel（）
42{
43if（!
this.IsLoaded）
44{
45return;
46}
47
48grdRoot.Children.Clear（）;
49itemsContorls.Clear（）;
50for（vari=0;i51{
52varic=newItemsControl（）;
53ic.ItemTemplate=this.ItemTemplate;
54ic.VerticalAlignment=System.Windows.VerticalAlignment.Top;
55grdRoot.Children.Add（ic）;
56itemsContorls.Add（ic）;
57}
58
59if（this.ItemsSource!
=null）
60{
61varenumerator=this.ItemsSource.GetEnumerator（）;
62while（enumerator.MoveNext（））
63{
64this.AddChild（enumerator.Current）;
65}
66}
67}
68
69publicoverridevoidOnApplyTemplate（）
70{
71base.OnApplyTemplate（）;
72grdRoot=（UniformGrid）this.GetTemplateChild（"grdRoot"）;
73}
74
75protectedoverridevoidAddChild（objectvalue）
76{
77varic=itemsContorls.OrderBy（t=>t.ActualHeight）.FirstOrDefault（）;
78ic.Items.Add（value）;
79ic.UpdateLayout（）;
80}
81
82protectedoverridevoidOnItemsChanged（System.Collections.Specialized.NotifyCollectionChangedEventArgse）
83{
84if（e.Action==NotifyCollectionChangedAction.Add||e.Action==NotifyCollectionChangedAction.Remove）
85{
86varenumerator=e.NewItems.GetEnumerator（）;
87while（enumerator.MoveNext（））
88{
89if（e.Action==NotifyCollectionChangedAction.Add）
90{
91this.AddChild（enumerator.Current）;
92}
93else
94{
95foreach（varicinthis.itemsContorls）
96{
97ic.Items.Remove（enumerator.Current）;
98}
99}
100}
101}
102}
103}
ViewCode
2.WaterfallControl的样式
WaterfallControl">
WaterfallControl">
ViewCode
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数据库把所有数据保存到了本地,我自己也有虚拟主机,本来想顺便公布一套WEBAPI实现真正的云笔记,但是现在的客户端设计怕是要经过大改才能实现,这个想到就头痛.
5.历史版本功能本来是可以继续做下去的,比如还原到某一版本这个功能就很好做.但是有道有个对比不同文本的功能,这个就像源码管理工具那样,我不知道该怎么整了.
6.本来想实现插入图片的,但是有两个问题,第一就是我们公司没有截图程序,我用不上,第二就是这里的图片只能保存到RTF,加载时会写入内存,数据量大或者图片大了会影响性能.
7.本来也想实现插入文件的,这个对我很有用,不过还没想好UI怎么画,一直就没做.
8.编辑框输入很卡,还没去研究什么原因.
9.微软的个人版TFS相当不错,我在不能用U盘的情况下,家里和办公室都可以开发.
最后,实在是觉得很遗憾,一个项目我可以兴冲冲的很快完成70%的代码,但是剩下的30%就实在太折磨人了.现在一打开VS就犯困,实在是没法把剩下的东西全部实现完.这个笔记目前在公司运行良好,我需要的功能几乎都有,也就不打算再继续下去了.在此放出源代码,供有兴趣的同学研究下控件样式,MVVM,Prism,依赖注入等WPF里面常见的问题.
升级会员 