How to dynamically create textblock based on the entries parsed

Question

I am trying to parse down a web API, Based on the entries obtained i want show all bank account transaction (list of all entries) associated with a single account and want to show it in dynamically created text block. Similar like this:-

Here is my parser class

public class Transaction
{
public string dec { get; set; }
public string amt { get; set; }
public string date { get; set; }
}

public class Loginresponse
{
public List<Transaction> transaction { get; set; }
}

Here dec- Description, amt- Amount, i have successfully parsed the web API.

<Grid Name="accountdetails" Margin="0,0,0,0" Background="#66ac22" HorizontalAlignment="Left" Width="456" Grid.ColumnSpan="2">
                    <TextBlock Grid.Row="0"  VerticalAlignment="Center" Margin="10,0,0,0" Text="No." Foreground="White"/>
                    <TextBlock  VerticalAlignment="Center" Margin="66,0,319,0" Text="Date." Foreground="White"/>
                    <TextBlock VerticalAlignment="Center" Margin="166,0,140,0" Text="Description" Foreground="White"/>
                    <TextBlock VerticalAlignment="Center" Margin="364,0,0,0" Text="Amount" Foreground="White"/>
                    <ItemsControl Name="accdetails" ItemsSource="{Binding Path=transaction}" Margin="0,10,0,-440">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Background="Black">
                                    <TextBlock Text="{Binding dec}" Foreground="Black" />
                                    <TextBlock Text="{Binding amt}" Foreground="Black"/>
                                    <TextBlock Text="{Binding date}" Foreground="Black"/>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    </Grid>

My class file:-

 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        try
        {
            IDictionary<string, string> parameters = this.NavigationContext.QueryString;
            if (parameters.ContainsKey("key"))
            {
                var root1 = JsonConvert.DeserializeObject<RootObject>(parameters["key"]);
                this.accdetails.DataContext = root1.loginresponse.transaction;
            }
        }
        catch (Exception)
        {

        }
    }

Now i am unable to figure out how to dynamically create textblock and show all this details obtained from parser. Any kind of guidance, suggestion, or correct method of writing code with details would be appreciated.

 <Grid x:Name="LayoutRoot">
    <phone:Pivot Title="" Style="{StaticResource PivotStyle1}">

        <phone:PivotItem Header="transactions" FontSize="20">
            <Grid Margin="0,0,0,420" Background="#f9f9f9">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid Name="accountdetails" Margin="0,0,0,0" Background="#66ac22" HorizontalAlignment="Left" Width="456" Grid.ColumnSpan="2">
                    <TextBlock VerticalAlignment="Center" Margin="10,0,0,0" Text="No." Foreground="White"/>
                    <TextBlock VerticalAlignment="Center" Margin="66,0,319,0" Text="Date." Foreground="White"/>
                    <TextBlock VerticalAlignment="Center" Margin="166,0,140,0" Text="Description" Foreground="White"/>
                    <TextBlock VerticalAlignment="Center" Margin="364,0,0,0" Text="Amount" Foreground="White"/>
                    <ListBox x:Name="ListBox1" Margin="5,32,0,-340"
                           Width="450" HorizontalAlignment="Left" Padding="0" VerticalAlignment="Center"
                           ItemsSource="{Binding}" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" >
                                    <TextBlock Grid.Column="0" Text="{Binding no}" Foreground="Black" Margin="5,5,0,0" HorizontalAlignment="Left"/>
                                    <TextBlock Grid.Column="1" Text="{Binding date}" Foreground="Black" Margin="30,5,0,0" HorizontalAlignment="Left"  />
                                    <TextBlock Grid.Column="2" Text="{Binding dec}" Foreground="Black" Margin="40,5,0,0" HorizontalAlignment="Left"/>
                                    <TextBlock Grid.Column="3" Text="{Binding amt}" Foreground="Black" Margin="120,5,80,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

Now i am getting the list of text but i unable to show it properly in the grids.

Answer 1

One simple option is to use an ItemsControl , this binds to a collection of items and displays each e using the data template you specify.

eg

<ItemsControl ItemsSource="{Binding Path=transaction}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding dec}" />
                <TextBlock Text="{Binding amount}" />
                <TextBlock Text="{Binding date}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

Why don't you use a listbox instead?

Declare a Listbox in xaml like this with textblocks text binding your properties.

    <Listbox name ="lstBox">
        <Listbox.ItemTemplate>
            <Listbox>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding dec}" />
                    <TextBlock Text="{Binding amount}" />
                    <TextBlock Text="{Binding date}" />
                </StackPanel>
            </DataTemplate>
        </Listbox.ItemTemplate>
    </Listbox>

Now in cs file.

For first 25 entries.

List<Type> newList=new List<Type>();

int count =your list.Count;

    if(count >25)
    {
      for (int i = 0; i < your list.Count; i++)
       {
        if(i<=24)
        {
          newList.Add(your list[i]};
        }
      }
   }

lstBox.ItemSource=newList;

Try this.