Click here to Skip to main content
13,408,987 members (45,288 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 24 Aug 2011

How to Convert a Rectangle to a Path Control using Expression Blend?

, 24 Aug 2011
Rate this:
Please Sign up or sign in to vote.
Way to convert a Rectangle or a Ellipse control to a Path control

This will be a short tip of the day where I will show you the way to convert a Rectangle or an Ellipse control to a Path control. If you are not familiar with Expression Blend and are currently working with it to design your UI, this tip will definitely help you in various scenarios.

Let’s start with a small demonstration using Rectangle control. You can do the same for Ellipse too. Read to know more.

Begin with the Rectangle

Let us begin our demo with a rectangle control. We will place it in the main panel called “LayoutRoot” which is a Grid in our case. You can use any panel there as per your wish. In Expression Blend, drag the Rectangle control in the panel which will look as below:

Add a Rectangle in the Panel

The above will modify the XAML code as below:

<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle Fill="#FF7E0E0E" Margin="92,98,206,174" Stroke="Black"/>

Note that, we added the Fill color explicitly to show you the demo properly.

Converting the Rectangle to a Path

Let’s do it now. Select the Rectangle and go to the Menu called “Object” –> “Path” –> “Convert to Path” as demonstrated in the below screenshot:

Convert to Path

This will convert the control to a Path and the XAML of the same will look as shown below:

<Grid x:Name="LayoutRoot" Background="White">
    <Path Data="M0.5,0.5 L341.5,0.5 L341.5,207.5 L0.5,207.5 z" 

          Fill="#FF7E0E0E" Margin="92,98,206,174" 

          Stretch="Fill" Stroke="Black"/>

Here you will notice that the Rectangle has been converted to a Path control. Once this step is done, you can easily use the other functionalities of Path control as per your requirement.

You will also notice that, in the “Objects and Timeline” panel, the Rectangle has been changed to Path:

Rectangle Converted to a Path

Hope this tip was helpful for you. Let me know if you want some more XAML tips like this. In such a case, I will come with some additional tips & tricks for you.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:

You may also be interested in...


Comments and Discussions

QuestionMy vote of 1 Pin
Veit25-Aug-11 3:56
memberVeit25-Aug-11 3:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180221.1 | Last Updated 24 Aug 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid