绑定列表<list <string>＆gt;到ItemsControl </list <string>

Question

我正在创建一个Windows应用商店应用。我想创建一个像结构的表，所以我使用ItemsControl。我需要在下面给出JSON，它是表中字符串列表的列表。我尝试了here中的某些内容，但我正在重复输出。

JSON

{
   head:[
      [
         "Your purchase",
         "Short number",
         "SMS text",
         "Price",
         "Operator"
      ]
   ],
   body:[
      [
         "10",
         "28000",
         "PAY 2p+2508812",
         "23.20 MXN",
         "TELCEL"
      ],
      [
         "10",
         "28000",
         "PAY 2p+2508812",
         "23.20 MXN",
         "MOVISTAR"
      ],
      [
         "6",
         "53035",
         "dam 10169 2508812",
         "15.08 MXN",
         "IUSACELL"
      ],
      [
         "10",
         "28000",
         "PAY 2p+2508812",
         "23.20 MXN",
         "Nextel"
      ],
      [
         "10",
         "28000",
         "PAY 2p+2508812",
         "23.20 MXN",
         "Lusacell"
      ]
   ]
}

模型类

public class SmsTable
{
    [JsonProperty("head")]
    public List<List<string>> Headers { get; set; }

    [JsonProperty("body")]
    public List<List<string>> RowValues { get; set; }
}

XAML

<ItemsControl x:Name="icOuter" Grid.Row="1" ItemsSource="{Binding RowValues}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl x:Name="icInner" ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left">
                            <StackPanel Orientation="Horizontal" Background="White" HorizontalAlignment="Left">
                                <Border Style="{StaticResource BorderCell}">
                                    <TextBlock Text="{Binding Items[0], ElementName=icInner}" Style="{StaticResource TextBlockCell}" Width="180"/>
                                </Border>
                                <Border Style="{StaticResource BorderCell}">
                                    <TextBlock Text="{Binding Items[1], ElementName=icInner}" Style="{StaticResource TextBlockCell}" Width="180"/>
                                </Border>
                                <Border Style="{StaticResource BorderCell}">
                                    <TextBlock Text="{Binding Items[2], ElementName=icInner}" Style="{StaticResource TextBlockCell}" Width="245"/>
                                </Border>
                                <Border Style="{StaticResource BorderCell}">
                                    <TextBlock Text="{Binding Items[3], ElementName=icInner}" Style="{StaticResource TextBlockCell}" Width="125"/>
                                </Border>
                                <Border Style="{StaticResource BorderCell}">
                                    <TextBlock Text="{Binding Items[4], ElementName=icInner}" Style="{StaticResource TextBlockCell}" Width="125"/>
                                </Border>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

预期产出

实际输出

Answer 1

你有一些需要改变的事情。

1. 您只需要一个ItemsControl。它是外部ItemsControl，用于遍历List<>中的项目。在这种情况下，您有一个List<List<string>>。 RowsData中的每个项目都是List<string>。
2. 由于您不想循环遍历内部List<string>的所有项目，因此您将删除内部ItemsControl并调整Binding.绑定到索引器的语法是以C＃表示法指定索引：[#]。您可以使用List<string>的属性来访问索引值（请记住，所有绑定必须是属性或使用转换器）。在这种情况下，有一种特殊的属性路径语法可以完全满足您的需要。

进行这些更改：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ItemsControl x:Name="icOuter" Grid.Row="1" ItemsSource="{Binding RowValues}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>                    
                <Grid HorizontalAlignment="Left">                        
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Border >
                            <TextBlock Text="{Binding [0]}" Width="180"/>
                        </Border>
                        <Border >
                            <TextBlock Text="{Binding [1]}" Width="180"/>
                        </Border>
                        <Border >
                            <TextBlock Text="{Binding [2]}" Width="245"/>
                        </Border>
                        <Border >
                            <TextBlock Text="{Binding [3]}" Width="125"/>
                        </Border>
                        <Border >
                            <TextBlock Text="{Binding [4]}" Width="125"/>
                        </Border>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

结果：