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

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

基础面板分析

UniformGrid

提供功能

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

<ItemsControl ItemsSource="{Binding Path=Data}" FocusVisualStyle="{x:Null}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid></UniformGrid>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
</ItemsControl>

问题

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

WrapPanel

提供功能

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

<ItemsControl ItemsSource="{Binding Path=Data}" FocusVisualStyle="{x:Null}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel></WrapPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
</ItemsControl>

问题

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

思路分析

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

  • 能够实现容器内元素均分（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依赖属性

        /// <summary>
        /// 元素之间的间距
        /// </summary>
        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 < count; i++)
            {
                UIElement uIElement = base.InternalChildren[i];
                //Margin
                uIElement.SetValue(MarginProperty, Gutter);
                uIElement.Measure(availableSize);
                Size desiredSize = uIElement.DesiredSize;
                if (num < desiredSize.Width)
                {
                    num = desiredSize.Width;
                }
                if (num2 < desiredSize.Height)
                {
                    num2 = desiredSize.Height;
                }
            }
            return new Size(num * (double)_columns, num2 * (double)_rows);
        }

        /// <summary>
        /// 自动设置行列规则
        /// </summary>
        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 < count; i++)
            {
                UIElement uIElement = base.InternalChildren[i];
                if (uIElement.Visibility != Visibility.Collapsed)
                {
                    childrenCount++;
                }
            }
            if (childrenCount == 0)
            {
                childrenCount = 1;
            }
            #endregion

            //同行列数
            int colCount = (int)(constraint.Width / (ItemMinWidth + Gutter.Left + Gutter.Right));
            if (colCount >= 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 < childrenCount)
            {
                _rows++;
            }
            if (_columns == 0)
            {
                _columns = (childrenCount + (_rows - 1)) / _rows;
            }
        }

容器代码

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

        #region 依赖属性
        /// <summary>
        /// 子级最小宽度
        /// </summary>
        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;
        }

        /// <summary>
        /// 元素之间的间距
        /// </summary>

        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
        /// <summary>
        /// 实际行数
        /// </summary>
        private int _rows;
        /// <summary>
        /// 实际列数
        /// </summary>
        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 < count; i++)
            {
                UIElement uIElement = base.InternalChildren[i];
                //Margin
                uIElement.SetValue(MarginProperty, Gutter);
                uIElement.Measure(availableSize);
                Size desiredSize = uIElement.DesiredSize;
                if (num < desiredSize.Width)
                {
                    num = desiredSize.Width;
                }
                if (num2 < desiredSize.Height)
                {
                    num2 = desiredSize.Height;
                }
            }
            return new Size(num * (double)_columns, num2 * (double)_rows);
        }

        /// <summary>
        /// 自动设置行列规则
        /// </summary>
        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 < count; i++)
            {
                UIElement uIElement = base.InternalChildren[i];
                if (uIElement.Visibility != Visibility.Collapsed)
                {
                    childrenCount++;
                }
            }
            if (childrenCount == 0)
            {
                childrenCount = 1;
            }
            #endregion

            //同行列数
            int colCount = (int)(constraint.Width / (ItemMinWidth + Gutter.Left + Gutter.Right));
            if (colCount >= 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 < childrenCount)
            {
                _rows++;
            }
            if (_columns == 0)
            {
                _columns = (childrenCount + (_rows - 1)) / _rows;
            }
        }

        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;
        }
    }

容器使用

构造好的容器所在项目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 < count; i++)
            {
                //省略部分内容
                //Margin-设置元素外边距
                uIElement.SetValue(MarginProperty, Gutter);
                //省略部分内容
            }
            //省略部分内容
        }

xaml中使用

统计标题卡片对应的xaml中ItemsControl模板的使用

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <ant:BootstrapPanel ItemMinWidth="240" Gutter="10"></ant:BootstrapPanel>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

运行效果

实现功能

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

Q&A

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

原文地址：https://www.cnblogs.com/guanguanchangyu/p/12358416.html

时间： 2024-10-30 01:17:43

自定义面板优化统计标题卡的相关文章

WPF实现高仿统计标题卡

