Question

我已为用户创建了一个ListPicker控件来更改其背景，但并未在ListPicker控件中正确填充所有信息。当用户导航到我的SettingsPage时，会出现问题，所有ListPicker项目的文本都正确显示，但只显示当前所选背景的图像。所有其他图像背景都是空白的。此外，奇怪的是当我更改图像背景并在MainPage和SettingsPage之间来回导航时，所选的每个新图像背景将显示在ListPicker（以及所有其他先前选择的背景）中，同时背景未选中的图像没有ListPicker中显示的图像。到目前为止，我所拥有的内容如下：

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;
        }
    }

其中ThemeItem是一个小型自定义类

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

当SettingsPage导航时，我如何才能正确加载ListPicker控件中的所有图像背景和相应的文本名称？

编辑：添加了设置类信息

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

由于您在ListPicker中获得了大量项目，因此您还需要为其创建模板。你现在只有ItemTemplate。该属性称为 FullModeItemTemplate ，此处显示了如何执行此操作的示例：

http://windowsphonegeek.com/articles/listpicker-for-wp7-in-depth

Answer 2

我最终使用了FullModeItemTemplate，以便ListPicker可以在另一个页面中正确填充。

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"/>

无法使用Image和Name正确填充ListPicker控件

2 个答案: