473,378 Members | 1,410 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

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 10788
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Mel | last post by:
how can i have a rounded edge button in my forms using CSS ? thanks Mel
2
by: meltedown | last post by:
I noticed that the footer menu on the bottom with rounded corners only uses one image of a rounded corner:img/round15_bot.gif This one image seems to be used for all four corners, but that can't...
1
by: jimfortune | last post by:
The following Access VBA function creates a string that can be used in a pdf stream to draw or fill a rectangle of a given color with rounded corners: 'Begin code----------- Public Function...
2
by: Konrad | last post by:
Hi This is maybe simple question but how to render DataGrid and Tables with rounded corners? Thanks Konrad
8
by: TheCornjerker | last post by:
I've been looking into what method I should use to show rounded corners (and I've found a lot). My question is why does Google seems to mostly use the table method with an image in each corner. ...
6
by: Schraalhans Keukenmeester | last post by:
I want to achieve the following: A small image in each of the corners of a box, like below: +-------------------------------+ | + | + | + | + | + | +
5
by: Cindy Lee | last post by:
Is there anyway to put rounded corners on the grid views? When I bring it up in the brower I need to have rounded corners. There are some tricks I can do to regular html tables, but is there any...
1
by: kidelectric | last post by:
The issue I am having is that I would like to be able to drag-and-drop div elements that have rounded corners.* Since these elements will be dynamically created (including background color), I could...
4
by: PWS | last post by:
I am despertely trying get a DIV to look like a box with rounded corners. I can find load of examples this where the first line of text has the top graphic and the last line of text has the...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.