• WPF 环形布局控件


    想要做一个类似于这样的方向控制控件

     

    底层的圆都好说,无论是自己动手画还是用图片都能够轻松搞定。

    但是那几个方向箭头让我犯愁了。最初尝试做在Canvas画好一个方向箭头,再通过复制,旋转等方式来调整,得到类似于图中的效果。

    但是这样画好以后也存在一些问题,比如需要为每个箭头设置点击持续点击的事件就成为一个麻烦;还有可能因为用的是Canvas,导致在别的控件中使用该控件的时候箭头的位置就会发生错位,后来尝试其他布局控件也都不能很好的解决这个问题。

    事件的问题后来用RepeatButton来解决了,为其定制Template,设置为箭头的样式,鼠标进入、点击的效果也都在Template里完成了。但是布局问题依旧是个麻烦,就想到自己动手来做一个Panel来满足自己的需要。(之前总是觉得重写那些东西很麻烦,不到万不得已就不想写那些东西)

    查看了一些资料,发现其实也不是那么麻烦,继承Panel、重写MeasureOverride,ArrangeOverride方法就OK了,难就难在ArrangeOverride里的方法怎么写,怎样给Children元素定位。

    下面我重写的方法,也不知道到底是否完全符合“环形布局控件”的标准,但是至少满足了我目前的应用需求。

       protected override Size MeasureOverride(Size availableSize)
            {
                Size childrenSize = new Size(0, 0);
                foreach (UIElement child in this.Children)
                {
                    child.Measure(availableSize);             
                    childrenSize.Height = Math.Max(child.DesiredSize.Height, childrenSize.Height);
                    childrenSize.Width = Math.Max(child.DesiredSize.Width, childrenSize.Width);
                }
                return childrenSize;
            }

       protected override Size ArrangeOverride(Size finalSize)
            {
                double angle = Math.PI * 2 / this.Children.Count;
                double a = finalSize.Width / 2;
                double b = finalSize.Height / 2;

                foreach (UIElement child in this.Children)
                {
                    double childangle = this.Children.IndexOf(child) * angle;

                    Point ponit = new Point();
                    ponit.X = a * Math.Cos(childangle) + a - child.DesiredSize.Width / 2;
                    ponit.Y = b * Math.Sin(childangle) + b - child.DesiredSize.Height / 2;

                    Rect rectChild = new Rect(ponit, child.DesiredSize);
                    child.Arrange(rectChild);
                }         
                return finalSize;
            }

    如果大家有更好的方法,欢迎指教!下面是我最后做出的样子~~~

     

  • 相关阅读:
    vue的选项
    css(3)基础知识查漏补缺
    总结获取网页相关的一些宽高
    vue的全局api(二)
    vue的全局api
    vue的内部指令
    Java File
    Java File IO学习笔记
    systemctl介绍
    java学习笔记一(20180319)
  • 原文地址:https://www.cnblogs.com/wdysunflower/p/1773343.html
Copyright © 2020-2023  润新知