ListPicker text obscured by other text on Windows Phone 7

Question

I am using the ListPicker from the Windows Phone Toolkit. It is setup very basically, but for some reason, the items in the popup are always obscured by anything below them, like this:

Here, the text “jburchel” was beneath the ListPicker, and _http://science.nasa.gov/me Was a ListPickerItem. You can see how the underlying text box appears normally but the ListPickerItem is below. I tried changing the order on the XAML of the ListPicker and TextBlock, but it didn't help. I have tried lots of combinations of settings, messed around with the template, but this has persisted. Does anybody know this problem?

Here is an example of ListPicker XAML I use. It is extremely basic.

           <toolkit:ListPicker HorizontalAlignment="Left" Margin="24,41,0,0" Name="txtUrl" 
                  VerticalAlignment="Top" Width="434" Cursor="IBeam">
            <toolkit:ListPickerItem Content="http://rss.cnn.com/services/podcasting/studentnews/rss"/>
            <toolkit:ListPickerItem Content="http://science.nasa.gov/media/medialibrary/2010/10/28/podcast.xml"/>
            <toolkit:ListPickerItem Content="http://www.sciencemag.org/rss/podcast.xml"/>
        </toolkit:ListPicker>
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="33,19,0,0" Name="textBlock1" Text="Podcast URL:" VerticalAlignment="Top" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="15,141,0,0" Name="txtUser" Text="jburchel" VerticalAlignment="Top" Width="460" />

Answer 1

The problem seems to be (though can't say for sure without more XAML) that you're laying out your controls using the Margin to position elements. As you've just found out, this isn't necesarily the best approach to take. Silverlight has a wide range of layout containers that help you lay out your controls without requiring you to manually position each element.

In this instance, it seems that you might be positioning controls vertically stacked above each other, for which you can use the StackPanel container. You simply add each child element to the StackPanel and it handles layout them out on top of each other. Once you've done this, because the next element is always below the ListPicker, when the ListPicker expands, the elements below it are pushed down.

For more complex layouts you can use the Grid container (which is almost certainly the current parent container of your controls), but you should use rows and columns to ensure that elements don't "bleed" into each other. Note: The flexibility of the Grid element comes at a price and you shoudl carefully consider whether you need to use it or whether you can use a simpler container, especially for repeated containers in lists, for example.

If you're new to the layout system in Silverlight, you may find this resource particularly useful: http://msdn.microsoft.com/en-us/library/cc645025(VS.95).aspx