xaml - 绑定(bind)一个 ExpanderView 做一个 viewModel？

Question

我制作了一些 ExpanderViews 并对所有内容进行了硬编码。这很有效，看起来不错，所以我想清理一下，只在 xaml 中编写一个 ExpanderView 并使用绑定(bind)加载其他所有内容。
据我了解，我需要一个围绕整个事物的 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 做了什么。如果我能看到一个完整的例子，它已经对我有很大帮助了。我用谷歌搜索了很多教程，但大多数只显示了一侧，比如 xaml，没有看到数据是如何存储的。

编辑:
现在我编辑了 viewModel，所以它不是 List<string>但是一个 List<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与数据绑定(bind)一起使用。 ObservableCollection每当项目添加到集合或从集合中删除时，自动通知 View 刷新。