如何将数据绑定到多列列表框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>

谢谢！

-Johan

Answer 1

假设您的CompleteStation是一个ObservableCollection ，它实现了NotifyPropertyChanged ，那么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;}
}

您的ViewModel：

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并将其设置为View的DataContext。

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