Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >wpf wrapPanel居中并从左到右排列

wpf wrapPanel居中并从左到右排列

作者头像
全栈程序员站长
发布于 2022-09-15 02:06:29
发布于 2022-09-15 02:06:29
39400
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public class AlignableWrapPanel : Panel
    {
        /// <summary>
        /// 注册新的属性 HorizontalContentAlignment
        /// </summary>
        public HorizontalAlignment HorizontalContentAlignment
        {
            get { return (HorizontalAlignment)GetValue(HorizontalContentAlignmentProperty); }
            set { SetValue(HorizontalContentAlignmentProperty, value); }
        }

        public static readonly DependencyProperty HorizontalContentAlignmentProperty =
            DependencyProperty.Register("HorizontalContentAlignment", 
                typeof(HorizontalAlignment), 
                typeof(AlignableWrapPanel), 
                new FrameworkPropertyMetadata(HorizontalAlignment.Left, FrameworkPropertyMetadataOptions.AffectsArrange));
        /// <summary>
        /// panel尺寸的计算
        /// </summary>
        /// <param name="constraint"></param>
        /// <returns></returns>
        protected override Size MeasureOverride(Size constraint)
        {
            //当前行的尺寸
            Size curLineSize = new Size();

            //整个panel的尺寸
            Size panelSize = new Size();

            //panel里的item
            UIElementCollection children = base.InternalChildren;

            for (int i = 0; i < children.Count; i++)
            {
                UIElement child = children[i] as UIElement;

                // 更新子元素在容器中的尺寸
                child.Measure(constraint);
                Size sz = child.DesiredSize;

                //当需要换行时
                if (curLineSize.Width + sz.Width > constraint.Width) 
                {
                    panelSize.Width = Math.Max(curLineSize.Width, panelSize.Width);
                    panelSize.Height += curLineSize.Height;
                    curLineSize = sz;

                    //当子元素宽度大于容器时,给予新的一行
                    if (sz.Width > constraint.Width)                 
                    {
                        panelSize.Width = Math.Max(sz.Width, panelSize.Width);
                        panelSize.Height += sz.Height;
                        curLineSize = new Size();
                    }
                }
                else //不需要换行时,也继续加一行
                {
                    curLineSize.Width += sz.Width;
                    curLineSize.Height = Math.Max(sz.Height, curLineSize.Height);
                }
            }

            // 最后一行的尺寸
            panelSize.Width = Math.Max(curLineSize.Width, panelSize.Width);
            panelSize.Height += curLineSize.Height;

            return panelSize;
        }

        /// <summary>
        /// 换行的方法
        /// </summary>
        /// <param name="arrangeBounds"></param>
        /// <returns></returns>
        protected override Size ArrangeOverride(Size arrangeBounds)
        {
            int firstInLine = 0;
            Size curLineSize = new Size();
            double accumulatedHeight = 0;
            UIElementCollection children = this.InternalChildren;

            for (int i = 0; i < children.Count; i++)
            {
                Size sz = children[i].DesiredSize;

                if (curLineSize.Width + sz.Width > arrangeBounds.Width) 
                {
                    //安排元素在行中的位置
                    ArrangeLine(accumulatedHeight, curLineSize, arrangeBounds.Width, firstInLine, i);

                    
                    accumulatedHeight += curLineSize.Height;
                    curLineSize = sz;

                    if (sz.Width > arrangeBounds.Width)                   
                    {
                        //安排元素在行中的位置
                        ArrangeLine(accumulatedHeight, sz, arrangeBounds.Width, i, ++i);
                        
                        accumulatedHeight += sz.Height;
                        curLineSize = new Size();
                    }
                    firstInLine = i;
                }
                else 
                {
                    curLineSize.Width += sz.Width;
                    curLineSize.Height = Math.Max(sz.Height, curLineSize.Height);
                }
            }

            if (firstInLine < children.Count)
            {
                //安排元素在行中的位置
                ArrangeLine(accumulatedHeight, curLineSize, arrangeBounds.Width, firstInLine, children.Count);
            }

            return arrangeBounds;
        }
        /// <summary>
        /// 行中item的排列方式
        /// </summary>
        /// <param name="y"></param>
        /// <param name="lineSize"></param>
        /// <param name="boundsWidth"></param>
        /// <param name="start"></param>
        /// <param name="end"></param>
        private void ArrangeLine(double y, Size lineSize, double boundsWidth, int start, int end)
        {
            var children = InternalChildren;

            var x = 0D;
            if (HorizontalContentAlignment == HorizontalAlignment.Center)
            {
                //item起点的位置
                x = 0D;
            }

            //安排每个item在一行中的位置
            for (var i = start; i < end; i++)
            {
                var child = children[i];
                double itemWidth;
                itemWidth = child.DesiredSize.Width;
                

                child.Arrange(new Rect(x, y, itemWidth, lineSize.Height));
                //x每多一个item就加上自己本身的距离,作为起点
                x += itemWidth;
            }
        }
       
    }

