The Pixel Perfect View provides a magnified look at the current device window. It has three views:
• Explorer View: shows the View hierarchy as a list, on the left.
• Normal View: a normal view of the device window, in the middle.
• Loupe View: a magnified, pixel-grid view of the device window, on the right.
Click on an element in the Explorer View and a "layout box" will be drawn in the Normal View to indicate the layout position of that element. The layout box uses multiple rectangles, to indicate the normal bounds, the padding and the margin (as needed). The purple or green rectangle indicates the normal bounds of the element (the height and width). The inner white or black rectangle indicates the content bounds, when padding is present. A black or white rectangle outside the normal purple/green rectangle indicates any present margins. (There are two colors for each rectangle, in order to provide the best contrast based on the colors currently in the background.)
A very handy feature for designing your UI is the ability to overlay an image in the Normal and Loupe Views. For example, you might have a mock-up image of how you'd like to layout your interface. By selecting Load... from the controls in the Normal View, you can choose the image from your computer and it will be placed atop the preview. Your chosen image will anchor at the bottom left corner of the screen. You can then adjust the opacity of the overlay and begin fine-tuning your layout to match the mock-up.
The Normal View and Loupe View refresh at regular intervals (5 seconds by default), but the Explorer View does not. If you navigate away and focus on a different View, then you should refresh the Explorer's hierarchy by clicking Load View Hierarchy. This is even true when you're working in a window that holds multiple Views that are not always visible. If you do not, although the previews will refresh, clicking a View in the Explorer will not provide the proper layout box in the Normal View, because the hierarchy believes you are still focused on the prior View.
Optional controls include:
• Overlay: Load an overlay image onto the view and adjust its opacity.
• Refresh Rate: Adjust how often the Normal and Loupe View refresh their display.
• Zoom: Adjust the zoom level of the Loupe View.
Was this article helpful?