WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面
我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.
1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Uniform,设置Columns,再添加几个ItemsControl.
2.添加Item的时候,判断每个ItemsControl的实际高度,把子项添加到最小的那个ItemsControl,这样避免了某一列拉得很长.
3.再做一层封装,就变成了一个支持Binding的WaterfallControl.
这里上几段控件的源码,供参考:
1.WaterfallControl.cs
[TemplatePart(Name = "grdRoot", Type = typeof(UniformGrid))]
public class WaterfallControl : ItemsControl
{
private UniformGrid grdRoot; private List<ItemsControl> itemsContorls; public int Columns
{
get { return (int)GetValue(ColumnsProperty); }
set { SetValue(ColumnsProperty, value); }
} // Using a DependencyProperty as the backing store for Columns. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ColumnsProperty =
DependencyProperty.Register("Columns", typeof(int), typeof(WaterfallControl), new PropertyMetadata(, OnColumnsChanged)); private static void OnColumnsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
int columns = (int)e.NewValue;
if (columns < )
{
throw new ArgumentOutOfRangeException("Columns");
}
var control = sender as WaterfallControl;
control.Columns = columns;
control.InitPanel();
} public WaterfallControl()
{
this.Loaded += WaterfallControl_Loaded;
this.itemsContorls = new List<ItemsControl>();
} void WaterfallControl_Loaded(object sender, RoutedEventArgs e)
{
this.InitPanel();
} private void InitPanel()
{
if (!this.IsLoaded)
{
return;
} grdRoot.Children.Clear();
itemsContorls.Clear();
for (var i = ; i < this.Columns; i++)
{
var ic = new ItemsControl();
ic.ItemTemplate = this.ItemTemplate;
ic.VerticalAlignment = System.Windows.VerticalAlignment.Top;
grdRoot.Children.Add(ic);
itemsContorls.Add(ic);
} if (this.ItemsSource != null)
{
var enumerator = this.ItemsSource.GetEnumerator();
while (enumerator.MoveNext())
{
this.AddChild(enumerator.Current);
}
}
} public override void OnApplyTemplate()
{
base.OnApplyTemplate();
grdRoot = (UniformGrid)this.GetTemplateChild("grdRoot");
} protected override void AddChild(object value)
{
var ic = itemsContorls.OrderBy(t => t.ActualHeight).FirstOrDefault();
ic.Items.Add(value);
ic.UpdateLayout();
} protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
if (e.Action == NotifyCollectionChangedAction.Add || e.Action == NotifyCollectionChangedAction.Remove)
{
var enumerator = e.NewItems.GetEnumerator();
while (enumerator.MoveNext())
{
if (e.Action == NotifyCollectionChangedAction.Add)
{
this.AddChild(enumerator.Current);
}
else
{
foreach (var ic in this.itemsContorls)
{
ic.Items.Remove(enumerator.Current);
}
}
}
}
}
}
2.WaterfallControl的样式
<Style TargetType="controls:WaterfallControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:WaterfallControl">
<ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
<UniformGrid Name="grdRoot" Columns="{TemplateBinding Columns}"> </UniformGrid>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
3.调用
WaterfallControl继承自ItemsControl,所以和ItemsControl的使用没有区别,只需要额外指定一个Columns即可.
可能遇到的问题:
1.遇到图片不能直接计算高度,可能导致某列很长.可以用扩展属性给图片指定一个初始占位高度.
2.遇到界面大小变化,列数是不是应该动态变化,这个要实现也简单,监视下Window.SizeChanged,然后改变Columns就行了.
3.我直接把ScrollViewer放到WaterfallControl的模板里了,建议抽出来,监视下滚动事件,实现滚动到底加载数据.
4.不知道是否有更简单明了的方法.
WPF下制作的简单瀑布流效果的更多相关文章
- thinphp下拉获取更多瀑布流效果
html页面 <body> <script type="text/javascript" src="jquery.min.js">< ...
- wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性、网格、瀑布流效果演示
实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性.网格.瀑布流效果演示 效果预览 实例APP 小米应用商店 使用方法 build.gradle文件 dependenc ...
- RecyclerView实现瀑布流效果(图文详解+源码奉送)
最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- Android UI 之WaterFall瀑布流效果
所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容. 语言描述比较抽象,具体效果看下面的截图: ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
随机推荐
- jQuery简单入门(四)
4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...
- React Native初试:Windows下Andriod环境搭建
最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看: React Native为F ...
- Linux磁盘管理之元数据、文件和目录、链接文件03
一.存储设备分区简述 文件系统最终目的是把大量数据有组织的放入持久性的存储设备,如硬盘.硬盘存储能力具有持久性,不会因为断电而消失,存储量大,但读取速度慢.操作系统读取硬盘的时候,不会一个一个扇区读取 ...
- C++ 笔记(一) —— 尽量以 const、enum、inline 替换 #define
ilocker:关注 Android 安全(新手) QQ: 2597294287 #define ASPECT_RATIO 1.653 记号 ASPECT_RATIO 不会进入 symbol tabl ...
- 如何在Chrome39添加360抢票王插件
前言: 版本:Chrome 39.0.2171.95 m CRX文件来源:ext.se.360.cn 本文地址:http://www.cnblogs.com/go2bed/p/4206714.html ...
- 关于response.getWriter()写回数据的实际发生时间点
只能说自己平时太粗心了,一些细节问题虽然几次路过,都没有注意过,也没有好好想过. 同事负责的一段微信模块的小逻辑,为了防止微信服务器认为没有接收到请求而重发消息,所以再收到微信服务器发回的消息后,马上 ...
- linux /proc/sys/fs/file-nr /proc/sys/fs/file-max /etc/security/limits.conf 三者的关联
ulimit -n 对应 /etc/security/limits.conf 文件设置 问题: Can’t open so many files 对于linux运维的同学们,相信都遇到过这个问题. 在 ...
- Shell命令行操作
1.1 shell提示符 [me@linuxbox ~]$ 如果最后一个字符是"#",表示当前终端会话有超级用户权限.使用root用户登录或者使用能提供超级用户权限的终端能获得该权 ...
- java函数参数默认值
java函数参数默认值 今天,需要设定java函数参数的默认值,发现按照其它语言中的方法行不通 java中似乎只能通过函数的重载来实现 函数参数默认代码
- 面向对象——is和as运算符、泛型集合 List<T>
二:is和as运算符: (1) is运算符 is 运算符用于检查对象是否与给定类型兼容.如果兼容返回true,否则返回false; 一般用于查看某个类是否实现了某个接口,或者是不是某个类的子类; 例如 ...