Reusing Text views and Grid

I am working on windows phone 8 app.

I am dynamically creating multiple Textview and Grid inside For loop.

for (int j = 0; j < 300; j++)
                    {

                        Image image = new Image();
                        image.Source = new BitmapImage(new Uri("/Images/sample256.png", UriKind.RelativeOrAbsolute));


                        image.Tag = i.ToString();

                        Grid questionGrid = new Grid();
                        questionGrid.HorizontalAlignment = HorizontalAlignment.Center;
                        questionGrid.VerticalAlignment = VerticalAlignment.Center;

                        TextBlock question = new TextBlock();
                        question.TextWrapping = TextWrapping.Wrap;
                        question.TextAlignment = TextAlignment.Center;
                        question.Text = " this is the question and its id is Question" + i;
                        question.FontSize = 30;
                        question.Foreground = new SolidColorBrush(Colors.Black);
                        question.HorizontalAlignment = HorizontalAlignment.Center;
                        questionGrid.Children.Add(question);

                        Grid answerGrid = new Grid();
                        answerGrid.HorizontalAlignment = HorizontalAlignment.Center;
                        answerGrid.VerticalAlignment = VerticalAlignment.Center;

                        TextBlock answer = new TextBlock();
                        answer.TextWrapping = TextWrapping.Wrap;
                        answer.TextAlignment = TextAlignment.Center;
                        answer.Text = "this is answer and its id is Answer" + i;
                        answer.FontSize = 30;
                        answer.Foreground = new SolidColorBrush(Colors.Black);
                        answer.HorizontalAlignment = HorizontalAlignment.Center;
                        answerGrid.Children.Add(answer);


                        LayoutRoot.Children.Add(image);
                        LayoutRoot.Children.Add(questionGrid);
                        LayoutRoot.Children.Add(answerGrid);

                    }

As you can see that i have around 300 times its entering, so because of that the load is heavy and there is a lot of delay when page responds to user interaction.

How to reduce the load? so that i can resue the dyamically created views.

Basically, instead of creating complicated objects directly at page cs code you should create a user control. On you user control you preset the positions for you element, i.e. if you want it to have an Image and a couple of textblocks, you just place them there. That would be a template.

Then, you create list of user controls in a loop.

So, your code would look like:

for (int j = 0; j < 300; j++)
{
    SomeUserControl someUserControl = new SomeUserControl(constuctorValue1, constuctorValue2);
    ListOfSomeUserControls.Add(someUserControl);
    LayoutRoot.Children.Add(someUserControl);
}

Where ListOfSomeUserControls is a List defined on your page code.

Here, you can send some data to constructor, for example someUserControl will be your ImageUri or text value.

OR, you can create some properties at user control to set data there.

OR, you can create some methods at user control, like ChangeImageUri() or something like that.

To use this dynamically created user controls you should use ListOfSomeUserControls[Index]. You could also save this list somewhere for former usage.

That's the basic idea.

In the link, you've shared, the OP creates a list of links to images. Feel, the difference: he has 5 Image boxes at the page and a list of 300 links. So, when you start your app you have this:

Image1::listOfUris[1] Image2::listOfUris[2] Image3::listOfUris[3] Image4::listOfUris[4] Image5::listOfUris[5]

When you tap next button, you just displace this list by 1.

Image1::listOfUris[2] Image2::listOfUris[3] Image3::listOfUris[4] Image4::listOfUris[5] Image5::listOfUris[6]

That's all, just 5 images, not 300.