Question

我正在学习Windows手机上的数据绑定，到目前为止我已经能够将单个对象绑定到应用程序的可视化端，但现在我试图了解如何根据数量创建可视元素我在列表中的对象

我有一个人的课程

public class Person
{
    public Person() { }
    public string name { get; set; } 
    public string fotoPath { get; set; }
}

我有一个人员集合课程

public class PersonCollection
{
    public PersonCollection() { }
    public List<Person> personGroup { get; set; } 
}

然后我的页面代码背后，我生成我的人员列表

    public partial class TestPage : PhoneApplicationPage
    {
      public TestPage()
      {
        InitializeComponent();
        Loaded += TestPage_Loaded;
      }

    void TestPage_Loaded(object sender, RoutedEventArgs e)
    {
        PersonCollection lista = new PersonCollection();
        lista.personGroup.Add(new Person(){name = "Mr.T", fotoPath = "/images/foto1.jpg"});
        lista.personGroup.Add(new Person(){name = "John", fotoPath = "/images/foto2.jpg"});

    }
}

在我的页面上我想要一个网格，在每个单元格上显示一张照片和人名，为我列表中的每个人（每行2个人）。据我所知，我将需要使用DataTemplate，但是现在我的努力失败了。谁能给我一些指示？

Answer 1

以下是每行2人的表现方式。首先，将源集合放入2个组中：

List<Tuple<Person, Person>> groupedItems = lista.personGroup
    .GroupBy(item => lista.personGroup.IndexOf(item) / 2)
    .Select(grp => new Tuple<Person, Person>(grp.First(), grp.Skip(1).FirstOrDefault()))
    .ToList();
items.ItemsSource = groupedItems;

现在使用DataTemplate在左右列中显示“Item1”和“Item2”：

<ItemsControl x:Name="items"> 
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Resources>
                    <DataTemplate x:Key="ColumnTemplate">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding name}" Width="150" />
                            <Image Source="{Binding fotoPath}" />
                        </StackPanel>
                    </DataTemplate>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ContentControl Content="{Binding Item1}" 
                                ContentTemplate="{StaticResource ColumnTemplate}" />
                <ContentControl Grid.Column="1" 
                                Content="{Binding Item2}" 
                                ContentTemplate="{StaticResource ColumnTemplate}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

绑定Windows手机上的项目列表

1 个答案: