wpf ListBox,item两列不等高。

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

只需要继承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;
        }
    }
}

  

时间: 2024-08-04 06:58:48

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

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

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

如何实现两列等高效果?

先看下面的效果图: 难点: 里面内容不确定,不能定高的同时要让左右两个div的高度保持一致. 解决方案: 利用 display:table 和 display:table-cell.因为display:table之后对margin不敏感,所以如果要调整两者之间的间距,需要用到border-spacing. 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

任意列+左右两列等高布局,并要求有最小高度

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

实现两列等高

首先HTML如下: <!doctype html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> body{ background-color: #eee; } #wrap{ width: 600px; margin: 50px auto; background-color: #eee; overflow: hidden; /*为

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

代码: 效果图: 路人甲:OK?等高了?? 路人丙:不是吧? 路人乙:你这是在逗我? xiaomogg: 效果有点惨,不过这的确是已经做了登高处理的 为什么"登高",看起来却不等高 请留意代码处红框处 padding-bottom:99px; margin-bottom:-99px; 路人甲:这说明不了什么问题!! 路人乙:快进入主题吧 路人丙:...................... xiaomogg: 其实"等高" 真的是不等高 1.如果把padding-b

前端试题-两列等高布局

我们经常会见到一些小微网站上,左边是导航,右边是内容,无论是左边导航高度高还是右边内容高度高,两边始终以最高的来自适应等高显示. 这里的布局主要是把两边元素同时设两个比较大的padding-bottom,然后设置相等值的负的margin-bottom,最后给父元素加一个overflow:hidden. 比如上图有两列,一列高一列低,这里我们假设给左右都加上黄色部分高度padding-bottom:500px,如果不做其他处理的话,左边仍然没有右边高,分别加上不同背景色,左边和右边还是有差值,左边

常用布局的实现(两列布局、三列适应布局,两列等高适应布局等)

两列布局:左侧定宽,右侧自适应方法一:利用float和负外边距 <style> * { margin: 0; padding: 0; } .main,.sitebar { font: bolder 20px/300px; } .main { width: 100%; float: left; } .main .content { margin-left: 200px; background-color: red; } .sitebar { width: 200px; float: left;

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

布局两列div等高方法

一.左右布局,左侧div绝对定位,外div相对定位 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0;paddi