Of course, now you might be sitting there, asking yourself if there\u2019s an EASIER way to get controls to a specific location. In your design, you\u2019ve got a logo for your app, and you want that logo near the top right of your app, but with 40px of padding from the top and 100px of padding to the right. You could drag the Image to the general location and nudge it around until you get the desired values, but the guides system makes it MUCH easier.<\/p>\n Put your cursor on the top ruler, click the mouse and drag downward. As soon as you do, Blend will create a guide for you and show you the position relative to the top edge of your application. If you don\u2019t want to try to drag to a specific offset, just click on the value and change it.<\/p>\n If you do the same thing with the guide on the left, you\u2019re going to see the distance from the left edge of the design surface. In this example, that\u2019s not what you want, so drop the guide somewhere, and click just to the right of the value. A context menu will come and allow you to specify that the guide should be \u201cRight Aligned\u201d. Now, Blend will show you the distance to the right edge. Click on that value, type 100, and you\u2019ve now got a guide that\u2019s showing your distance to the edge you want.<\/p>\n If you really want to see something cool, go to the Device panel and switch from Landscape to Portrait. As soon as you do, the vertical guide will readjust itself to be 100px from the new right edge. The guides will always make sure that their distances are correct, regardless of how you change the device resolution, snapped status or orientation.<\/p>\n The other really useful part is that you can snap to the guides, regardless of your scope. Draw a Button in the vicinity of the guides and edit the template on the Button. Within the Button, drag out a Rectangle, and you\u2019ll see that you can snap that Rectangle to the guides, even though you\u2019re inside the control template. This significantly improves the experience of trying to get your controls to line up, regardless of the layout patterns you decide to use.<\/p>\n The snapping engine in Blend has also gotten a few improvements. If you tried to get your Windows Store elements to line up in older versions of Blend, you may have seen that some controls seem to be 3px off from everything else. You may have also tried to get the baseline of your TextBlock to line up with the baseline of the text in your Button, and found it somewhat challenging.<\/p>\n The default controls for Windows Store apps usually have a focus rectangle built into the control. For instance, when a keyboard user navigates to a Button, it gets a white rectangle placed outside the Button indicating focus. This focus rectangle is built into the layout boundaries of the Button, which is why the adorners for a Button on the design surface seem to be a few pixels away from the edges of the Button instead of directly on it. Having the focus rectangle inside the layout bounds helps prevent you from creating ugly layouts with overlapping rectangles, but it certainly makes it tricky to get that Button to look exactly right.<\/p>\n In the image above, all four controls have a left padding of 100. The guide is also positioned at 100 to show where you EXPECT all of the controls to be. But, the red rectangle shows how the RadioButton and Button are both offset by 3 pixels. These little discrepancies are the things that are, quite frankly, the types of things that will give your app an unpolished look.<\/p>\n The snapping engine in Blend is now able to ignore the invisible elements of most controls and snap to the visual bounds of the elements instead. To see this, drag a guide 100px from the left edge and move a Button toward the guide until it snaps. Now you\u2019ll see that the element\u2019s visuals snap to the guide instead of the layout boundary. This works when you\u2019re snapping elements to guides or to other elements.<\/p>\n Another improvement in the snapping engine is with text baselines. Drag out a horizontal guide, a Button and a TextBlock. Now, drag the Button and the TextBlock to the horizontal guide and try to get the baselines of their text on the guide. You\u2019ll see that Blend is now able to find text baselines for the common controls, and allows you to snap to them. So, when the Windows guidelines tell you that the baseline of a particular text element is supposed to be 140px from the top, you can create that guide and actually get your baseline exactly at 140px.<\/p>\n The rulers, guides, and snapping features have all been forged from your feedback. We\u2019re always looking for ways to help users make better apps more easily, and if you\u2019ve got more ideas, we\u2019d love to hear them. Please let us know what\u2019s on your mind. We read all the feedback, whether it comes from replies to this post, User Voice<\/a> requests, Connect<\/a> bugs or the Send-A-Smile system in Visual Studio.<\/p>\n![\"the](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/7713.VS2013-Blend-PixelPerfectLayout-Rulers-2.png\"){kind=tracking}
<\/a><\/p>\nGuides<\/h2>\n
![\"horizontal](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/2262.image10_02875F1C.png\")
<\/a><\/p>\n<\/a><\/p>\n![\"vertical](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/1780.image25_425145A1.png\")
<\/a><\/p>\nSnapping<\/h2>\n
![\"radio](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/6888.clip_image010_31CFEDF2.png\")
<\/a><\/p>\n![\"baseline](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/7217.VS2013-Blend-PixelPerfectLayout-Baseline-Snap.png\"){kind=tracking}
<\/a><\/p>\n
![\"dante](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2013\/09\/3531.image_thumb_6AFF42EE.png\")
<\/a><\/td>\n