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. 必要なのは 1 つだけですItemsControl。内のアイテムを反復処理するために使用されるのは、外側の ItemsControl ですList<>。この場合、List<List<string>>. RowsData の各項目はList<string>.
  2. inner のすべての項目をループすることには関心がないので、innerList<string>を削除してItemsControl調整しBinding.ます[#]。インデックス付きの値にアクセスするために使用できるのプロパティはありません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 に答える