Programming WPF, 2nd Edition

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 ...