Question

I have created a ListPicker control for a user to change his or her background, but not all of the information is populated correctly in the ListPicker control. The problem arises when a user navigated to my SettingsPage, the text of all ListPicker items is displayed properly, but only the image of the currently selected background is shown. All other image backgrounds are blank. Furthermore, the weird thing is as I change the image backgrounds and navigate back and forth between the MainPage and the SettingsPage, every new image background that is selected will then show up in the ListPicker (along with all other previously selected backgrounds) while the backgrounds that haven’t been selected do not have images shown in the ListPicker. So far what I have is as follows:

SettingsPage.xaml

<toolkit:ListPicker x:Name="ThemeListPicker" Header="Theme" Grid.Row="2" Grid.ColumnSpan="2"
                                        SelectedIndex="{Binding}"
                                        SelectionChanged="ThemeListPicker_SelectionChanged">
                        <toolkit:ListPicker.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="{Binding Image}" Width="50" Height="37.59" Margin="0,0,12,0"/>
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap"/>
                                </StackPanel>
                            </DataTemplate>
                        </toolkit:ListPicker.ItemTemplate>
                    </toolkit:ListPicker>

SettingsPage.xaml.cs

List<ThemeItem> themeList;

public SettingsPage()
    {
        InitializeComponent();

        themeList = new List<ThemeItem>()
        {
            new ThemeItem { Image = new BitmapImage(new Uri("Resources/Themes/PanoramaBackground.png", UriKind.Relative)), Name = "Default" },

            new ThemeItem { Image = new BitmapImage(new Uri("Resources/Themes/Abstract Pattern.jpg", UriKind.Relative)), Name = "Abstract Pattern" },
            new ThemeItem { Image = new BitmapImage(new Uri("Resources/Themes/Asian Beauty.jpg", UriKind.Relative)), Name = "Asian Beauty" },
            new ThemeItem { Image = new BitmapImage(new Uri("Resources/Themes/Autumn Leaf.jpg", UriKind.Relative)), Name = "Autumn Leaf" },                
            new ThemeItem { Image = new BitmapImage(new Uri("Resources/Themes/Old Barn.png", UriKind.Relative)), Name = "Old Barn" }
        };

        ThemeListPicker.ItemsSource = themeList;
        ThemeListPicker.DataContext = ThemeListPicker.SelectedIndex;

    }

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        //Respect the saved Theme index setting
        this.ThemeListPicker.SelectedIndex = Settings.ThemeIndex.Value;
    }

private void ThemeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count <= 0) //to eliminate IndexOutOfRangeException
        {
            return;
        }

        //string selectedItem = e.AddedItems[0] as string;
        ThemeItem selectedItem = e.AddedItems[0] as ThemeItem;

        if (selectedItem != null)
        {
            Settings.Theme.Value = selectedItem.Image.UriSource.ToString();
            Settings.ThemeIndex.Value = ThemeListPicker.SelectedIndex;
        }
    }

where ThemeItem is a small custom class

public class ThemeItem
{
    public BitmapImage Image { get; set; }
    public string Name { get; set; }
}

How would I be able to properly load all Image backgrounds and respective text Names in the ListPicker control when the SettingsPage is navigatedTo?

EDIT: added Settings class info

public class Settings
{        
    //Theme settings
    public static readonly Setting<int> ThemeIndex = new Setting<int>("ThemeIndex", 0);

    //Theme Background
    public static readonly Setting<string> Theme = new Setting<string>("Theme", "Resources/Themes/PanoramaBackground.png");
    //public static readonly Setting<BitmapImage> Theme = new Setting<BitmapImage>("Theme", new Uri("/Resources/Themes/PanoramaBackground.png", UriKind.Relative));
}

//Encapsulates a key/value pair stored in Isolated Storage ApplicationSettings
public class Setting<T>
{
    string name;
    T value;
    T defaultValue;
    bool hasValue;

    public Setting(string name, T defaultValue)
    {
        this.name = name;
        this.defaultValue = defaultValue;
    }

    public T Value
    {
        get
        {
            //Check for the cached value
            if (!this.hasValue)
            {
                //Try to get the value from Isolated Storage
                if (!IsolatedStorageSettings.ApplicationSettings.TryGetValue(
                    this.name, out this.value))
                {
                    //It has not been set yet
                    this.value = this.defaultValue;
                    IsolatedStorageSettings.ApplicationSettings[this.name] = this.value;
                }
                this.hasValue = true;
            }
            return this.value;
        }
        set
        {
            //Save the value to Isolated Storage
            IsolatedStorageSettings.ApplicationSettings[this.name] = value;
            this.value = value;
            this.hasValue = true;
        }
    }

    public T DefaultValue
    {
        get { return this.defaultValue; }
    }

    //"Clear" cached value
    public void ForceRefresh()
    {
        this.hasValue = false;
    }
}

Answer 1

I ended up using the FullModeItemTemplate so that the the ListPicker would populate correctly in another page.

SettingsPage.xaml

<Grid.Resources>

                        <DataTemplate x:Name="PickerItemTemplate">
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Width="50" Height="37.59" Margin="0,0,12,0"/>
                                <TextBlock Text="{Binding Name}" TextWrapping="Wrap"/>
                            </StackPanel>
                        </DataTemplate>

                        <DataTemplate x:Name="PickerFullModeItemTemplate">
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Width="50" Height="37.59" Margin="0,0,12,0"/>
                                <TextBlock Text="{Binding Name}" TextWrapping="Wrap"/>
                            </StackPanel>
                        </DataTemplate>

                    </Grid.Resources>

<toolkit:ListPicker x:Name="ThemeListPicker" Header="Theme" Grid.Row="2" Grid.ColumnSpan="2"
                                        FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
                                        ItemTemplate="{StaticResource PickerItemTemplate}"
                                        SelectedIndex="{Binding}"
                                        SelectionChanged="ThemeListPicker_SelectionChanged"/>