业务有这样的需求,类似瀑布流。内容两列不等高展示。

只需要继承panel,重写MeasureOverride和ArrangeOverride方法就行了。

很简单,内容都在代码里。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls; namespace XXXXXX
{
public class TwoColumnPanel : Panel
{
/// <summary>
/// 先测量需要多大尺寸,做个申报准备
/// </summary>
/// <param name="constraint">限定的尺寸,比如,规定了width和height</param>
/// <returns></returns>
protected override Size MeasureOverride(Size constraint)
{
//定义预期的宽度和高度
double height = 0, height1 = 0, height2 = 0, width = 0;
UIElement element;
if (Children.Count > 0)
{
element = Children[0];
width = element.DesiredSize.Width*2;
}
//遍历每个元素,计算所需的总尺寸
for (int i = 0; i < Children.Count; i++)
{
element = Children[i];
//按照限定的尺寸测量一下自己,拿镜子找着自己
element.Measure(constraint);
if (i % 2 == 0)
{
height1 += element.DesiredSize.Height;
}
else
{
height2 += element.DesiredSize.Height;
}
}
height = height1 > height2 ? height1 : height2; //申报,我需要这个尺寸
return new Size(width, height);
} /// <summary>
/// 排列每个元素
/// </summary>
/// <param name="arrangeBounds">测量的尺寸</param>
/// <returns></returns>
protected override Size ArrangeOverride(Size arrangeBounds)
{
double currentX2 = 0,currentY1 = 0,currentY2 = 0;
UIElement element; if (Children.Count > 0)
{
element = Children[0];
currentX2 = element.DesiredSize.Width;
} for (int i = 0; i < Children.Count; i++)
{
element = Children[i];
//排列每个元素
if (i % 2 == 0)
{
Children[i].Arrange(new Rect(0, currentY1, element.DesiredSize.Width, element.DesiredSize.Height));
currentY1 += element.DesiredSize.Height;
}
else
{
Children[i].Arrange(new Rect(currentX2, currentY2, element.DesiredSize.Width, element.DesiredSize.Height));
currentY2 += element.DesiredSize.Height;
} }
return arrangeBounds;
}
}
}

  

wpf ListBox,item两列不等高。的更多相关文章

  1. 多种方法实现div两列等高(收集整理)

    HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...

  2. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  3. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  4. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  5. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  6. 利用jQuery进行三行两列等高布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 两列布局,读《css那些事儿》

    两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> ...

  9. flex 垂直居中、两列对齐、自适应宽

    flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...

随机推荐

  1. IOS - 响应者链条

    简单来说就是:一级一级的找到响应的视图,如果没有就传给UIWindow实例和UIApplication实例,要是他们也处理不了,就丢弃这次事件... 对于IOS设备用户来说,他们操作设备的方式主要有三 ...

  2. yii和php的一些细节

    yii   index.php ini_set("display_errors", 1); iconv这个函数不能直接用 需要检测!!! function gb2312_utf8( ...

  3. osg设置相机参数,包括初始位置

    严重注意!!!以下设置必须在viewer.realize();之后,否则不起作用!!!! 设置相机的位置,可以通过CameraManipulator(一般是osgGA::TrackballManipu ...

  4. xmpp xml基本语义

    基本语义 9.2.1 消息语义 <message/>节种类可被看作“推”机制,一个实体推信息给其它实体,与 EMAIL 系统中发生的通信类似.所有消息节应该拥有‘to’ 属性,指定有意的消 ...

  5. A Horrible Poem(bzoj 2795)

    Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串A的循环节,那么A可以由B重复若干次得到. Input 第一行一个正整 ...

  6. myeclipse 8.5 注册码

    刚才启动突然发现MyEclipse原来是收费的...汗一把,到弹出注册框我才知道.....老天啊我活的该有多窝囊.. 弹框很烦人,我一个穷书生既想继续学习又囊中羞涩无力购买,只好用盗版了(找个理由辩解 ...

  7. javascript - 事件详解

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  8. 微信支付 - V3支付问题

    参考资料:http://www.2cto.com/weixin/201506/407690.html   1.微信公众号支付出错: 当前页面的URL未注册: get_brand_wcpay_reque ...

  9. WebService - 怎样提高WebService性能 大数据量网络传输处理

    直接返回DataSet对象 返回DataSet对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用Binary序列化后的字节数组 返回DataSetSurrogate对象用 ...

  10. sublime text 2 安装emmet插件

    一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...