7. WrapPanel Control
The WrapPanel
control works very similarly to the same named control available in the
desktop Silverlight toolkit. It arranges child items left to right, row
by row or top to bottom, column by column. Figure 7 shows the UI.
The WrapPanel control has a Children
collection that allows you to add child items to the control via code,
which is how the toolkit sample adds items. There may be situations in
which you prefer to data bind to an ItemSource property and an ItemTemplate, like you can in the ListBox control.
You can use an ItemsControl to provide this functionality by changing the ItemsControl.ItemsPanel to a WrapPanel. Otherwise, data binding works just like with a ListBox. Here is the XAML markup:
<ItemsControl ItemsSource="{Binding Strings}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="69"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="60" Height="60" Margin="4">
<Rectangle Fill="#FF2A2AC8" Stroke="Black"/>
<TextBlock
Text="{Binding Text}" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The WrapPanelDataBinding project has a sample data source generated in
Expression Blend to display random text over rectangles. The ItemsControl.ItemsSource points to the Strings collection in the sample data source. Figure 8 shows the output.
A control that we won't dive into here is the PerformanceProgressBar
control, which was added to the toolkit in February 2011. Using the
control is pretty straightforward, as it models the functionality of the
built-in Progressbar control. I mention it because you will want to use the toolkit PerformanceProgressBar to improve rendering performance in your Silverlight or Windows Phone applications.
