468,537 Members | 1,960 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,537 developers. It's quick & easy.

polygon with rounded corners

I need to be able to make polygons with rounded corners. This will be to
draw group outlines around shapes in a diagramming tool in wpf. all angles
in the polygon will be 90 degrees, but somehow I wanted to make the corners
a bit rounded (otherwise it will look like an old legacy app). Is this
possible in wpf? The reason I wanted to use a polygon was because I will
bind an adorner to each point so the user can drag the corners around to
resize it. any advise would be great. thanks.

--
mo*******@newsgroup.nospam
Jun 27 '08 #1
6 9970
Hi Moondaddy,

The System.Windows.Shapes.Polygon class doesn't provide a property to set
rounded corners.

So to get what you want, you need to use the System.Windows.Shapes.Path
class to draw a series of lines for the lines of the polygon and curves
shapes for the rounded corners.

For more information on how to create a complex shape using Path, please
refer to the following MSDN documents:

How to: Create an Elliptical Arc
http://msdn.microsoft.com/en-us/library/ms745030.aspx

How to: Create a Composite Shape
http://msdn.microsoft.com/en-us/library/ms750593.aspx

How to: Create a Shape by Using a PathGeometry
http://msdn.microsoft.com/en-us/library/ms745814.aspx

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscripti...ult.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscripti...t/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
Jun 27 '08 #2
Thanks Linda,

I've been looking into this and am having some trouble getting my arms
around it. Can you show me how to make a rectangle with rounded corners in
both xaml and c#?

"Linda Liu[MSFT]" <v-****@online.microsoft.comwrote in message
news:$I**************@TK2MSFTNGHUB02.phx.gbl...
Hi Moondaddy,

The System.Windows.Shapes.Polygon class doesn't provide a property to set
rounded corners.

So to get what you want, you need to use the System.Windows.Shapes.Path
class to draw a series of lines for the lines of the polygon and curves
shapes for the rounded corners.

For more information on how to create a complex shape using Path, please
refer to the following MSDN documents:

How to: Create an Elliptical Arc
http://msdn.microsoft.com/en-us/library/ms745030.aspx

How to: Create a Composite Shape
http://msdn.microsoft.com/en-us/library/ms750593.aspx

How to: Create a Shape by Using a PathGeometry
http://msdn.microsoft.com/en-us/library/ms745814.aspx

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscripti...ult.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscripti...t/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.


Jun 27 '08 #3
You need some code to do this, I'm not sure you can do this in pure xaml
only.
Following is a complete sample that illustrates how to draw a rectangle with
rounded corners.

//csc /t:winexe /r:"C:\Program Files\Reference
Assemblies\Microsoft\Framework\v3.0\windowsbase.dl l" /r:"C:\Program
Files\Reference
Assemblies\Microsoft\Framework\v3.0\presentationfr amework.dll"
/r:"C:\Program Files\Reference
Assemblies\Microsoft\Framework\v3.0\presentationco re.dll"
wpfroundedrectangle.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
using System.Windows.Shapes;

class RoundedRectangle : Window
{
[STAThread]
public static void Main()
{
Application app = new Application();
app.Run(new RoundedRectangle());
}
public RoundedRectangle()
{
Grid grid = new Grid();
Content = grid;
PolyLineSegment rectSeg = new PolyLineSegment(new Point[] {
new Point(50, 40), new Point(10, 40),
new Point(10, 10), new Point(50, 10)},
true);
PathFigure pf = new PathFigure(new Point(50, 40), new PathSegment[]
{ rectSeg }, true);
PathGeometry pg = new PathGeometry(new PathFigure[] { pf });
Pen penThick = new Pen();
penThick.Thickness = 8; // this value determines the radius of the
rounded corners
penThick.LineJoin = PenLineJoin.Round;
Pen penThin = new Pen(Brushes.Black, 1);
//Create widened geometry using a thick pen
PathGeometry pgWidened = pg.GetWidenedPathGeometry(penThick);
// Create an outline geometry from the widened geometry
PathGeometry pgOutlined = pgWidened.GetOutlinedPathGeometry();
// Clone the outlined geometry, so we can modify the geometry
PathGeometry pgCloned = pgOutlined.Clone();
// Remove the last segment
pgCloned.Figures[0].Segments.RemoveAt(pgCloned.Figures[0].Segments.Count
- 1);
DrawingImage drawImg = new DrawingImage(new GeometryDrawing(null,
penThin, pgCloned));
Image img = new Image();
img.Margin = new Thickness(15);
img.Source = drawImg;
grid.Children.Add(img);
}
}
Willy.

"moondaddy" <mo*******@newsgroup.nospamwrote in message
news:%2****************@TK2MSFTNGP04.phx.gbl...
Thanks Linda,

I've been looking into this and am having some trouble getting my arms
around it. Can you show me how to make a rectangle with rounded corners
in both xaml and c#?