飘哇~~~,在家数瓜子仁儿,闲来无事,看东看西,也找点儿,最近正在看看WPF动画,光看也是不行,需要带着目的去学习,整合知识碎片,恰巧,看到Github中一个基于Ant Designer设计风格的后台管理系统,看到统计标题卡,就它了,于是就开始造作 动画分析 原始效果 布局 卡片由外层边框块Border.内层左右布局构成,图例如下: 动效 触发事件 鼠标进入卡片区域开始动效 <EventTrigger RoutedEvent="MouseEnter"> ...... <

通过自定义样式优化博客界面

园子里的模板非常丰富,但距自己的期望,总是差一点点.加上我使用的是Windows Live Writer 2009写博客(2011的某些功能我无法接受,退回到习惯的旧版),所以写博客快则快矣,界面就有点不忍直视了.如前两天写的一篇博文: 无论是标题,还是各级子标题.代码.例子,布局,感觉都是乱糟糟的,打开页面,实在没有阅读下去的兴趣. 于是研究了一下究竟怎样来优化博客界面,对以下方面进行了修改: 每个段落加上首行缩进 标题.子标题样式修改 代码样式修改 增加阅读目录 增加回到顶部 最后的结果好多

性能优化——统计信息——SQLServer自动更新和自动创建统计信息选项 (转载)

原文译自:http://www.mssqltips.com/sqlservertip/2766/sql-server-auto-update-and-auto-create-statistics-options/?utm_source=dailynewsletter&utm_medium=email&utm_content=headline&utm_campaign=2012913 统计信息是如何提高SQLServer查询性能的?统计直方图用作在查询执行计划中查询优化器的选择依据.

Android App 优化之消除卡顿

转载:http://gold.xitu.io/post/582583328ac247004f3ab124 1, 感知卡顿 用户对卡顿的感知, 主要来源于界面的刷新. 而界面的性能主要是依赖于设备的UI渲染性能. 如果我们的UI设计过于复杂, 或是实现不够好, 设备又不给力, 界面就会像卡住了一样, 给用户卡顿的感觉. 1.1 16ms原则 在剖析卡顿的原因之前, 我们先来了解下Android中著名的"16ms"原则: Android系统每隔16ms会发出VSYNC信号重绘我们的界面(A

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

【凯子哥带你学Android】Andriod性能优化之列表卡顿——以“简书”APP为例

这几天闲得无聊,就打开手机上的开发者模式里面的"GPU过度绘制"功能,看看别家的App做的咋样,然后很偶然的打开了"简书",然后就被它的过度绘制惊呆了,于是写了这篇性能分析的文章,从一个只有APK文件的角度,说下如何寻找布局中可能存在的性能问题,以及解决方案.本文章以简书Android最新版本1.9.1进行分析. GPU过度绘制 Hierarchy View SysTrace TraceView 总结 分析资源下载 GPU过度绘制 首先打开下面两个功能开关 开发者模

Mysql——SQL优化-统计某种类型的个数

有时我们想统计某种类型有多少个,会用这个SQL.全表扫描之余,还要filesort,耗时1.34秒. mysql> select country,count(*) from t1 group by country; +---------+----------+ | country | count(*) | +---------+----------+ | NULL | 32 | | africa | 524288 | | america | 524288 | | china | 524288 |

网站建站如何确定网站优化的标题

网站建设并不是目的,而是为了以后做推广.做优化,但是很多网站建设人员会在最开始的时候模糊概念,甚至将这两个概念分开,这样做的结果就是做出来的网站,要么好看,不适合优化,要么适合优化,但是不好看,这样的网站建设没有意义,因为没有后期提升的空间.因此,包括上海网站建设人员在内,在网站建设之时都会多方面考虑. 尤其是在标题方面,标题可以算是网站的灵魂,在网站建设过程中,要确定一个好标题,这样才能让网站尽快收录,有好排名,那么,建站过程中站长该如何确定网站的优化标题呢? 一个高质量的网站,选择标题非常重

【Android - View】之自定义View实现“刮刮卡”效果

首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的"刮刮卡"的效果,即用户可以刮开覆盖层,查看自己是否中奖: (3)用户可以设置覆盖层的图片以及显示的文本内容和字体大小等参数: (4)用户可以设置一个阈值,当刮开的面积大于这个阈值时,就会自动清除所有覆盖物. 接下来简单介绍一下在这个自定义View中用到的技术点: (1)自定义属性:在 /res/values/attr.xml