参考文章.net – WPF – 如何将WrapPanel中的所有项目居中? – Thinbug

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163338.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
记一次自定义基因分类图实现(一)
最近接到一个开发任务,要对基因表达结果进行分类,其中算法分类心酸就不一一提了,最终成功将分类给做出来了,接着想展示形式,询问相关应用同事,也查了相关资料,确定了显示形式。
tangmanger
2025/04/19
630
记一次自定义基因分类图实现(一)
New UWP Community Toolkit - Carousel
概述 New UWP Community Toolkit  V2.2.0 的版本发布日志中提到了 Carousel 的调整,本篇我们结合代码详细讲解  Carousel 的实现。 Carousel 是一种传送带形态的控件,在图片展示类的应用中有非常多的应用,它拥有很好的流畅度,可以做很多的自定义,并集成了鼠标,触摸板,键盘等的操作。我们来看一下官方的介绍和官网示例中的展示: The Carousel control provides a new control, inherited from the It
Shao Meng
2018/04/28
1.5K0
New UWP Community Toolkit - Carousel
[WPF自定义控件库]自定义Expander
上一篇文章介绍了使用Resizer实现Expander简单的动画效果,运行效果也还好,不过只有展开/折叠而缺少了淡入/淡出的动画(毕竟Resizer模仿Expander只是附带的功能)。这篇继续Measure的话题,自定义了一个带有动画的ExtendedExpander。
dino.c
2019/07/26
1.1K0
[WPF自定义控件库]自定义Expander
New UWP Community Toolkit - Staggered panel
概述 前面 New UWP Community Toolkit 文章中,我们对 2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 Staggered panel,本篇我们结合代码详细讲解  St
Shao Meng
2018/04/28
1.1K0
New UWP Community Toolkit - Staggered panel
WPF 等距布局
实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有做水平压缩。在这个控件,无论在水平放多少个控件,都会在相同的高度把他们放下。如果里面的控件的宽度不相同,那么这些控件拿到的可以使用的宽度都是相同。
林德熙
2018/09/19
8580
WPF 等距布局
Silverlight:利用Panel实现自定义布局
虽然Silverlight提供了几种基本的布局方式,比如Canvas,Grid,StackPanel,Border...,但有时候可能仍然会觉得不够用。 这时候我们可以通过继承Panel,并重写MeasureOverride 和ArrangeOverride 方法,以实现自己的布局,事实上Canvas,Grid,StackPanel就是继承自Panel,并自行实现这二个方法实现的。 布局过程中,有二个关键的步骤:测量和排列子元素,正好对应MeasureOverride 与ArrangeOverride 二个
菩提树下的杨过
2018/01/23
7030
Silverlight:利用Panel实现自定义布局
实现一个 WPF 版本的 ConnectedAnimation
2017-12-25 11:44
walterlv
2018/09/18
6710
实现一个 WPF 版本的 ConnectedAnimation
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
MVVM其实就是:Model 、View、ViewModel三个的简称,就像MVC一样。 Model就是模型。View就是视图。ViewModel就是和view进行绑定的。
Shunnet
2022/05/31
6.1K0
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
New UWP Community Toolkit - AdaptiveGridView
概述 UWP Community Toolkit  中有一个自适应的 GridView 控件 - AdaptiveGridView,本篇我们结合代码详细讲解  AdaptiveGridView 的实现
Shao Meng
2018/04/28
1.4K0
New UWP Community Toolkit - AdaptiveGridView
Silverlight中定义布局面板
这是我阅读《Silverlight5 in Action》中一部分的笔记整理,原著中的代码有部分错误,而且注释不多,其中有些细节部分我也没搞太清楚。先做个笔记留作以后查看。
卡尔曼和玻尔兹曼谁曼
2019/01/25
4870
Silverlight中定义布局面板
[UWP]附加属性2:实现一个Canvas
附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas。通常附加属性有三个使用场景:插入属性、触发行为、当做缓存。可以参考以下提供的MyCanvas示例理解这三点。
dino.c
2019/01/18
5230
[WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画
这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容。
dino.c
2019/07/18
1.6K0
[WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画
【NEW】WPF MVVM 模式下自写自用的窗口样式
SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。
Shunnet
2022/09/01
2.4K0
【NEW】WPF MVVM 模式下自写自用的窗口样式
WPF/Silverlight Layout 系统概述——Arrange
上一篇我们介绍了WPF/Silverlight Layout系统的Measure过程,本文将继续介绍Arrange过程。 Arrange过程概述 普通基类属性对Arrange过程的影响 我们知道Measure过程是在确定DesiredSize的大小,以便Arrange过程参考这个DesiredSize,确定给MyPanel分配多少空间,但是DesiredSize只是作为参考,在有些用例下,MyPanelParent在调用MyPanel.Arrange的时候,会根据父的实际策略指定MyPanel.Arrang
葡萄城控件
2018/01/10
8210
WPF/Silverlight Layout 系统概述——Arrange
WPF 得到子指定元素方法和得到指定子元素集合方法MvvM得到焦点
public class UIHelper { /// <summary> /// 在Visual里找到想要的元素 /// childName可为空,不为空就按名字找 /// </summary> public static T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject
lpxxn
2018/01/31
1.1K0
Windows Community Toolkit 3.0 - UniformGrid
UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格。默认情况下,网格中的每个单元格大小相同。
Shao Meng
2018/08/23
8770
WPF MVVM 模式下自写自用的窗口样式
废话我也就不多说,直接上菜(由于公司电脑做了加密,无法把代码压缩发布,只能以这种方式来分享)
Shunnet
2022/09/01
1.7K0
WPF MVVM 模式下自写自用的窗口样式
WPF基础五:UI①布局元素WrapPanel[通俗易懂]
按从左到右的顺序位置定位子元素,在包含框的边缘处将内容切换到下一行。 后续排序按照从上至下或从右至左的顺序进行,具体取决于 Orientation 属性的值。
全栈程序员站长
2022/09/15
7960
WPF 实现 Table 布局控件
因为需要快速实现表格功能时,我选择基于 Grid 控件,因为 Grid 提供了对跨行和跨列布局的支持。
独立观察员
2024/11/23
1910
WPF 实现 Table 布局控件
WPF/Silverlight Layout 系统概述——Measure
前言 在WPF/Silverlight当中,如果已经存在的Element无法满足你特殊的需求,你可能想自定义Element,那么就有可能会面临重写MeasureOverride和ArrangeOverride两个方法,而这两个方法是WPF/SL的Layout系统提供给用户的自定义接口,因此,理解Layout系统的工作机制,对自定义Element是非常有必要的。那么,究竟WPF/SL的Layout系统是怎么工作的呢?接下来,我简单的描述一下,然后,在后面的章节具体分析。 简单来说,WPF的Layout系统是一
葡萄城控件
2018/01/10
8610
WPF/Silverlight Layout 系统概述——Measure
相关推荐
记一次自定义基因分类图实现(一)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验