CODEWITHSUNDEEP
jsonxamlwindows-8windows-runtimemicrosoft-metro
Farhan Ghumra
Farhan Ghumra

Reputation: 15296

Binding List<List<string>> to ItemsControl

I am creating a Windows Store App. I want to create a table like structure so I used ItemsControl. I need to display below given JSON,which is list of list of string in a table. I tried something from here but I am getting repeated output.

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"
      ]
   ]
}

Model Class

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>

Expected Output

enter image description here

Actual Output

enter image description here

Upvotes: 0

Views: 818

Answers (1)

WiredPrairie
WiredPrairie

Reputation: 59763

You've got a few things that need to be changed.

  1. You'll only need one ItemsControl. It's the outer ItemsControl that is used to iterate through the items in the List<>. In this case, you've got a List<List<string>>. Each item in the RowsData is a List<string>.
  2. Since you're not interested in looping through all items of the inner List<string>, you'll remove the inner ItemsControl and adjust the Binding. The syntax for binding to an indexer is to specify the index in C# notation: [#]. There's not a property of the List<string> that you can use to access the indexed value (remember that all bindings must be to properties or use a converter). In this case, there's special property path syntax that does exactly what you need.

Making those changes:

<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>

Results:

Corrected output

Upvotes: 1

Related Questions