ListBox in Popup WP7

Question

I'm trying to create a custom popup for search suggestions/history for a Windows Phone 7 app but I've run into a couple of probs I can't fix.

I'm using a ListBox in the popup to display my results but,

a) My items are not displaying correctly, it's listing the items starting from -1 position??? in the ListBox but when selected they give the value from the one below.

b) In my page I have a ListBox which shows search results and my popup suggestions is shown over this ListBox (below as TextBox) and when I scroll/select suggestions the ListBox underneath is scrolled and items are selected.

Does anyone know of a workaround or fix please?

Heres my (simplified) code:

<Popup Name="AutoCompleteList">
    <Border Background="White" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center">
        <ListBox x:Name="ListItems" HorizontalAlignment="Left" Height="Auto">
            <ListBoxItem>
                <TextBlock Text="Test1" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test2" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test3" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test4" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test5" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test6" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test7" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test8" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test9" Foreground="Black" />
            </ListBoxItem>
            <ListBoxItem>
                <TextBlock Text="Test10" Foreground="Black" />
            </ListBoxItem>
        </ListBox>
    </Border>
</Popup>

Thanks.

Answer 1

a) The ListBox initial SelectedIndex is always -1

b) Sounds like intended behaviour. Impossible to say without the rest of your code.

However if you want a AutoCompleteBox, you should use the AutoCompleteBox from the Silverlight Toolkit . You can read a bit about it here

Answer 2

I found my problems.

a) I was using wp7 toolkit's turnstile transition effect for fancy navigation in the page that hosts my UserControl and this was affecting the visuals of the ListBox in the Popup:

    <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

b) I was using a toolkit(again):LongListSelector as a ListBox for search results and this control was stealing mouse actions from the Popup floating above it but using the standard ListBox control works perfectly.

Doh!