WPFの四角形 - 上の角だけを丸める

Question

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> 

Answer 1

問題は、四角形がボーダーの丸い角を「オーバーフロー」させていることです。

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

あなたの望ましい効果を得るでしょう：あなただけの国境に背景色を入れて、四角形を取り除くので、もし

長方形は、個別に丸みを帯びた角を持つことはできません。長方形のRadiusXとRadiusYプロパティを設定し

Answer 2

、これはそれを与えるコーナー

Answer 3

良い例DrawingContextではでOnRender行うことがどのようにその可能四捨五入：

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

Answer 4

これは、Rectan

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

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