{"id":510,"date":"2015-08-24T20:16:00","date_gmt":"2015-08-24T20:16:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=510"},"modified":"2025-02-26T08:45:01","modified_gmt":"2025-02-26T08:45:01","slug":"docking-properties-panel","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/docking-properties-panel","title":{"rendered":"Docking Properties Panel and Revisiting UI Guides"},"content":{"rendered":"\n

One of our design goals is to provide a distraction-free design time experience. As part of this, we try to reveal functionality depending on where you are in the design flow and in context.<\/p>\n\n\n\n

In this update we revisited the properties panel and UI guides.\u00a0<\/p>\n\n\n\n

Docking the Properties Panel<\/h2>\n\n\n\n

For rapid prototyping showing the properties panel near the selected element made it easy to understand what to do next. This is especially useful for new users of the application. However, when you have a lot of UI elements or a complex screen, some may prefer to have the properties panel in a fixed location.<\/p>\n\n\n\n

\"Docking<\/figure>\n\n\n\n

<\/p>\n\n\n\n

You can now dock\/pin the properties panel to the right of the design surface, so that it\u2019s integrated with the toolbox. When docked, this panel will share the space with the other toolbox items (i.e., UI elements, screenparts). You can make the PE taller using the splitter or double click the splitter to fit.<\/p>\n\n\n\n

Rulers & Guides Revisited<\/h2>\n\n\n\n

In our first version of rulers & guides, they were part of the design canvas. Over time we realized that there was a higher chance of accidentally adding guides. Our earlier suggestion was to hide the guides if you are to using it (cmd\/Ctrl + L). Nevertheless, we have reworked rulers & guides by moving them to edges of the design surface, away from the canvas.<\/p>\n\n\n\n

\"adding<\/figure>\n\n\n\n

You can add a new guide by either clicking in the ruler area or by using the click + drag action. The click + drag action is new in this update and should be familiar to folks using other design tools. You can still double click on a guide to type in a precise value.<\/p>\n\n\n\n

We also added new snap indicators to communicate when a guide meets a UI element.<\/p>\n\n\n\n

Other Changes to the Design Surface<\/h2>\n\n\n\n