ListPicker Set Selected Index not refreshes the UI in WP7 after async call

Question

I have two silverlight listpicker controls in my windows phone 7.

Here is my XAML for that.

// First listpicker for country names

    <toolkit:ListPicker x:Name="listPickerCountryLogin" SelectionChanged="listPickerCountryLogin_SelectionChanged" Height="72" HorizontalAlignment="Left" Margin="14,43,0,0" VerticalAlignment="Top" Width="436" FullModeHeader="Select Country" Background="White" BorderBrush="White" Foreground="{StaticResource listPickerBrush}">
                            <toolkit:ListPicker.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Country}" Width="250" />
                                    </StackPanel>
                                </DataTemplate>
                            </toolkit:ListPicker.ItemTemplate>
                            <toolkit:ListPicker.FullModeItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Country}" Width="300" Margin="0,0,0,20" FontSize="24"/>
                                    </StackPanel>
                                </DataTemplate>
                            </toolkit:ListPicker.FullModeItemTemplate>
                        </toolkit:ListPicker>

// and here is my second listpciker for country codes

                    <toolkit:ListPicker x:Name="listPickerCCLogin" SelectionChanged="listPickerCCLogin_SelectionChanged" Height="56.3" Width="80" HorizontalAlignment="Left" Margin="14,100,0,0"  VerticalAlignment="Top" FullModeHeader="Select Country" Background="White" BorderBrush="White" Foreground="{StaticResource listPickerBrush}">
                        <toolkit:ListPicker.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Name="lblCC" Text="{Binding CC}" Width="235" />
                                </StackPanel>
                            </DataTemplate>
                        </toolkit:ListPicker.ItemTemplate>
                        <toolkit:ListPicker.FullModeItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock  Text="{Binding Country}" Width="300" Margin="0,0,0,20" FontSize="24"/>
                                </StackPanel>
                            </DataTemplate>
                        </toolkit:ListPicker.FullModeItemTemplate>
                    </toolkit:ListPicker>

Now Scenario is if user selects the country name then it will automatically set country code of that country as well and vice versa.

for this thing I am using listpicker selection change events for both lists.

Here is my C# code.

First I am binding my listpickers with collection of countries in this method.

/// <summary>
        /// Binding All Listpickers With Data
        /// </summary>
        protected void BindListPickers()
        {
            CountryListParser oCountryList = new CountryListParser();
            this.listPickerCountryLogin.ItemsSource = oCountryList.GetAllCountries();
            this.listPickerCCLogin.ItemsSource = oCountryList.GetAllCountries();
        }

And here is list picker selection change events.

  /// <summary>
        /// Country List Picker Of Login Selection Change Event
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void listPickerCountryLogin_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (listPickerCountryLogin.SelectedIndex >= 0 && listPickerCountryLogin.SelectedIndex < listPickerCCLogin.Items.Count)
                listPickerCCLogin.SelectedIndex = listPickerCountryLogin.SelectedIndex;
        }

/// <summary>
/// Country Code List Picker Of Login Selection Change Event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void listPickerCCLogin_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listPickerCCLogin.SelectedIndex >= 0 && listPickerCCLogin.SelectedIndex < listPickerCountryLogin.Items.Count)
        listPickerCountryLogin.SelectedIndex = listPickerCCLogin.SelectedIndex;
}

Still up my code works fine without any error. Now come the tricky and difficult part where I am stucked. I am calling one Google service and passes the lat long of user and it returns me user country and I want set that country to my list pickers.

Here is My Code

protected void OnLocationServiceResponseRecieved(string response)
        {
            JObject o = JObject.Parse(response);
            string Country = (string)o["countryname"];

            Dispatcher.BeginInvoke(new System.Action(delegate()
            {
                CountryListParser oCountryList = new CountryListParser();
                int countrytIndex = oCountryList.CountryIndexByName(Country);
                this.listPickerCountryLogin.SelectedIndex = countrytIndex;
                this.listPickerCCLogin.SelectedIndex = countrytIndex;
            }));
        }

still there no exceptions come and everything goes well and it sets my listpicker selected index as per my country but it not updates the UI of my listpicker and do them blank or you can say empty. But as I tap on my listpicker in backend my desired country is already set. But not updated or stucked in UI thread.

So problem is UI is not updated properly

=== UPDATE ===

My Sample Code Where Issue Is Reproducing

My finding is in my attached project in selected index method when index is above 38. It will goes blank. I dont know why its behaving like this way..

Answer 1

I have implemented your entire code (except for the google service which I replaced with some other service), and it worked perfectly and UI is updating fine. I dnt see any problem in the code. Check my code HERE

So. I would suggest you to cross check your 'countryIndex'. Create another normal textblock and assign this countryIndex to that textblock and its values.

Also compare My code with yours, so that you may get some clue.

Answer 2

I too have experienced a similar problem with ListPicker while using it in my Panorama Application.

I have a list of items from 0 to 50.

<toolkit:ListPicker x:Name="MyListPicker"  ItemsSource="{Binding MyList}" Width="174" Margin="10, 10, 0, 0" ItemTemplate="{StaticResource MyTemplate}">
</toolkit:ListPicker>

<DataTemplate x:Name="MyTemplate">
        <TextBlock Text="{Binding}" FontFamily="Calibri" FontSize="50" />
    </DataTemplate>

And I've noticed that for indices greater than 38 or 40 ( just like you did), the UI is not updated after the list item is selected. It just shows a blank UI.

I also know that they recommend NOT using ListPicker for large lists ,but I guess 51 items is OK (or may be not ?)

I hence believe this might be a problem INSIDE ListPicker itself.

Answer 3

I have fixed that issue after 3 days struggle. Earlier I was thinking it was Problem in My UI thread and its not got refreshing. And I focused on that part as I was assuming thats the Issues. But in 3rd Day I noticed that might be this can be wrong in listpicker control. And I studied on codeplex. Some people also facing this problem. But How I Rectified let me tell you. I did four steps

1. I removed all the reference of silverlight toolkit from my project and cleaned the solution.

2. I installed the silverlight toolkit from pc and then installed the Nov-2011 stable version and restarted PC and referred the dll in my project from this new installation.

3. I binded selected index as well with my listpicker control.

     <toolkit:ListPicker x:Name="listPickerCountryLogin" SelectionChanged="listPickerCountryLogin_SelectionChanged" Height="72" HorizontalAlignment="Left" Margin="14,43,0,0" VerticalAlignment="Top" Width="436" FullModeHeader="Select Country" Background="White" BorderBrush="White" Foreground="{StaticResource listPickerBrush}"> <toolkit:ListPicker.Resources> <Style TargetType="toolkit:ListPickerItem"> <Setter Property="Padding" Value="8 6"/> </Style> </toolkit:ListPicker.Resources> <toolkit:ListPicker.Style> <StaticResource ResourceKey="ListPickerStyle"/> </toolkit:ListPicker.Style> <toolkit:ListPicker.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Country}" Width="250" /> </StackPanel> </DataTemplate> </toolkit:ListPicker.ItemTemplate> <toolkit:ListPicker.FullModeItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Country}" Width="300" Margin="0,0,0,20" FontSize="24"/> </StackPanel> </DataTemplate> </toolkit:ListPicker.FullModeItemTemplate> </toolkit:ListPicker>