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

本文介绍了如何在WPF中实现瀑布流效果,通过顺序填充子项并判断最小高度来布局,创建了一个名为WaterfallControl的控件,支持Binding。文章提供了关键代码示例,并列举了可能遇到的问题及解决方案,如图片高度计算、界面尺寸变化和滚动加载数据等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文: 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))]
  2     public class WaterfallControl : ItemsControl
  3     {
  4         private UniformGrid grdRoot;
  5 
  6         private List<ItemsControl> itemsContorls;
  7 
  8         public int Columns
  9         {
 10             get { return (int)GetValue(ColumnsProperty); }
 11             set { SetValue(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), 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值