How to Crop an object using Expression Blend?



Few days ago, I published a XAML Tips "How to Convert a Rectangle to a Path Control using Expression Blend?". Today in this post, we will discuss on another tips similar to that post. In this post, we will discuss on 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 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 to 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 has 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 tips was helpful for you to understand the process to crop the controls easily using the 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.

0 comments


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top