Tag: Grid

Learn WPF: Part 3 of 9: Layouts in Windows Presentation Foundation

June 10, 2012 by Abhi·Comments Off

Hey guys,

As you would all know that the building blocks of an application are controls but you need to know the layouts as well to know where and how you can place these controls? So we are going to talk about the layout panels in WPF, what are the common layout properties that are offered by WPF and we would also have a look on how to create a navigation application in WPF.

Before we go into what layout panels do WPF has to offer we need to have a look how the layout processing happens in WPF. Now it is obvious that WPF will redo the layout when the applications starts or when something changes on the layout. The layout occurs in two phases: measure and arrange.

In the measure phase WPF walks through the each element in the tree and finds out as how large each element would like to be by calling the method Measure() on each element and it also tries to provide the information as to how much space is likely to available. There are two types of layouts that gets formed: Constrained (when WPF is able to make a good guess of the space that might be available) and unconstrained (When WPF does not have a fair idea of the layout space available). Now elements are not supposed to ask about the space during the measure phase so they just return the preferred size. Also in the unconstrained phase where the size passed is infinity the elements are supposed to return the exact size they require. This sometimes also known as Size To Content.

In the arrange phase WPF calls the arrange method on each element as it now know how much space each element requires. WPF tries to accommodate each elements requirement and if the space provided is less than the controls asked then the controls will be scaled accordingly. But if the element is asking for impossible space then the elements will be cropped.

Declarative Layout

WPF wants us to specify what our requirements are and then in the background WPF does all the work to arrange the resources for it. The best part of it is that it is declarative and can be defined entirely in xaml which can be of course customized as well.

WPF layouts also have the special facilities like automatic resizing according to the space available for the layouts. It also supports dynamic changes that are made to the WPF applications like adaptations to data changes at runtime or locale changes at runtime.

Some of the common layout properties provided by all the layout controls in WPF as Margin, Padding, Horizontal Alignment, Vertical Alignment, Min/Max Width, Min/Max Height, Width, Height. These provide the consistency in the layouts in WPF.

Margin

The margin property helps us determine how much place is there around the space around the edges. Means if you do not want the control to take lesser space then it has been allocated to it so that it does just stick its border along with other controls you could use the margin.

We could specify the Margin as a single value and control will have uniform outer space around it. The unit for the margin is device independent pixels.

Margin in WPF

This means that the unit is 1/96^th of an inch. So if the margin is specified as 96 pixels then the control will have a space of 1inch around it in theory but in actual this would happen if windows know the resolution of its output device, which is not the case in most cases as most of the windows pc end up in default configuration. If windows does not know the resolution then it will guesses it 96 for 1 inch across. But if windows is using large font sizes then the windows will guess that 120 pixels for 1 inch of the space. So now the WPF unit will be a little larger than the normal pixel. So this is confusing.

We could also specify the Left and Top margin or you could specify the left, top, right and bottom margin specifically.

Margin in WPF

Padding

The Padding property is similar to margin. As margin specifies the pace outside the control padding specifies the space between the border and content of the control. Padding is not available for all elements as it makes sense for controls that have content. Just like margin padding can be specified as a single number, left and top or explicitly for each left, top, right and bottom.

Alignment

Alignment comes into the picture when the space available for the control is more than required. We can specify the Vertical Alignment or Horizontal Alignment.

The default value of Vertical and Horizontal alignment is stretch. So if we specify the horizontal and vertical alignments other than stretch then the control would size to its content depending on the alignments specified.

Content Alignment

Horizontal and Vertical alignments specify how the controls uses the space provided by its container but Horizontal Content Alignment and Vertical Content Alignment determines how the content would align within the control. Horizontal Content Alignment and Vertical Content Alignment have the same values as Horizontal Alignment and Vertical Alignment and behave quite similarly. The only difference is that it aligns the content instead of the control.

Explicit Height and Width

Most of the times the constrained or the unconstrained size provided to the element do not match your requirements so you could specify the explicit height and width for the control. If you do not want to specify the fixed width and height of then you specify the range by specifying the MinWidth and MinHeight and MaxWidth and MaxHeight.

Grid

