WPF 等距布局

本文告诉大家如何使用 WPF 的自定义布局做等距布局。

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有做水平压缩。在这个控件,无论在水平放多少个控件,都会在相同的高度把他们放下。如果里面的控件的宽度不相同,那么这些控件拿到的可以使用的宽度都是相同。

请看下面的图片

上面图片是存在 6 个按钮的,所有的按钮使用的宽度都是一样

现在修改为 3 个按钮,可以看到说有按钮都是相同

现在加两个宽度很小的文本,可以看到文本可以的宽度和按钮一样

下面让我告诉大家这个控件是如何做。

在 WPF 做自己的面板可以继承Panel ,可以重写两个方法,第一个方法是 MeasureOverride ,重写这个方法可以告诉上一级控件,这个控件需要多大的空间。第二个方法是 ArrangeOverride 告诉元素可以怎么放。

下面创建一个类 KbiseczvTom 这是等距控件。

首先重写MeasureOverride,因为需要的一般只是做水平等距,所以就需要拿到元素的宽度和高度,把所有的宽度合起来作为这个控件需要的最小宽度,然后拿到所有控件的最大高度作为这个控件的需要高度。虽然从 MeasureOverride 返回了大小,但是实际上的上一级控件是不是最后给这么大的,还是不知道的。

        protected override Size MeasureOverride(Size availableSize)
        {
            var size = new Size();
            foreach (var temp in Children.Cast<UIElement>())
            {
                temp.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
                size = new Size(size.Width + temp.DesiredSize.Width, Math.Max(size.Height, temp.DesiredSize.Height));
            }
            return size;
        }

在调用 Measure 传入无穷是因为这是需要让元素告诉控件需要的最大大小。

然后就是重写 ArrangeOverride ,传入的参数就是上一级控件给这个控件的大小,返回值就是实际需要的大小。现在可以使用元素的 Arrange 通过这个可以把元素给元素的大小,左上角。但是元素是不是就听话,实际上还是不知道的。首先拿到元素数,把拿到的宽度除元素得到一个元素可以使用宽度,然后把每个元素按照顺序给左上角,宽度。

        protected override Size ArrangeOverride(Size availableSize)
        {
            var size = availableSize;

            var width = size.Width / Children.Count;

            for (int i = 0; i < Children.Count; i++)
            {
                var temp = Children[i];
                temp.Arrange(new Rect(new Point(i*width,0),new Size(width,size.Height)));
            }

            return size;
        }

现在打开界面写下面代码试试

       <local:KbiseczvTom HorizontalAlignment="Stretch" Height="100">
            <Button Margin="10,10,10,10" Content="点击"></Button>
            <Button Margin="10,10,10,10" Content="点击"></Button>
            <Button Margin="10,10,10,10" Content="点击"></Button>

            <TextBlock VerticalAlignment="Center" Text="文本"></TextBlock>
            <TextBlock VerticalAlignment="Center" Text="文本"></TextBlock>
        </local:KbiseczvTom>

所有代码:

    public class KbiseczvTom : Panel
    {
        protected override Size MeasureOverride(Size availableSize)
        {
            var size = new Size();
            foreach (var temp in Children.Cast<UIElement>())
            {
                temp.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
                size = new Size(size.Width + temp.DesiredSize.Width, Math.Max(size.Height, temp.DesiredSize.Height));
            }
            return size;
        }

        protected override Size ArrangeOverride(Size availableSize)
        {
            var size = availableSize;

            var width = size.Width / Children.Count;

            for (int i = 0; i < Children.Count; i++)
            {
                var temp = Children[i];
                temp.Arrange(new Rect(new Point(i*width,0),new Size(width,size.Height)));
            }

            return size;
        }
    }

源代码:WPF 等距布局-CSDN下载

因为现在的 csdn 是需要下载积分,所以我会把一些资源放到 RetroShare ,这是一个很好的分享工具,如何使用请看使用 RetroShare 分享资源


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

从MapX到MapXtreme2004[9]-标注的强调显示

        如果想要将一个选中的图元强调显示,用红色醒目的文字显示的话,我的思路如下:             1、不可能直接改原先的图元,所以必须要在一个...

23460
来自专栏钟绍威的专栏

创建被图像填充的组件解释几处做法解释几点

如果你直接new一个组件的话,组件是标准外观 如果需要改变组件的外观,最关键的就是要就需要重写组件的paintCoponent(Graphics g)方法,...

22690
来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

16720
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

22380
来自专栏超然的博客

深入了解——CSS3新增属性

写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式。参考下述代码:

10410
来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

20720
来自专栏前端知识分享

第167天:canvas绘制柱状图

31030
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习(1)

本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料。

8720
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

50240
来自专栏我分享我快乐

web前端设计基础单词表

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 ad...

41080

扫码关注云+社区

领取腾讯云代金券