Clipping the canvas with the path

Question

0.00/5 (No votes)

See more:

Hi
I created a button template which renders a triangle button. The template contains a number of path items placed within the canvas. When the user clicks the button, an animation is started which, beside other things, rotates one of the paths. The problem is that when the path is rotated parts of it look over the bounds of the button. Setting the ClipToBound="true" on a canvas does not help since the button is a triange and the canvas is not. My question is: How can I set the Canvas.Clip property to a Path which defines the outer border of my button? - something like:

C#

<Canvas>
   <Canvas.Clip>
      <Path Width="30" Height="30" Data="..." />
   </Canvas.Clip>
</Canvas>

Any idea will be appreciated.

Uros

Posted 8-Feb-13 4:53am

koleraba

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-02-08T07:08:00

Solution 2

The answer is pretty straightforward: create your instance of Geometry and assign it to the property Canvas.Clip: http://msdn.microsoft.com/en-us/library/system.windows.uielement.clip.aspx[^].

Only you have to do it in code, as I guess the geometry is supposed to be modified during run time.

—SA

Posted 8-Feb-13 7:08am

Sergey Alexandrovich Kryukov

Comments

koleraba 8-Feb-13 13:19pm

Thank you for your anwer. I was thinking about clipping the viewbox and placing the whole button template inside the viewbox so when the button is resized everything still works ok. As long I want to clip to a circle or rectangle I can use a simple EllipseGeometry or RectangleGeometry. But my clipping area is a triangle with rounded corners. Since I already have a path that describes that area I thought I would just use that. But the clip property required a PathGeometry and I have a path.

Sergey Alexandrovich Kryukov 8-Feb-13 13:24pm

Exactly, you have everything. What's the problem?
—SA

koleraba 8-Feb-13 13:40pm

I set the ViewBox.Clip property with the same value I use for Path.Data(of the path that defines my button), but the problem is that now the button is not visible at all.

Sergey Alexandrovich Kryukov 8-Feb-13 14:04pm

Well, that could be a bug. I don't know what you are trying to do exactly, but... fill canvas with color, to see where is it actually clipped, play with the size/location of the object; may be it's close, barely behind the clip, use the debugger... this is all just a matter of debugging.
—SA