This article has a corresponding video that can be viewed here.
In a typical Windows Forms application control placement is set using the Location property, setting the X and Y sub property values. The Windows Forms designer provides a complete set of tools for aligning and sizing controls.
The WPF and Silverlight platforms are different in both available tooling and layout options.
This article will demonstrate some form layout techniques to help Windows Forms developer's make the transition to WPF or Silverlight.
We'll first lay the form out using the same familiar techniques you're used to in Windows Forms; then we'll create the form using a typical WPF & Silverlight workflow.
Please read the WPF & Silverlight Layout Controls topic.
This simple Windows Forms dialog took about 90 seconds to layout. The Windows Forms designer provided excellent layout adorners to assist in aligning the controls. The Properties Window was utilized to set control anchoring and enter the Label and Button text.
This simple WPF dialog took about 90 seconds to layout. The designer provided excellent layout adorners to assist in aligning and set anchoring on the controls. The Properties Window was utilized to enter the Label and Button text.
Now that we see creating a form in WPF or Silverlight is very similar to the Windows Forms experience, let's look at how WPF or Silverlight easily enables making the above form a two column form. The two column form we will create will resize when the Window is resized.
Before proceeding, think about the steps you would follow using the Windows Forms platform to accomplish the task.
The Windows Forms Designer persists changes to a hidden code-behind file. The WPF and Silverlight Designer persists changes to XAML. To view the created XAML you can click on the XAML View Button. The XAML View and Design View buttons are located at the bottom of the Visual Studio tab you have been working with.
If your XAML is not currently visible, click the XAML View button.
Your XAML should look similar to the below image.
What I want to point out is the second element in the XAML, the Grid.
The entire time we have been adding controls to the form, we have actually been adding them as a child of the Grid control. The Grid is one of the available layout panels.
When the Grid has no rows or columns defined, it's effectively a single cell grid, positioning its child controls using Margin, HorizontalAlignment and VerticalAlignment properties. In similar fashion, Windows Forms uses Location and Anchor properties.
I've show the Grid control here because in the next step we will being working with it.
In WPF or Silverlight the simple steps to create a two column form are:
The purpose of the article is to help Windows Forms developer's make the transition to WPF or Silverlight. In the above walk-through we guided you through creating a WPF or Silverlight form using familiar form design techniques you used in Windows Forms.
Now that you have an understanding of control placement and some Grid concepts, let's walk-through building a content based layout form. This type of form is still very easy to build, it leverages more features of the Grid control and providing a layout that conforms to content as the size of that content changes at design or run-time; for example a globalized application when a different language is being used.
Again, in this next section we'll demonstrate how to easily create a form that uses content base layout instead of absolute positioning while at the same time leveraging layout techniques that are familiar to you.
The strategy of this technique is to quickly layout, name and set the text values for your controls. When dragging a control from the ToolBox we are only concerned with positioning the control near where you want it. From the below image you can see I've paid very little attention to size or positioning.
We will now use the Grid SharedSizeScope feature you learned about in the WPF & Silverlight Layout Controls article.
This feature enables us to ensure that the Button controls will be the same size, even if the text of one button is shorter/longer than the other Button.
What is the above degenerate area?
The degenerate area (or degenerate zone) is an area of the Grid that remains after the last column or row.
The above Grid is 300px wide, but its two columns are Auto sized only taking up about 110px total; the remaining 190px area is the degenerate area.
Notice the top Grid Rail Adorner for the degenerate area does not have a number on it. This is because there really is no column there. The missing number on a Grid Rail Adorner for a row or column is a visual indicator that that row or column does not exists.
The reason we right aligned the above Grid is to anchor the Grid (and the child buttons) to the right edge of the form. If the form is resized, the Grid will stay anchored to the right edge.
This is an auto sized form. Notice when you resize the forms width, the TextBoxes resize with the form.
At your option, you could set a fixed width for the TextBoxes.
At your option you could also set the MinWidth property on the Window or TextBoxes to prevent the user from resizing the dialog too small.
In this short article we have learned that:
Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:
Thank you for your feedback and have a great day,
Karl Shifflett Expression Team
Very nice post!
I don't think that the layout issues scares the Windows developers. It's the data binding which terrifies them.
Thank you for your feedback on data binding. Do you have any specifics you can relay or is it just data binding in general?
Thank you and have a super day,
Excellent video post. Thanks for this.
Thank you for leaving a comment and glad you liked the post and video.