martes, 26 de junio de 2012

Como usar ListPicker en Windows Phone

ComboBox no existe para las aplicaciones móviles de Windows Phone debido a que no va bien con el estilo metro, por tal razón cuentan con ListPicker la cual hace lo mismo que el ComboBox pero respetando el estilo metro de las aplicaciones WP.

Para usar ListPicker primero debemos descargar e instalar Silverlight ToolKit, la cual agrega este y otros controles a la ToolBox de Visual Studio. Silverlight ToolKit se descarga de http://silverlight.codeplex.com

Ahora que tenemos el control instalado, veremos como se usa mediante el código en xaml. 

<toolkit:ListPicker x:Name="ListaBanda1" Header="Banda 1" FullModeHeader="Banda 1" CacheMode="BitmapCache" Margin="18,-9,6,33" Grid.RowSpan="2">
                <toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                             <Rectangle Fill="{Binding}" Width="43" Height="43"/>
                            <TextBlock Text="{Binding}" Margin="16 0 0 0" FontSize="43"
                             FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.FullModeItemTemplate>
            </toolkit:ListPicker>


ListPicker tiene un caracteristica y es que no se puede agregar mas de 5 elementos mediante código xaml, para solucionar esto se puede declarar en código c# una variable de tipo array que especifique los elementos a agregar en el ListPicker de la siguiente manera: 
string[] banda1 = { "Marrón", "Rojo", "Naranja", "Amarillo", "Verde", "Azul", "Violeta",
                   "Gris", "Blanco" };
ListaBanda1.ItemsSource = banda1;

Con lo anterior, obtendremos:


Si se presiona el ListPicker:


Cuando el Listpicker contiene menos de 5 elementos se verá de la siguiente forma cuando se presiona:


Espero les sea de ayuda. Saludos!


1 comentario:

  1. Yo no se tu pero si yo hago esto, no puedo seleccionar las ultimas 2 entradas (gris o blanco)
    parece que no tiene un scrollbar

    ResponderEliminar