Xaml 绑定ExpanderView和viewModel？

我制作了一些ExpanderView并对所有内容进行了硬编码。这很有效，看起来很不错，所以我想清理一下，只在xaml中编写一个ExpanderView，然后用绑定加载其他所有内容。 据我所知，我需要一个列表框围绕整个事情，使其更具活力？ 这是我目前的代码：

<ListBox ItemsSource="{Binding ContactDe}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <toolkit:ExpanderView Header="{Binding}"
                        ItemsSource="{Binding LocationName}"
                        IsNonExpandable="False">
                <toolkit:ExpanderView.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding LocationName}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" LineHeight="{StaticResource LongListSelectorGroupHeaderFontSize}" />
                    </DataTemplate>
                </toolkit:ExpanderView.HeaderTemplate>

                <toolkit:ExpanderView.ExpanderTemplate>
                    <DataTemplate>
                        <TextBlock Text="test" />
                    </DataTemplate>
                </toolkit:ExpanderView.ExpanderTemplate>

                <toolkit:ExpanderView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Information}" />
                    </DataTemplate>
                </toolkit:ExpanderView.ItemTemplate>
            </toolkit:ExpanderView>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ContactViewModel类：

public class ContactDeViewModel : INotifyPropertyChanged
{
    private string _locationName;
    public string LocationName
    {
        get
        {
            return _locationName;
        }
        set
        {
            if (value != _locationName)
            {
                _locationName = value;
                NotifyPropertyChanged("LocationName");
            }
        }
    }

    private List<string> _information;
    public List<string> Information
    {
        get
        {
            return _information;
        }
        set
        {
            if (value != _information)
            {
                _information = value;
                NotifyPropertyChanged("Information");
            }
        }
    }
}

这就是我填写ContactViewModel的地方：

this.ContactDe.Add(new ContactDeViewModel()
            {
                LocationName = "Stuttgart",
                Information = new List<string>
                    {
                        "some text"
                    }
            }
            );
            this.ContactDe.Add(new ContactDeViewModel()
            {
                LocationName = "Böblingen",
                Information = new List<string>
                    {
                        "more text"
                    }
            }
            );

我制作了一个SampleViewModel文件，其中包括：

<vm:MainViewModel.ContactDe>
    <vm:ContactDeViewModel LocationName="Location 1" />
    <vm:ContactDeViewModel LocationName="Location 2" />
</vm:MainViewModel.ContactDe>

在预览窗口中，它向我显示了位置为1和2的两个ExpanderViews。但是，同样的代码不适用于模拟器或真实设备。我真的不明白哪个绑定访问做什么。如果我能看到一个完整的例子，这将对我有很大帮助。我在谷歌上搜索了很多教程，但大多数只显示了一个方面，比如xaml，没有显示数据的存储方式

编辑：

---

现在我编辑了viewModel，因此它不是一个列表，而是一个仅包含字符串文本的信息列表。现在我可以说ItemsSource={Binding Text}，一次应该只有一个字符串，对吗？

您需要稍微更改绑定

          <toolkit:ExpanderView Header="{Binding LocationName}"
                      ItemsSource="{Binding Information}"
                      IsNonExpandable="False">
                      <toolkit:ExpanderView.HeaderTemplate>
                          <DataTemplate>
                              <TextBlock Text="{Binding}" FontFamily="{StaticResource  honeFontFamilySemiBold}" LineHeight="{StaticResource LongListSelectorGroupHeaderFontSize}" />
                          </DataTemplate>
                      </toolkit:ExpanderView.HeaderTemplate>
                          <toolkit:ExpanderView.ExpanderTemplate>
                              <DataTemplate>
                                  <TextBlock Text="test" />
                               </DataTemplate>
                          </toolkit:ExpanderView.ExpanderTemplate>
                          <toolkit:ExpanderView.ItemTemplate>
                              <DataTemplate>
                                  <TextBlock Text="{Binding}" />
                              </DataTemplate>
                          </toolkit:ExpanderView.ItemTemplate>
                  </toolkit:ExpanderView>

---

希望这有助于

正如对@dellywheel答案的评论所述，您可以这样设置DataContext：

d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"

<ListBox ItemsSource="{Binding ContactDe}">
    <ListBox.DataContext>
        <vm:MainViewModel/>
    </ListBox.DataContext>
    ........
    ........
</ListBox>

这将DataContext设置为仅在设计时使用，因此它在运行时不起作用。要使用类似的方法设置DataContext以在运行时使用，可以尝试以下方法：

d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"

<ListBox ItemsSource="{Binding ContactDe}">
    <ListBox.DataContext>
        <vm:MainViewModel/>
    </ListBox.DataContext>
    ........
    ........
</ListBox>

---

另一个建议是，更喜欢ObservableCollection而不是List，以便与数据绑定一起使用。每当项目添加到集合或从集合中删除时，ObservableCollection会自动通知view刷新。

我看到的第一个问题是，您正在将列表信息绑定到TextBlock。Text属性需要字符串。我要做的是将列表中的每个字符串值绑定到自己的TextBlock。预览窗口中显示一切都像它应该是的，但在emulator上它不工作=/现在我看到我在原来的帖子中把它拼错了，我会编辑它。还有一些其他的小改动..检查页面的DataContext。什么是ContactDe？视图模型列表？它是d:DataContext={d:DesignData SampleData/MainViewModelSampleData.xaml}，其中包含一些内容，您可以在主文章中看到。它的结构与我在运行时创建的数据相同。但不知何故，预览喜欢sampleData，emulator/real设备不喜欢real data=/d:DataContext是您的设计时数据，它将显示在visual studio中并混合。您还需要设置真实的DataContext。在xaml DataContext={Binding YourViewModel}或代码隐藏中，例如var vm=new MainViewModel；this.DataContext=vm；我还没有设置，测试也没有显示任何变化。在其他文件中，我也不使用它，因为我有一个ViewModels/MainViewModel.cs和用于真实ViewModels的单独类。创建可视项时，我将其ItemSource设置为某个viewModel实际上，即使我删除了除LocationName之外的所有内容，它也无法正确绑定。现在它是一个非常简单的ViewModel，只包含一个LocationName字符串，没有其他内容。我无法在模拟器/设备上显示LocationName。我知道SampleData仅用于设计。为了绑定我的viewModel，我使用了第一个版本，如您所建议的：。不知何故，它只是没有在运行时添加任何内容。我将viewModel缩小到最小值，只是为了看看它是否能做任何事情。我向其中添加了2个元素，查看主帖子中的代码，甚至静态数据也没有显示->不知何故它无法识别。好的，发现错误--在我的xaml.cs中，我缺少这一行：DataContext=App.ViewModel；dellywheel完全正确。我读了10篇关于expanderviews绑定的教程，没有人提到这一点。当然，这是低级的东西，但应该在完整的指南中提及。遗憾的是，由于声誉问题，我无法回答。希望大家在这里看到！无论如何，谢谢你们！我的答案中的点不是ItemsSource=[Binding ContactDe}部分，你已经知道了。点在…部分。这是仅从XAML设置DataContext的一种方法，你也可以从上面注释中提到的代码设置它。