"Linda Liu[MSFT]" <v-****@online.microsoft.comwrote in message
news:$I**************@TK2MSFTNGHUB02.phx.gbl...
>Hi Moondaddy,

The System.Windows.Shapes.Polygon class doesn't provide a property to set
rounded corners.

So to get what you want, you need to use the System.Windows.Shapes.Path
class to draw a series of lines for the lines of the polygon and curves
shapes for the rounded corners.

For more information on how to create a complex shape using Path, please
refer to the following MSDN documents:

How to: Create an Elliptical Arc
http://msdn.microsoft.com/en-us/library/ms745030.aspx

How to: Create a Composite Shape
http://msdn.microsoft.com/en-us/library/ms750593.aspx

How to: Create a Shape by Using a PathGeometry
http://msdn.microsoft.com/en-us/library/ms745814.aspx

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you.
Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

================================================= =
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscripti...ult.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent
issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each
follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscripti...t/default.aspx.
================================================= =
This posting is provided "AS IS" with no warranties, and confers no
rights.



Jun 27 '08 #4
Hi Moondaddy,

Thank you for your prompt reply!

The following is a sample of polygon with rounded corners in XAML:
<Path Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="0,25"
IsClosed="true">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="25,25"
SweepDirection="Clockwise" Point="25,0" />
<LineSegment Point="200,0"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="225,25"/>
<LineSegment Point="225,150"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="200,175"/>
<LineSegment Point="25,175"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="0,150"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

The following is a sample in code:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;

PathGeometry pg = new PathGeometry();
PathFigure pf = new PathFigure();

pf.StartPoint = new Point(0, 25);
pf.IsClosed = true;

ArcSegment arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(25, 0);
pf.Segments.Add(arcs);

LineSegment lines = new LineSegment();
lines.Point = new Point(200, 0);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(225, 25);
pf.Segments.Add(arcs);

lines = new LineSegment();
lines.Point = new Point(225, 150);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(200, 175);
pf.Segments.Add(arcs);

lines = new LineSegment();
lines.Point = new Point(25, 175);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(0, 150);
pf.Segments.Add(arcs);

pg.Figures.Add(pf);
path.Data = pg;

Grid grid = new Grid();
grid.Children.Add(path);

this.Content = grid;
}

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

This posting is provided "AS IS" with no warranties, and confers no rights.
Jun 27 '08 #5
Thanks both Linda and Willy, The code looks like just what I need to get
started. I wont be able to try it for a few days, but will let you know if
I have any further questions.
"Linda Liu[MSFT]" <v-****@online.microsoft.comwrote in message
news:uW**************@TK2MSFTNGHUB02.phx.gbl...
Hi Moondaddy,

Thank you for your prompt reply!

The following is a sample of polygon with rounded corners in XAML:
<Path Stroke="Black" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="0,25"
IsClosed="true">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="25,25"
SweepDirection="Clockwise" Point="25,0" />
<LineSegment Point="200,0"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="225,25"/>
<LineSegment Point="225,150"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="200,175"/>
<LineSegment Point="25,175"/>
<ArcSegment Size="25,25"
IsLargeArc="false" SweepDirection="Clockwise" Point="0,150"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>

The following is a sample in code:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 2;

PathGeometry pg = new PathGeometry();
PathFigure pf = new PathFigure();

pf.StartPoint = new Point(0, 25);
pf.IsClosed = true;

ArcSegment arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(25, 0);
pf.Segments.Add(arcs);

LineSegment lines = new LineSegment();
lines.Point = new Point(200, 0);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(225, 25);
pf.Segments.Add(arcs);

lines = new LineSegment();
lines.Point = new Point(225, 150);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(200, 175);
pf.Segments.Add(arcs);

lines = new LineSegment();
lines.Point = new Point(25, 175);
pf.Segments.Add(lines);

arcs = new ArcSegment();
arcs.Size = new Size(25, 25);
arcs.IsLargeArc = false;
arcs.SweepDirection = SweepDirection.Clockwise;
arcs.Point = new Point(0, 150);
pf.Segments.Add(arcs);

pg.Figures.Add(pf);
path.Data = pg;

Grid grid = new Grid();
grid.Children.Add(path);

this.Content = grid;
}

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

This posting is provided "AS IS" with no warranties, and confers no
rights.


Jun 27 '08 #6
Hi Moondaddy,

How about the problem now?

If you have any question, please feel free to let me know.

Thank you for using our MSDN Managed Newsgroup Support Service!

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
ms****@microsoft.com.

This posting is provided "AS IS" with no warranties, and confers no rights.
Jun 27 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Mel | last post: by
2 posts views Thread by meltedown | last post: by
2 posts views Thread by Konrad | last post: by
8 posts views Thread by TheCornjerker | last post: by
6 posts views Thread by Schraalhans Keukenmeester | last post: by
5 posts views Thread by Cindy Lee | last post: by
4 posts views Thread by PWS | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.