代码之家  ›  专栏  ›  技术社区  ›  kjv

WPF矩形-仅在顶角处为圆形

  •  59
  • kjv  · 技术社区  · 15 年前

    如何使WPF矩形的顶角仅为圆角?

    我创建了一个边框并设置了 CornerRadius

    <Border BorderThickness="1" CornerRadius="50,50,0,0" BorderBrush="Black">
        <Rectangle Fill="#FF5A9AE0" Stretch="UniformToFill" ClipToBounds="True"/>
    </Border>
    
    4 回复  |  直到 5 年前
        1
  •  118
  •   ChrisF    10 年前

    您遇到的问题是矩形“溢出”了边框的圆角。

    <Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2"
            CornerRadius="50,50,0,0" BorderBrush="Black" Background="#FF5A9AE0">
    </Border>
    

        2
  •  21
  •   stuartjsmith    14 年前

        3
  •  5
  •   Ievgen    11 年前

    使用DrawingContext进行OnRender的好例子:

    enter image description here

       /// <summary>
        /// Draws a rounded rectangle with four individual corner radius
        /// </summary>
        public static void DrawRoundedRectangle(this DrawingContext dc, Brush brush,
            Pen pen, Rect rect, CornerRadius cornerRadius)
        {
            var geometry = new StreamGeometry();
            using (var context = geometry.Open())
            {
                bool isStroked = pen != null;
                const bool isSmoothJoin = true;
    
                context.BeginFigure(rect.TopLeft + new Vector(0, cornerRadius.TopLeft), brush != null, true);
                context.ArcTo(new Point(rect.TopLeft.X + cornerRadius.TopLeft, rect.TopLeft.Y), 
                    new Size(cornerRadius.TopLeft, cornerRadius.TopLeft),
                    90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
                context.LineTo(rect.TopRight - new Vector(cornerRadius.TopRight, 0), isStroked, isSmoothJoin);
                context.ArcTo(new Point(rect.TopRight.X, rect.TopRight.Y + cornerRadius.TopRight), 
                    new Size(cornerRadius.TopRight, cornerRadius.TopRight),
                    90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
                context.LineTo(rect.BottomRight - new Vector(0, cornerRadius.BottomRight), isStroked, isSmoothJoin);
                context.ArcTo(new Point(rect.BottomRight.X - cornerRadius.BottomRight, rect.BottomRight.Y), 
                    new Size(cornerRadius.BottomRight, cornerRadius.BottomRight),
                    90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
                context.LineTo(rect.BottomLeft + new Vector(cornerRadius.BottomLeft, 0), isStroked, isSmoothJoin);
                context.ArcTo(new Point(rect.BottomLeft.X, rect.BottomLeft.Y - cornerRadius.BottomLeft), 
                    new Size(cornerRadius.BottomLeft, cornerRadius.BottomLeft),
                    90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
    
                context.Close();
            }
            dc.DrawGeometry(brush, pen, geometry);
        }
    

    资料来源: http://wpftutorial.net/DrawRoundedRectangle.html

        4
  •  0
  •   LukáÅ¡ Koten    7 年前

    即使矩形(或其他任何东西)在其内部也可以使用:

    <Border>
        <Border.OpacityMask>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Border CornerRadius="5" Height="100" Width="100" Background="White"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Border.OpacityMask>
    
        // put your rounded content here
    
    </Border>
    

    如果你没有确切的内容大小,你将不得不使用高度和宽度。