Search code examples
windowssilverlightwindows-phone-7silverlight-4.0windows-phone-7.1

Windows phone7 ListPicker


In my windows phone7 application I have to Use a control something similar to a dropdown list control. So I came across the ListPicker that come up with the WP7 toolkit assembly.

The problem I've got is, it overlaps with the other elements in the page. Following is a screenshot of the interface.

enter image description here

When I click the ListPicker, it expands the list and allow me to select one item out of that. But when I select an item it clicks the button which appears just below to that. I can do ExpansionMode="FullScreenOnly" but it will go for full screen mode and since the list picker has only 3 items its not the way I want.

Does anyone know any way that I can let the ListPicker expand and select one out of it without occurring the button click which resides below it.

Edits

I have installed WP7 Tool kit for Silverlight and added the dll in to the project as a reference Microsoft.Phone.Controls.Toolkit

XAML--->

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"


<toolkit:ListPicker Name="listPicker1"/>

Solution

  • I suspect you are using a Canvas to layout your controls. If you use a Grid, then the ListPicker will work nicely (automatically shift the controls below it while the list is expanded) with any other controls that you place underneath :-

            <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <toolkit:ListPicker x:Name="MyListPicker"
                                Grid.Row="0">
                <toolkit:ListPicker.Items>
                    <toolkit:ListPickerItem Content="item1" />
                    <toolkit:ListPickerItem Content="item2" />
                    <toolkit:ListPickerItem Content="item3" />
                </toolkit:ListPicker.Items>
            </toolkit:ListPicker>
            <Button x:Name="MyButton"
                    Content="Check availability"
                    Click="MyButton_Click" Grid.Row="1"/>
        </Grid>