Q:

Dynamically generate textblocks

I am using Windows Phone Panorama App template and using LongListSelector to allow users to click and view the details of the item listed in the Long list. The details of the items is available in the DetailsPage.xaml. 
My code is working fine i.e users are able to jump to the right item on DetailsPage.xaml and the content is visible to them. 

                <!--new text block -->
                <TextBlock Text="{Binding Term_1}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_1}" Style="{StaticResource Textblock}"  Margin="10,0,0,20" TextWrapping="Wrap"/>

                <TextBlock Text="{Binding Term_2}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_2}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_3}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_3}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_4}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_4}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_5}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_5}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

                <TextBlock Text="{Binding Term_6}" Style="{StaticResource Textblock}" FontWeight="Bold" Foreground="{StaticResource PhoneAccentBrush}"/>
                <TextBlock Text="{Binding Definition_6}" Style="{StaticResource Textblock}" Margin="10,0,0,20"/>

My problem is with how the items on the DetailsPage.xaml is displayed. For instance, if Option 1 on the Longlistselector has 4 items, and Option 2 has six items, Option 2 appears fine, but Option 1 has lot of spaces in the end (possibly coming out of the no data for Term 5, and Term 6). If there is another Option 3 with just 1 items, the whole DetailsPage contains lot of blank spaces after displaying the single item. I have more than 100 items in some of the Options, and the unwanted extra spaces at the end of the DetailsPage is simply annoying. I would like to know if there's anyway to generate the formatted Textblocks along with the binded resources in the DetailsPage dynamically so that the extra white spaces can be removed? If not, how can I show only the required Textblocks for a given Option?
Update: This is how the data is loaded in the textblocks:
public void LoadData()
        {

            this.Items.Add(new ItemViewModel()

{
    ID = "0",
    Term_1 = "This is a term1",
    Definition_1 = "This definition1", 

Term_2 = "This is a term2",
        Definition_2 = "This definition2",

Term_3 = "This is a term3",
        Definition_3 = "This definition3",

Term_4 = "This is a term4",
        Definition_4 = "This definition4",

Term_5 = "This is a term5",
        Definition_5 = "This definition5",

});

this.Items.Add(new ItemViewModel()

{
    ID = "1",`enter code here`
    Term_1 = "This is a term1 for ID 1",
    Definition_1 = "This definition1 for ID 1"

});
this.Items.Add(new ItemViewModel()

{
    ID = "2",
    Term_1 = "This is a term1 for ID 2",
    Definition_1 = "This definition1 for ID 2"

});
this.Items.Add(new ItemViewModel()

{
    ID = "3",
    Term_1 = "This is a term1 for ID 3",
    Definition_1 = "This definition1 for ID 3"

});
this.Items.Add(new ItemViewModel()

{
    ID = "4",
    Term_1 = "This is a term1 for ID 4",
    Definition_1 = "This definition1 for ID 4"

});
this.Items.Add(new ItemViewModel()

{
    ID = "5",
    Term_1 = "This is a term1 for ID 5",
    Definition_1 = "This definition1 for ID 5"

});

this.Items.Add(new ItemViewModel()

{
    ID = "6",
    Term_1 = "This is a term1 for ID 6",
    Definition_1 = "This definition1 for ID 6"

});

If I select any textblock, I will get the terms and definitions listed in the respective ID of the Texblock. If I select first Textblock, I will get the Terms/definitions 1, 2, 3, 4, 5. If I select another textblock, I will get only one term/definition.
This is how it is exactly coming in the output. The problem is that Textblock for terms 2, 3, 4, 5, and 6 introduces blank spaces if there are no terms to display for that ID. So, the empty textblocks are eating up the spaces on the screen. I would like the Detailspage to render only the TextBlocks which are applicable for an ID and then stop creating them for the remaining blocks for that ID.

A:

Instead of defining "Term_1" through "Term_2" as properties on ItemViewModel, declare a List property on ItemViewModel (I'm assuming of type string here):
public class ItemViewModel
{
    // ... other properties
    public List<string> Terms
    {
       get; set; // Implementation ommited
    }
}

Creation of ItemViewModel instances would then become something like
ItemViewModel viewModelItem= new ItemViewModel() { Id = "1", Definition_1 = "..." };
viewModelItem.Terms.Add("Term1 for Id1");
viewModelItem.Terms.Add("Term2 for Id1");
viewModelItem.Terms.Add("Term3 for Id1");
// ...as many terms as you have...
this.Items.Add(viewModelItem);

In your detail page, which I assume shows one ItemViewModel (the selected one from the LongListSelector), you can add a ListView (or something similar) in XAML and bind it to the Terms property of the ItemViewModel class:
<!-- Assumes an `ItemViewModel` instance is the `DataContext` for the ListView! -->
<ListView ItemsSource={Binding Terms}>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text={Binding}/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The ListView will generate as many ListViewItems as necessary.

