如何将数据绑定到多列 ListBox WP8.1

Question

我对 WP8.1 的 XAML 的整个数据绑定是新手。我一直在互联网上搜索，但似乎无法找到我的问题的直接答案。

我的页面上有一个包含 3 列的 ListBox 控件。我需要做的是用各自的数据填充每一列。

我有一个定义“CompleteStation”的类，它由 3 个字符串（StationName、Distance 和 GasPrice）组成

这是 ListBox 的 XAML 代码...我如何将 ListBox 传递给 CompleteStation（3 个字符串）并将每个字符串分隔到正确的列中？

下面是我的 XAML 代码。在我的主类中，我只是将一个 CommpleteStation 项添加到 ListBox。

另外，我是否需要在 XAML 代码中引用 CompleteStation 类？如果是，我该怎么做？

<ListBox Name="listBoxStations" FontSize="20" Grid.Row="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="480" Background="#e6e6e6" Margin="0,10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Station}"/>
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Distance}"/>
                        <TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Price}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

谢谢！

-约翰

Answer 1

假设您的 CompleteStation 是实现 NotifyPropertyChanged 的 ObservableCollection，那么 XAML 应如下所示

<ListBox Name="listBoxStations" ItemSource={Binding CompleteStation} FontSize="20" Grid.Row="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="480" Background="#e6e6e6" Margin="0,10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Station}"/>
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Distance}"/>
                        <TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Price}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

你的模特：

public sealed class CommpleteStation
{
  public string Station{get;set;}
  public string Distance{get;set;}
  public string Price{get;set;}
}

您的视图模型：

public sealed class MyViewModel
{
  public ObservableCollection<CommpleteStation> CommpleteStations{get;private set;}
  public MyViewModel()
  {
    CommpleteStations = new ObservableCollection<CommpleteStation>();
    CommpleteStations.Add(new CommpleteStation{Station="One", Distance="15",Price="130"};
  }
}

那么，

在您的 UI 的代码隐藏中，即“视图”，您实例化您的 ViewModel 并将其设置为您的视图的 DataContext。

public MyView()
{
  this.DataContext = new MyViewModel();
}