WPF provides multiple styles of placing the controls by proving the multiple layout panels. The most flexible of these layouts is the grid. It derives from the panels and provides a row and column layout for placing the controls. For a constrained layouts we could provide the row and column to have autosize or for an unconstrained layout we can specify the specific row or column size values or have a proportional values.

Grid in WPF

You could see multiple things in the image above. The use of attached forperties in Button.

The Rows and columns are specified and the rows and columns are sized equally as we not specified any specific size which could be done by specifying the values.

We could also specify the specific height or width of a button and the grid row or columns will be resized accordingly if the space is available for the grid to incorporate the individual requirements for the controls.

Grid in WPF

We could also set the margin properties and see the effect of these properties within the grid.

Grid in WPF

You could see the star (*) values used for the height which is relative sizing use. We can have multiple elements in a grid and also elements can span multiple rows or columns. Grid is the default layout element when you create a new vs project.

GridSplitter

You can add a grid splitter to a cell and set the direction and it will resize the columns and rows when dragged.

DockPanel, StackPanel and WrapPanel

WPF also provides DockPanel, WrapPAnel and StcakPanel as a simpler layout panels to work with. There property values are shown in the image below:

A StackPanel provides horizontal or vertical stacking of elements whereas a dockpanel provides the alignment as Top, Bottom, Left, Fill and Right and a WrapPanel provides the stacking of elements from left to right and then to new line when the line space is finished.

Canvas

Canvas is the simplest panels. It just places the elements where to tell it to i.e. absolute positioning and will cause the elements to Size to Content. The positions are specified using the Canvas attached properties Top and Right. It can be used at places where you have something like drawing a which you do not want to resize.

ScrollViewer

Another layout control is ScrollViewer. It is not a Panel. It is a Content Control which allows putting control that won’t fit the screen. The Scroll Viewer performs an unconstraint layout and tells the control that it has as much space as it asked for. But this not the actual space, it is the virtual space and the scroll viewer performs the clip and translate transform to show the view of the content. The child does not need to know that it is being scrolled. It is sometimes useful use the scrolls. If you do not want to load the full virtual space initially as it might not be as Performatic. So if you want the control to participate in the scrolling process then if the child element inside the ScrollViewer implements IScrollInfo then the scrollviewer will stop pretending that virtual space is unlimited and will give the control to element for controlling the scrolling.

ViewBox

Like scrollviewer viewbox provides solution fit in content inside a constrained space. But unlike scrollviewer ViewBox scales the content to fit the ViewBox. ViewBox does this for any kind of content like vector graphics, bitmaps or WPF controls.

As you could see in the image below, the Canvas has fixed Width and Height. The reason is that the ViewBox needs to know whats the size of the content so that it can scale and resize it accordingly.

ViewBox in WPF

This works till do not set a stretch property on the ViewBox as it will start adding other behaviors in the ViewBox.

Windows

Window is the main compoanent of any WPF application. It is a Content Control. You can multiple styles in the Window like chrome, borderless or transparent.

There is also the Popup class that is used in Menus, DropDowns and ComboBox. It is also a content Control and can be put custom use.

The third type of Window is Navigation Window and it is slightly different form other windows. The model is quite similar to a web browser i.e. it can be used for navigation from one Page to another as it is built using the Page Class. It has back and forward buttons for navigation. If the Navigation application does not have a Window then the WPF will create the host window and host the page there and provide the navigation controls.

Windows in WPF

A frame in WPF is a control that will host the pages and provide the nested navigation area.

The code for this post can be downloaded here
Any questions, feedback and comments are most welcome.

Tutorial : Microsoft Expression Design – Grid, Guides and Points

December 13, 2011 by Abhi·Comments Off

Hey Guys,

I am back with the 4th tutorial on MS Expression Design and in this one we will cover the concepts of Grid, Guides and Points. Hope you have gone through my previous tutorials on MS Expresssion Design Tutorial : Microsoft Expression Design Basics, Tutorial : Microsoft Expression Design – Working with Panels and Tutorial : Microsoft Expression Design Zooming and Scrolling. Any questions you have are most welcome so with that positive thought lets start off with this session.

