0

我正在创建一个 Windows 应用商店应用程序。我想创建一个类似结构的表，所以我使用了 ItemsControl。我需要在给定的 JSON 下方显示，它是表中字符串列表的列表。我从这里尝试了一些东西，但我得到了重复的输出。

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>

预期产出

在此处输入图像描述

实际输出

在此处输入图像描述

4

1 回答 1

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>

结果：

更正的输出

于 2013-09-01T19:39:43.043 回答