热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

自定义面板优化统计标题卡

上篇文章WPF实现高仿统计标题卡中,实现了依据自己喜欢的统计卡片组件样式,实现过程中,发现,现有的默认自带面板、`UniformGridStackPanelDockPanelWra

上篇文章WPF实现高仿统计标题卡中,实现了依据自己喜欢的统计卡片组件样式,实现过程中,发现,现有的WPF默认自带面板GridUniformGridStackPanelDockPanelWrapPanel以及Canvas等暂时没有满足条件的面板容器,接下来就是一个简单的容器面板我称之为BootstrapPanel,参考容器面板UniformGridWrapPanel两个容器的功能,项目仍然为上篇文章使用的项目为例

技术图片

基础面板分析

UniformGrid

提供功能

该容器面板能够依据内部的可视子级数量,在未设置RowsColumnsFirstColumn等属性的条件下,进行自动填充均分容器面板的各区域


                
                    
                        
                    
                

技术图片

问题

当随着容器面板大小缩放时,容器内的布局并不能够根据容器大小做出相应调整(换行减列)

WrapPanel

提供功能

能够根据容器的大小,合理为容器内的各个可见元素做自适应处理(加列减行或减列加行)


                
                    
                        
                    
                

技术图片

问题

虽然能够自动处理容器中元素的位置,但过于容器内的尺寸过于依赖已定尺寸,变换过程中,显示过程中,元素的尺寸无法自动填充容器的富余空间

思路分析

实际使用的过程中,我需要使用的容器需求归纳是如下几点:

  • 能够实现容器内元素均分(UniformGrid具备)
  • 能够在容器变化时,自动处理容器中的元素位置变化(WrapPanel具备)
  • 能够自动填充富余空间(UniformGrid具备)

编辑与实现

于是,开启源码的浏览过程,自定义项目,结构如下:

技术图片

测量容器、元素尺寸

此处忽略,菜鸟博主详细的探索细节,基本方向就是,通过看源码,重新构建上述两个容器的源码,通过源码最终决定以UniformGrid作为基础参照类,将动态设置元素布局的ArrangeOverride函数保留,能够保留元素动态适应容器布局,ps,可以直接挪用

protected override Size ArrangeOverride(Size arrangeSize)
        {
            Rect finalRect = new Rect(0.0, 0.0, arrangeSize.Width / (double)_columns, arrangeSize.Height / (double)_rows);
            double width = finalRect.Width;
            double num = arrangeSize.Width - 1.0;
            foreach (UIElement internalChild in base.InternalChildren)
            {
                internalChild.Arrange(finalRect);
                if (internalChild.Visibility != Visibility.Collapsed)
                {
                    finalRect.X += width;
                    if (finalRect.X >= num)
                    {
                        finalRect.Y += finalRect.Height;
                        finalRect.X = 0.0;
                    }
                }
            }
            return arrangeSize;
}

处理容器行列

主要需要考虑的是在测量也就是MeasureOverride函数对容器尺寸变更时,对行列的动态计算,我采用的方式,对列作处理,在不同条件下,显示不同的数据列,改变原有UniformGrid的固定行列方式,于是改动其中的UpdateComputedValues函数,将固定均分改为自定义实现逻辑,同时为了能够控制均分后,统一控制每个元素中的外边距,添加了一个依赖属性Gutter

Gutter依赖属性

        /// 
        /// 元素之间的间距
        /// 
        public Thickness Gutter
        {
            get { return (Thickness)GetValue(GutterProperty); }
            set { SetValue(GutterProperty, value); }
        }
        public static readonly DependencyProperty GutterProperty =
            DependencyProperty.Register("Gutter", typeof(Thickness), typeof(BootstrapPanel), new PropertyMetadata(new Thickness(0)));

UpdateComputedValues函数

        protected override Size MeasureOverride(Size constraint)
        {
            //自动获取行列数量
            UpdateComputedValues(constraint);

            //设置容器测量尺寸
            Size availableSize = new Size(constraint.Width / (double)_columns, constraint.Height / (double)_rows);
            double num = 0.0;
            double num2 = 0.0;
            int i = 0;
            for (int count = base.InternalChildren.Count; i 
        /// 自动设置行列规则
        /// 
        private void UpdateComputedValues(Size constraint)
        {
            //通过当前容器宽度以及默认最小宽度
            //获取到实际默认容器的列数
            if (DoubleUtil.IsNaN(ItemMinWidth))
            {
                throw new ArgumentNullException("请设置ItemMinWidth的目标值");
            }
            #region 统计容器中可见元素数量
            //统计未隐藏不占位的子级元素数量
            int childrenCount = 0;
            int i = 0;
            for (int count = base.InternalChildren.Count; i = childrenCount)//同行最大列数
            {
                _columns = childrenCount;
            }
            else if (colCount == 0)//容器宽度不能满足最小宽度
            {
                _columns = 1;
            }
            else
            {
                _columns = colCount;
            }
            if (_columns > 0)
            {
                _rows = (childrenCount + (_columns - 1)) / _columns;
                return;
            }
            //通过元素数量获取数据行数
            _rows = (int)Math.Sqrt(childrenCount);
            if (_rows * _rows 

容器代码

    /// 
    /// 实现简单动态均分Panel容器
    /// 
    public class BootstrapPanel : Panel
    {

        #region 依赖属性
        /// 
        /// 子级最小宽度
        /// 
        public double ItemMinWidth
        {
            get { return (double)GetValue(ItemMinWidthProperty); }
            set { SetValue(ItemMinWidthProperty, value); }
        }


        public static readonly DependencyProperty ItemMinWidthProperty = DependencyProperty.Register("ItemMinWidth", typeof(double), typeof(BootstrapPanel), new FrameworkPropertyMetadata(double.NaN, FrameworkPropertyMetadataOptions.AffectsMeasure), IsWidthHeightValid);
        private static bool IsWidthHeightValid(object value)
        {
            double num = (double)value;
            if (!DoubleUtil.IsNaN(num))
            {
                if (num >= 0.0)
                {
                    return !double.IsPositiveInfinity(num);
                }
                return false;
            }
            return true;
        }


        /// 
        /// 元素之间的间距
        /// 

        public Thickness Gutter
        {
            get { return (Thickness)GetValue(GutterProperty); }
            set { SetValue(GutterProperty, value); }
        }
        public static readonly DependencyProperty GutterProperty =
            DependencyProperty.Register("Gutter", typeof(Thickness), typeof(BootstrapPanel), new PropertyMetadata(new Thickness(0)));

        #endregion
        /// 
        /// 实际行数
        /// 
        private int _rows;
        /// 
        /// 实际列数
        /// 
        private int _columns;

        protected override Size MeasureOverride(Size constraint)
        {
            //自动获取行列数量
            UpdateComputedValues(constraint);

            //设置容器测量尺寸
            Size availableSize = new Size(constraint.Width / (double)_columns, constraint.Height / (double)_rows);
            double num = 0.0;
            double num2 = 0.0;
            int i = 0;
            for (int count = base.InternalChildren.Count; i 
        /// 自动设置行列规则
        /// 
        private void UpdateComputedValues(Size constraint)
        {
            //通过当前容器宽度以及默认最小宽度
            //获取到实际默认容器的列数
            if (DoubleUtil.IsNaN(ItemMinWidth))
            {
                throw new ArgumentNullException("请设置ItemMinWidth的目标值");
            }
            #region 统计容器中可见元素数量
            //统计未隐藏不占位的子级元素数量
            int childrenCount = 0;
            int i = 0;
            for (int count = base.InternalChildren.Count; i = childrenCount)//同行最大列数
            {
                _columns = childrenCount;
            }
            else if (colCount == 0)//容器宽度不能满足最小宽度
            {
                _columns = 1;
            }
            else
            {
                _columns = colCount;
            }
            if (_columns > 0)
            {
                _rows = (childrenCount + (_columns - 1)) / _columns;
                return;
            }
            //通过元素数量获取数据行数
            _rows = (int)Math.Sqrt(childrenCount);
            if (_rows * _rows = num)
                    {
                        finalRect.Y += finalRect.Height;
                        finalRect.X = 0.0;
                    }
                }
            }
            return arrangeSize;
        }
    }

容器使用

构造好的容器所在项目Bolg.AntPanel,被Blog.TotalCard项目引用,在页面中使用

命名空间引用

统计标题卡片对应的xaml中引入对应命名空间

xmlns:ant="clr-namespace:Blog.AntPanel.Controls;assembly=Blog.AntPanel"

组件中引用,替换掉之前的ItemControl对应的ItemsPanel,其中ItemMinWidth设置最小子级元素的宽度,Gutter设置子级元素间的外边距,主要作用到MeasureOverride中元素的属性设定

        protected override Size MeasureOverride(Size constraint)
        {
            //省略部分内容
            for (int count = base.InternalChildren.Count; i 

xaml中使用

统计标题卡片对应的xamlItemsControl模板的使用


    
        
    

运行效果

技术图片

实现功能

  • 能够根据容器中元素数量设定行列
  • 通过容器的尺寸变化变更元素排列
  • 元素均分的区域块元素自动填充

Q&A

如果需要项目源码,可以关注一下公众号,回复【BootstrapPanel】获取源码资源

技术图片

自定义面板优化统计标题卡


推荐阅读
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
author-avatar
再生Solo_868
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有