So if you are a designer then you would definetly know that for a good design you need to align objects to the document grid and to rular grid. Now Expression design provides a feature called Snap to Points and it allows you to align objects based on the position of each objects’s bounding box nodes.

Showing and Hiding the Grid in the Document

The document grid is a very useful tool for aligning objects precisely in your artwork. The objects that you create can be snapped to grid and for the same you need to make the grid visible.

Choosing the Show Grid Command

To display/hide the document grid you need to choose Show from the View menu and point to the Grid.

ShowGrid

Note – Press Ctrl + ‘ to toggle visibility for the document grid. The Show Grid command only affects the currently active document. When multiple documents are open, the Show Grid command only toggles grid visibility for the document you are currently working in.

Changing the Grid Size

Grid size options are accessible via the Units and Grids pane of the Option dialog box. This setting determines the size of each square in the document grid, allowing you to customize the overall size of the grid to meet the alignment needs of your project.

Under the Edit menu, point to Options and choose Units and Grids.

Units and Grids

Note – Press Ctrl + K to quickly access the Options dialog box. Select Units and Grids from the menu on the left.

Select Grid Size

Set the Grid Size field. The Grid Size option uses the same measurement unit as the Document Units option. In the Units and Grids pane of the Options dialog box, the measurement unit that you choose in the Document Units field determines what measurement unit is displayed in the neighboring Grid Size field.

Using the Grid as a Drawing Guide

As you draw shapes and paths in Expression Design, you can refer to the document grid to ensure that certain objects are aligned evenly, such as custom interface controls or website navigation buttons. After the objects are aligned, you can always toggle the grid’s visibility on or off, should the overlying pattern become too distracting to work with.

To display the document grid, choose Show from the View menu and point to Grid . Whenever you make the grid visible, Expression Design displays a check mark next to the word Grid in the submenu. As you create shapes and paths using the various drawing tools, you can use the document grid to align their positions on the artboard. To preview your artwork without displaying the overlying document grid, choose Grid from the Show submenu, or apply the keyboard shortcut of Ctrl+’.

Snapping to the Grid When Drawing

An even more precise way to align objects as you draw them is to snap to the document grid. This technique allows you to align the position of each line, point, or shape precisely on the artboard as you use the various drawing tools in Expression Design.

To display the document grid, choose Show from the View menu and point to Grid .Then Under the View menu, choose Snap to Grid. Expression Design displays a check mark next to the menu command whenever it is enabled.

SnappingToGridLines

If you click or drag close enough to any gridline with the various drawing tools (such as the Pen or Rectangle), the individual points (or lines) snap into position. Snapping to the grid allows you to align the position of each line, point, or shape precisely on the artboard.

Snapping to the Grid When Moving Objects

You might find it easier to align objects to the document grid after they’ve been drawn. One of the benefits to working this way is that you can snap objects to the grid while it is hidden, thereby eliminating the need to display the checkerboard overlay pattern. When guide snaps are enabled, you can move objects on the artboard and refer to the intersection markers that are displayed over any bounding box points that intersect with the grid.

To display the document grid, choose Show from the View menu and point to Grid . Then, Under the View menu, choose Snap to Grid. Expression Design displays a check mark next to the menu command whenever it is enabled.

Press V to access the Selection tool and click and drag an object in any direction to reposition it. When you drag close enough to a gridline, the object automatically snaps into position.

As you click and drag, Expression Design displays red intersection markers over any points that come in contact with the grid.

Adding Ruler Guides

When it comes to aligning objects, some designers prefer to use ruler guides as opposed to the document grid. This is because ruler guides can be positioned wherever you like on the artboard, whereas the document grid’s position is limited to the settings assigned in the Units and Grids pane of the Options dialog box.

To set ruler hover over the ruler area and click and hold down the mouse button, the cursor will change to display a double side arrow then drag out a guide from the rulker area onto the artboard and then release the mouse after postioning the guide.

Ruler GuidesRuler Guides

