Windows Phone 7 ( WP7 ): Panorama con una Lista Horizontal

Hola. Éste es mi primer artículo sobre desarrollo de aplicaciones para Windows Phone 7 (WP7). 

En esta ocasión quiero contaros cómo mostrar una lista (ListBox) horizontal.

Escenario:

Queremos crear una aplicación que muestre una lista con los elementos dispuestos horizontalmente como muestra la imagen.

Solución:

La solución la encontré gracias al control “WrapPanel” del Toolkit para WP7.

<controls:PanoramaItem Width="960" Orientation="Horizontal">

    <StackPanel Margin="0,0,0,8">

        <ListBox x:Name="listHorizontal" ItemsSource="{Binding Items}" Margin="0" Height="460" BorderThickness="0" VerticalAlignment="Top">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <toolkit:WrapPanel />

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Border Margin="5" Width="220" Height="220" BorderBrush="Azure" BorderThickness="2">

                        <Button Template="{StaticResource myButtomTemplate}" />

                    </Border>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </StackPanel>

</controls:PanoramaItem>

Como se puede apreciar, para mostrar el elemento, he usado un “Button” al que le asigno una plantilla.

<ControlTemplate x:Key="myButtonTemplate" TargetType="Button">

    <Grid Width="220" Height="220" Background="#4CFFFFFF">

        <TextBlock Margin="5,5,49,0" TextWrapping="NoWrap" Text="{Binding LineOne}" VerticalAlignment="Top" FontFamily="Segoe WP Semibold" Foreground="White" FontWeight="Bold" FontSize="26.667" />

    </Grid>

</ControlTemplate>

Explicación:

El código es bastante sencillo:

1. Creo un PanoramaItem dentro del Panorama con Orientation=”Horizontal” y un ancho correspondiente a los elementos que quiero mostrar, en este caso, quiero mostrar 8 elementos de «220» de ancho y unos márgenes entre ellos de «5», es por ello que establezco el ancho del PanoramaItem a «960»
2. Pongo, como contenedor,  un StackPanel.
3. Dentro del StackPanel, pongo el ListBox y lo enlazo con los datos de prueba que vienen por defecto al crear el proyecto “Aplicación Panorama para Windows Phone”
4. Defino la propiedad ListBox.ItemsPanel y a la plantilla que se le asigna, le incluyo el control toolkit:WrapPanel
5. En la propiedad ListBox.ItemTemplate, establezco el DataTemplate, en el que incluyo un control Border y, dentro de él nuestro Button con la plantilla correspondiente.
6. En la platilla del Button, únicamente defino un Grid para posicionar un TextBlock que está enlazado con el campo LineOne correspondiente al Binding realizado en el ListBox.