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:
<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:
<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).
18.218.151.44