Grid
Consider the document Properties dialog from Internet Explorer shown in Figure 3-8. Notice how the main area of the form is arranged as two columns. The column on the left contains labels, and the column in the middle contains information.

Figure 3-8. Document Properties dialog
Achieving this kind of layout with any of the panels we've looked
at so far is difficult, because they are not designed with
two-dimensional alignment in mind. We could try to use nesting—Example 3-6 shows a vertical StackPanel with three rows, each with a
horizontal StackPanel.
Example 3-6. Ineffective use of StackPanel
<StackPanel Orientation="Vertical" Background="Beige">
<StackPanel Orientation="Horizontal">
<TextBlock>Protocol:</TextBlock>
<TextBlock>HyperText Transfer Protocol</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock>Type:</TextBlock>
<TextBlock>HTML Document</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock>Connection:</TextBlock>
<TextBlock>Not Encrypted</TextBlock>
</StackPanel>
</StackPanel>The result, shown in Figure 3-9, is not what we want at all. Each row has been arranged independently, so we don't get the two columns we were hoping for.

Figure 3-9. Inappropriate use of StackPanel
The Grid panel solves this problem. Rather than working a ...