如何将ObservableCollection绑定到Listpicker

时间:2012-09-20 05:49:01

标签: c# windows-phone-7 xaml data-binding silverlight-toolkit

我正在尝试将一个ObservableCollection项绑定到来自Windows Phone的Silverlight工具包的ListPicker。我以前做过这个,但在我的情况下,我的ObservableCollection包含来自自定义类的项目。我不知道如何获取类的每个属性(对于每个项目)绑定到我的ListPicker。为了更好地说明我的内容如下:

MainPage.xaml中

<Grid.Resources>
        <DataTemplate x:Name="SearchProviderItemTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Favicon}" />
                <TextBlock Text="{Binding Name}" Margin="12,0,0,0"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Name="SearchProviderFullModeItemTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Favicon}" />
                <TextBlock Text="{Binding Name}" Margin="12,0,0,0"/>
            </StackPanel>
        </DataTemplate>
</Grid.Resources>

<toolkit:ListPicker x:Name="SearchProviderListPicker" ItemsSource="{Binding SearchProvider}" Margin="12,0,12,0" 
                            Header="Search provider" ItemTemplate="{Binding SearchProviderItemTemplate}"
                            FullModeHeader="Search provider" FullModeItemTemplate="{Binding SearchProviderFullModeItemTemplate}"
                            SelectedIndex="{Binding}"
                            SelectionChanged="SearchProviderListPicker_SelectionChanged" 
                            CacheMode="BitmapCache"/>

MainPage.xaml.cs中

public MainPage()
    {
        InitializeComponent();

        //This data is placed here for convenience right now
        ListItem Bing = new ListItem { Favicon = "", Name = "Bing", Address = "http://www.bing.com/search?q=" };
        ListItem Google = new ListItem { Favicon = "", Name = "Google", Address = "http://www.google.com/search?q=" };
        ListItem Yahoo = new ListItem { Favicon = "", Name = "Yahoo", Address = "http://search.yahoo.com/search?p=" };
        ListItem Ask = new ListItem { Favicon = "", Name = "Ask", Address = "http://www.ask.com/web?q=" };
        ListItem Aol = new ListItem { Favicon = "", Name = "AOL", Address = "http://search.aol.com/search?q=" };

        Settings.SearchProvider.Value.Add(Bing);
        Settings.SearchProvider.Value.Add(Google);
        Settings.SearchProvider.Value.Add(Yahoo);
        Settings.SearchProvider.Value.Add(Ask);
        Settings.SearchProvider.Value.Add(Aol);

        // Set the data context of the SearchProviderListPicker control to the data
        DataContext = App.ViewModel;
    }

MainViewModel.cs

    public ObservableCollection<ListItem> SearchProvider { get; private set; }

    public MainViewModel()
    {
        SearchProvider = Settings.SearchProvider.Value;
    }  

上面引用的Settings类用于将SearchProvider ObservableCollection存储在独立存储中。

Settings.cs

public static Setting<ObservableCollection<ListItem>> SearchProvider = new Setting<ObservableCollection<ListItem>>("SearchProvider", new ObservableCollection<ListItem>());

Setting类保存并从隔离存储中获取数据。 此外,我的自定义ListItem类演示了我需要使用的属性。

ListItem.cs

public string Favicon
    {
        get;
        set;
    }

    public string Name
    {
        get;
        set;
    }

    public string Address
    {
        get;
        set;
    }

所以基本上每个SearchProvider ObservableCollection项都包含我需要使用的Favicon, Name, and Address,我只想将FaviconName绑定到ListPicker。我的问题是,ListPicker提供了5个搜索提供程序,除了每个文本Project1.Common.ListItem的文本,其中ListItem类位于我的Common文件夹中。我不能将这些正确地绑定到视图,但我不知道如何正确地完成这个?

2 个答案:

答案 0 :(得分:0)

您的ListPicker模板是Grid.Resources

中定义的静态资源

因此你必须改变像这个

的ListPicker xaml代码
ItemTemplate="{Binding SearchProviderItemTemplate}"
FullModeItemTemplate="{Binding SearchProviderFullModeItemTemplate}"

将以上两个属性替换为以下

ItemTemplate="{StaticResource SearchProviderItemTemplate}"
FullModeItemTemplate="{StaticResource SearchProviderFullModeItemTemplate}"

答案 1 :(得分:0)

如果你得到'Project1.Common.ListItem'作为文本,这意味着你的绑定是正确的,但你的模板有问题。

第一个修正如上所述,当您引用模板时,需要使用“StaticResource”而不是“Binding”。

请重新检查您的模板是否有任何拼写错误等。

如果我是你,我会首先尝试在不使用“设置”类的情况下使其工作,看看是否有帮助