如何使圆角边框的内容也圆角? [英] How to make the contents of a round-cornered border be also round-cornered?

问题描述

我有一个包含 3x3 网格的圆角边框元素.网格的角伸出边界.我该如何解决?我尝试使用 ClipToBounds，但没有成功.感谢您的帮助

I have a border element with rounded corners containing a 3x3 grid. The corners of the grid are sticking out of the border. How can I fix that? I tried using ClipToBounds but didn't get anywhere. Thanks for your help

推荐答案

以下是此提到的 of-a-round-cornered-border-be-also-round-cornered#325003">线程乔比

• 没有任何装饰器(即边框)或布局面板(即 Stackpanel)具有这种开箱即用的行为.
• ClipToBounds 用于布局.ClipToBounds 不会阻止元素在其边界之外绘制；它只是防止儿童的布局溢出".此外，大多数元素不需要 ClipToBounds=True ，因为它们的实现无论如何都不允许其内容的布局溢出.最显着的例外是 Canvas.
• 最后，Border 将圆角视为布局边界内的绘图.

这是一个继承自 Border 并实现了适当功能的类的实现:

Here is an implementation of a class that inherits from Border and implements the proper functionality:

     /// <Remarks>
    ///     As a side effect ClippingBorder will surpress any databinding or animation of 
    ///         its childs UIElement.Clip property until the child is removed from ClippingBorder
    /// </Remarks>
    public class ClippingBorder : Border {
        protected override void OnRender(DrawingContext dc) {
            OnApplyChildClip();            
            base.OnRender(dc);
        }

        public override UIElement Child 
        {
            get
            {
                return base.Child;
            }
            set
            {
                if (this.Child != value)
                {
                    if(this.Child != null)
                    {
                        // Restore original clipping
                        this.Child.SetValue(UIElement.ClipProperty, _oldClip);
                    }

                    if(value != null)
                    {
                        _oldClip = value.ReadLocalValue(UIElement.ClipProperty);
                    }
                    else 
                    {
                        // If we dont set it to null we could leak a Geometry object
                        _oldClip = null;
                    }

                    base.Child = value;
                }
            }
        }

        protected virtual void OnApplyChildClip()
        {
            UIElement child = this.Child;
            if(child != null)
            {
                _clipRect.RadiusX = _clipRect.RadiusY = Math.Max(0.0, this.CornerRadius.TopLeft - (this.BorderThickness.Left * 0.5));
                _clipRect.Rect = new Rect(Child.RenderSize);
                child.Clip = _clipRect;
            }
        }

        private RectangleGeometry _clipRect = new RectangleGeometry();
        private object _oldClip;
    }

这篇关于如何使圆角边框的内容也圆角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！