1

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

设置页面.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;
    }
}
4

2 回答 2

1

由于您在 ListPicker 中获得了大量项目,因此您也需要为它创建一个模板。您目前只有 ItemTemplate。该属性称为FullModeItemTemplate,此处显示了如何执行此操作的示例:

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

于 2012-07-15T14:39:15.000 回答
0

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

设置页面.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"/>
于 2012-07-15T17:14:59.607 回答