Search code examples
silverlightxamlexpression-blend

How to draw path so it snaps to edges and how do I make tabs overlap?


See picture. This is tab design I'm working on for my TabControl:

enter image description here

As you see - path got 4 points - corners of my tab. But no matter how I try - with enough magnification I see some kind of artifacts when running. It seems that top and bottom not parallel and I'm not sure how to make it "snap" to grid edges. Anyone?

Also, this Grid around my Path is actually TemplateTopSelected which is part of TabControl's template.

What do I need to do to make tabs overlap like so (and on a bottom see what I have):

enter image description here


Solution

  • There are a couple of ways to align paths to grid.

    First, you can enable a snap grid for the artboard. This is done in Tools\Options menu.

    enter image description here

    Now when you add a point to a Path it will snap to the nearest grid point. To enable/disable this setting quickly (once you've configured the grid) you can use the snapping button on the bottom of the artboard.

    enter image description here

    Shift-Click

    Another tip is to hold down the Shift key when drawing the path. This contrains the point placement to to 45 degree angles. This works whether you have grid snapping enabled or not.

    enter image description here