11. WrapPanel Layout Container
The last XAML element included in the toolkit is a new layout container called the WrapPanel. This element is not a control but a layout container (for example, Grid, StackPanel). The purpose of the WrapPanel
is to lay out elements left to right, and when they don’t fit
horizontally, it wraps them onto a new line. For example, if you place
nine buttons in a StackPanel like so:
<StackPanel>
<Button Content="1" />
<Button Content="2" />
<Button Content="3" />
<Button Content="4" />
<Button Content="5" />
<Button Content="6" />
<Button Content="7" />
<Button Content="8" />
<Button Content="9" />
</StackPanel>
the StackPanel will simply stack them vertically, as shown in Figure 20.
FIGURE 20 Buttons in a StackPanel
But if you change the XAML to replace the StackPanel with a WrapPanel, like so:
<toolkit:WrapPanel>
<Button Content="1" />
<Button Content="2" />
<Button Content="3" />
<Button Content="4" />
<Button Content="5" />
<Button Content="6" />
<Button Content="7" />
<Button Content="8" />
<Button Content="9" />
</toolkit:WrapPanel>
the WrapPanel will stack the items horizontally and then wrap to a “new line” when the items no longer fit, as shown in Figure 21.
FIGURE 21 Buttons in a WrapPanel
You can also change the Orientation attribute to Vertical to have the control stack vertically:
<toolkit:WrapPanel Orientation="Vertical">
<Button Content="1" />
<Button Content="2" />
<Button Content="3" />
<Button Content="4" />
<Button Content="5" />
<Button Content="6" />
<Button Content="7" />
<Button Content="8" />
<Button Content="9" />
</toolkit:WrapPanel>
This is shown in Figure 22.
FIGURE 22 Buttons in a vertical WrapPanel