Ruler guides always extend past the edges of the artboard. All ruler guides extend into the pasteboard area surrounding the artboard. Ruler guides automatically rotate with the artboard. Unlike the document grid, if you rotate the artboard using the Rotate View commands, the ruler guides also rotate. Ruler guides are not layer specific. Unlike objects, ruler guides are not positioned within a layer; therefore, they are not affected by assigned layer color or the Layers panel visibility controls. Ruler guides are not printable. The ruler guides can only be viewed onscreen as you work in Expression Design. They will not print or export with the artwork.

Showing and Hiding Guides

The more guides you add to your document, the more distracting they can become. That’s why the best way to work with ruler guides is to display them onscreen only when you need them. Thankfully, Expression Design makes it easy to control guide visibility through the use of menu commands, keyboard shortcuts, and contextual menus.

To display ruler guides, choose Show from the View menu and point to Guides . Whenever you make the guides visible, Expression Design displays a check mark next to the word Guides in the submenu.

Show Hide Guides

Note – You can use Ctrl +; to toggle visibility of ruler guides.

You can also access the Show Guides command from the contextual menu. To access the Show Guides command from the contextual menu, make sure you have no objects selected, and then right-click anywhere in the document and choose Show Guides.

Snapping to Guides

Snapping objects to ruler guides allows you to align objects precisely on the artboard. The benefit to snapping to ruler guides as opposed to the grid is that you can place guides and reposition them wherever you like on the artboard—even at an angle—whereas the document grid always remains static.

To snap to guides under the View menu Choose Snap to Guides.

Snap To Grid

Note – You can also press Ctrl + Shift + ; to toggle Snap to Guides command on and off.

Press V to access the Selection tool and click and drag an object in any direction. When you drag close enough to a guide, the object automatically snaps to it.

The ruler guides change color when guide snaps are enabled. When the Snap to Guides option is enabled, the ruler guides appear blue; when the option is disabled, the guides appear gray. Intersection markers are displayed when snapping to guides. Expression Design displays intersection markers over any bounding box points that come in contact with the ruler guides. However, unlike the document grid, the guides must be visible for the intersection markers to appear.

Repositioning Guides

Once you drag a ruler guide onto the artboard and release the mouse button, it remains in place and cannot be selected or moved with any of the selection tools. Expression Design purposely locks the guides to prevent you from accidentally selecting and moving them as you transform objects in your artwork. However, it is possible to reposition guides. To do so, you must hold down the Alt key while you click and drag the guide.

Removing Guides

Ruler guides can be removed from a document just as easily as they can be added. All you need to do is Alt+click while you drag each guide back into the respective horizontal or vertical ruler area where you originally pulled them from.

You can only move or delete one guide at a time. Expression Design does not allow you to select and move multiple guides at once. There is also currently no command for clearing all ruler guides from the document.

Making and Releasing Guides

Expression Design also allows you to convert existing shapes or paths into guides. These types of guides can be used to indicate specific areas of a design where certain objects, such as text, should be positioned. You can also revert these guides back into editable shapes once the guides are no longer needed.

1. Use the various drawing tools, such as the Pen or Rectangle, to create a shape or path. After it is drawn, be sure not to deselect it.

2. To make a guide out of the selected shape or path, choose Guide from the Object menu and choose Make.

3. To revert the made guide back into an editable shape or path, choose Guide from the Object menu and point to Release.

Note – Press Ctrl+5 to apply the Make command quickly. The Release command reverts all made guides back into editable shapes. It is currently not possible to select and release individual guides created from shapes or paths.

Snapping to Points

In addition to aligning objects to the document grid and to ruler guides, you can also align objects to each other using the Snap to Points feature. When you enable this option, any objects that you move around on the artboard automatically snap to the bounding box nodes of a neighboring shape or path.

1. Use the various drawing tools, such as the Pen or Rectangle, to create some shapes and/or paths.

2. Under the View menu, choose Snap to Points. Expression Design displays a check mark next to the menu command whenever it is enabled.

Snap To Points

Note – Press Ctrl+Alt+’ to toggle the Snap to Points command on and off.

3. Press V to access the Selection tool and click and drag one of the shapes or paths in any direction. When you drag close enough to one of the bounding box selection points for a neighboring object (not the points that make up the path), the object automatically snaps to it.

4. As you click and drag, Expression Design displays red intersection markers over any points that come in contact with the grid.

Any kind of feedback or comments are most welcome.