web-dev-qa-db-ja.com

WPF四角形-ちょうど上の角を丸くする

WPFの四角形の角を丸くするにはどうすればよいですか？境界線を作成し、CornerRadiusプロパティを設定し、境界線内に四角形を追加しましたが、機能しません。四角形は丸くなりません。

<Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="50,50,0,0" BorderBrush="Black">
    <Rectangle Fill="#FF5A9AE0" Grid.Row="0" Grid.ColumnSpan="2" Stretch="UniformToFill" ClipToBounds="True"/>
</Border>
wpfrounded-corners
60
kjv

あなたが持っている問題は、長方形が境界線の丸い角を「オーバーフロー」しているということです。

長方形の角を丸くすることはできません。そのため、境界線に背景色を付けて長方形を削除するだけの場合：

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

希望する効果が得られます。

106
ChrisF

長方形のRadiusXおよびRadiusYプロパティを設定します。これにより、角が丸くなります。

19
stuartjsmith

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

5
Ievgen Naida

これは、内部のRectangle（またはその他）でも機能します。

<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>

コンテンツの正確なサイズがない場合は、高さと幅で遊ぶ必要があります。

0
Lukáš Koten