2009-11-08 12 views
51

मैं एक डब्ल्यूपीएफ आयताकार के लिए केवल शीर्ष कोनों को कैसे गोल कर सकता हूं? मैंने एक सीमा बनाई और कॉर्नर रेडियस संपत्ति सेट की और सीमा के अंदर मैंने अपना आयत जोड़ा है, लेकिन यह काम नहीं करता है, आयताकार गोल नहीं है।डब्ल्यूपीएफ आयताकार - राउंड सिर्फ शीर्ष कोनों

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

आपको आयत की आवश्यकता क्यों है? –

उत्तर

90

आपको जो समस्या मिली है वह यह है कि आयत आपकी सीमा के गोलाकार कोनों को "बहती" है।

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

आप अपने वांछित प्रभाव मिल जाएगा:

एक आयत इसलिए यदि आप सिर्फ सीमा पर पृष्ठभूमि रंग डाल दिया और आयत को दूर व्यक्तिगत रूप से गोलाकार कोनों नहीं हो सकता,।

18

आयत पर RadiusX और RadiusY प्रॉपर्टी सेट, यह कोने गोल

दे देंगे
+2

वह चारों कोनों के चारों ओर गोल करता है - कोनेराइडियस संपत्ति हटा दी गई थी - इस प्रकार आप यह नहीं कर सकते: 'कॉर्नर रेडियस = "50,50,0,0" आपको चारों कोनों को गोल करना होगा –

5

अच्छा उदाहरण है कि कैसे इसके संभावित 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

0

यह एक रेक्टन के साथ भी काम करेगा gle (या कुछ और) इसके अंदर:

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

यदि आप सामग्री के सटीक आकार नहीं है ऊंचाई और चौड़ाई के साथ खेलने के लिए होगा।

संबंधित मुद्दे