Windows apps
Collapse the table of content
Expand the table of content

Use rulers and guides

In Blend for Visual Studio, you can drag guides out from rulers to get more precise control over the placement of elements on the page.

You can also use rulers and guides to create custom layouts. For more information about the Windows Store app design guidelines and how to lay out an app page, see Laying out an app page on the Windows Dev Center.

Tip Tip

If Snapping to gridlines is turned on when you drag an object on the design surface, the object will snap or pull towards the closest horizontal and vertical gridlines. Using Snapping to gridlines in conjunction with guides makes it easier to more precisely position the elements on the page.

To turn on snapping, in the lower-left corner of the design surface, click Snap to gridlines 9e9e55ff-0887-443d-a180-c824fa58355b.

For more information about snapping, see Turn snapping on or off (Windows Store apps).

The rulers in Blend are based on the Windows grid system. The basic unit of measurement for a Windows store app is 20 × 20 pixels. Each unit is further divided into sub-units of 5 × 5 pixels. Similarly, the basic unit in a ruler in is 20 pixels, and each unit is broken down into four five-pixel sub-units. The five-pixel sub-unit is the smallest unit you can view using the ruler.

To use the guides, you must first show the rulers.

To show the rulers

  • On the View menu, select Show Rulers.

When the rulers are showing you can determine the pixel placement of an object on the design surface.

Tip Tip

To view smaller increments on the ruler, zoom in on the design surface.

Show Rulers

Now that the rulers are displayed, make sure that Show Guides is selected.

To show the guides

  • On the View menu, select Show Guides.

    Guides

You are now ready to position the guides.

To position the guides

  • To position the guides, click a ruler, and then do one of the following

    • Drag the guide to the desired position on the page, by aligning the guide to the pixel measurements on the ruler.

    • Type the desired pixel value in the value editor that appears on top of the guide, and then press Enter.

      Guides value editor

Guides can be aligned to the top, the bottom, the left, or the right of the design surface. The alignment is indicated by the adorner on the ends of the guide line.

Top-aligned guide

Indicates a top-aligned guide.

Bottom-aligned guide

Indicates a bottom-aligned guide.

Left-aligned guides

Indicates a left-aligned guide.

Right-aligned guides

Indicates a right-aligned guide.

To change the alignment of a guide

  • Click a guide, and then click the arrow that appears to the right of the value editor. Select the alignment that you want.

To delete a guide

  • Click a guide, and then click the arrow that appears to the right of the value editor. Click Delete.

You can save guides to use with other projects. To use a saved set of guides, you load them into the current project. Because files are saved as an XML file, you can also share guides with other developers.

To save guides

  • To save guides, on the View menu, point to Manage Guides, and then click Save Guides.

To load guides

  • To open a .guides file that you have saved, on the View menu, point to Manage Guides, and then click Load Guides.

To share a .guides file

  • Open the project folder in File Explorer, and locate the .guides file that you want to share.

    To share the file with another project, copy the file, and then save the file in the folder of the new project that you want to use the .guides file with.

Show:
© 2017 Microsoft