绑定一个 ExpanderView 做一个 viewModel？

Question

我制作了一些 ExpanderView 并对所有内容进行了硬编码。这工作并且看起来不错，所以我想清理并只在 xaml 中编写一个 ExpanderView 并使用绑定加载其他所有内容。 据我了解，我需要一个围绕整个事物的 ListBox 以使其更具活力？ 到目前为止，这是我的代码：

<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-File：

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

在预览窗口中，它显示了 2 个具有位置 1 和 2 的 ExpanderView。但相同的代码不适用于模拟器或真实设备。我真的不明白哪个 Binding-Acces 做了什么。如果我能看到一个完整的例子，它已经对我有很大帮助了。我在 Google 上搜索了很多教程，但大多数只显示了一侧，比如 xaml，而没有看到数据是如何存储的。

编辑： 现在我编辑了viewModel，所以它不是List<string>，而是List<Info>，其Info 仅包含string Text。所以现在我可以说 ItemsSource="{Binding Text}" 一次应该只有 1 个字符串，对吧？

Answer 1

正如对@dellywheel 的回答的评论中所述，您以这种方式设置DataContext：

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

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

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

或者通过这种方式在页面级别设置DataContext：

<phone:PhoneApplicationPage>
    <phone:PhoneApplicationPage.DataContext>
        <vm:MainViewModel/>
    </phone:PhoneApplicationPage.DataContext>
    ........
    ........
</phone:PhoneApplicationPage>

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

Answer 2

你需要稍微改变你的绑定

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

希望有帮助