Sample Overview

The WrapPanel sample is located within the ControlExamples/WindowsPhoneToolkit/WrapPanel directory in the WPUnleashed.Examples project in the downloadable sample code.

The WrapPanelView.xaml presents two WrapPanels, one with the default horizontal orientation, the other with a vertical orientation. Each WrapPanel contains five TextBox child elements, as shown in the following excerpt:

Click here to view code image

<StackPanel x:Name="ContentPanel" Grid.Row="1">
    <TextBlock Text="horizontal wrap panel"
        Style="{StaticResource LabelTextIndentedStyle}" />
    <toolkit:WrapPanel ItemHeight="120" ItemWidth="120" Height="280"
            Background="DimGray">
        <TextBox Text="1" Background="Blue"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="2" Background="Red"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="3" Background="Orange"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="4" Background="Purple"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="5" Background="Green"
            Style="{StaticResource WrapPanelItem}" />
    </toolkit:WrapPanel>

    <TextBlock Text="vertical wrap panel"
        Style="{StaticResource LabelTextIndentedStyle}"
        Margin="12,30,0,0"/>
    <toolkit:WrapPanel Orientation="Vertical"
            ItemHeight="120" ItemWidth="120" Height="280"
            Background="DimGray">
        <TextBox Text="1" Background="Blue"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="2" Background="Red"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="3" Background="Orange"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="4" Background="Purple"
            Style="{StaticResource WrapPanelItem}" />
        <TextBox Text="5" Background="Green"
            Style="{StaticResource WrapPanelItem}" />
    </toolkit:WrapPanel>
</StackPanel>

Each TextBox is presented using a custom ControlTemplate, which places the TextBox.Text in a TextBlock. A TextBox was chosen because it allows you to create a template binding to its Text property. See the following excerpt:

Click here to view code image

<phone:PhoneApplicationPage.Resources>
    <Style x:Name="WrapPanelItem" TargetType="TextBox">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="100" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Border Background="{TemplateBinding Background}">
                        <TextBlock Text="{TemplateBinding Text}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        FontSize="50"
                        Foreground="White" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

Each TextBox is presented as a TextBlock wrapped in a Border. The horizontal wrap panel illustrates how the child elements are displayed from left to right, and the vertical wrap panel illustrates the vertical layout (see Figure 9.25).

FIGURE 9.25 A vertical and horizontal WrapPanel.