Click here to Skip to main content
13,445,695 members (40,047 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 26 Aug 2011

How to Crop an object using Expression Blend?

, 25 Aug 2011
Rate this:
Please Sign up or sign in to vote.
Crop an object using Expression Blend

Few days ago, I published an XAML Tip "How to Convert a Rectangle to a Path Control using Expression Blend?". Today in this post, we will discuss another tip similar to that post. In this post, we will discuss the steps to crop an element to give a desired output.

This post will help a beginner who just started designing XAML using Expression Blend. Hope this small tip will help you to understand it in a better way. Read to know more on this topic.

Begin with an Ellipse

Let's begin with the demo. Here, we will add two Ellipse (Circle) in the XAML page, one on top of the other but in a little different location. Then we will crop those controls to create a different shape. Follow the below steps to start with.

To do this, we will add a circle using the Ellipse control in the LayoutRoot of the XAML page as shown below:

Add an Ellipse to the LayoutRoot

Similarly, add another circle using the Ellipse control inside the same Panel. In our case, it is the LayoutRoot of the XAML page. This will add the second Ellipse on top of the other, but place the 2nd control at a different location as shown below:

Add another Ellipse to the LayoutRoot in a different location

Here you will see that there is a gap between the two controls. In the next steps, we will crop that portion from the one using the other.

Cropping the Controls

It's time to crop them to create a different shape from those. We will subtract the 2nd circle from the first one. To do this, select both of them as shown here:

Select both the Ellipse controls

Once both the controls are selected, go to menu bar "Object" -> "Combine" -> "Subtract". This step will subtract the second control from the first one. You can try with the other four options mentioned there too.

For our demo app, here is the instruction set shown in the below snapshot:

Subtract the content from the Menu

When you click on the "Subtract" menu item, you will notice in the Object and Timeline panel that the two Ellipses have been replaced by a Path control. The IDE changed them automatically to create the shape. In the design view, you will notice that the shape has been created as desired.

Find the screenshot here:

New Subtracted Path generated from the two Controls

What Next?

Now you can do whatever you want with the control; you can set background, border, etc. You can modify all the properties that you can do for Path control. Let's change the Background color to see the control properly and here it is:

Set a Color to the new Control

Hope this tip was helpful for you to understand the process to crop the controls easily using Expression Blend. It is very difficult to create such complex controls from XAML but Expression Blend will help you to do those in just a few clicks.

So, enjoy designing your XAML page without a huge effort. Cheers!


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

GeneralMy vote of 5 Pin
Brij30-Aug-11 7:49
mvpBrij30-Aug-11 7:49 

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
Web03-2016 | 2.8.180314.2 | Last Updated 26 Aug 2011
Article Copyright 2011 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid