Reuse Dynamically created view

Question

I am dynamically creating say 300 views in For loop :

Ex:

for (int j = 0; j <= 300; j++)
{
    Image image = new Image();
    image.Source = new BitmapImage(new Uri("/Images/sample256.png", UriKind.RelativeOrAbsolute));

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

    TextBlock titleText = new TextBlock();
    titleText.TextWrapping = TextWrapping.Wrap;
    titleGrid.Children.Add(titleText);

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

    TextBlock subtitleText = new TextBlock();
    subtitleText.TextWrapping = TextWrapping.Wrap;

    subtitleGrid.Children.Add(subtitleText);

    //add all views to root layout
    LayoutRoot.Children.Add(image);
    LayoutRoot.Children.Add(titleGrid);
    LayoutRoot.Children.Add(subtitleGrid);
}

Now there is a lag in the app as I am adding new view each time, how can I reuse the already created views? I am working on Windows Phone 8 app.

Well, you can create a collection of Images/Views/Grids, will be something like: List usedImages. Then you can work with this list. But why do you need 300 views? Maybe there's simpler solution. — Olter, Jun 16 '14 at 10:10
@Olter i am working on a screen when for each root layout will have 3 childern which is Image,and 2 text. Can you please show me eaxmple of what you are pointing to ? — user2056563, Jun 16 '14 at 10:12
Em, just saw this: http://stackoverflow.com/questions/24190302/reusing-text-views-and-grid Don't ask duplicate questions, please. — Olter, Jun 16 '14 at 10:14
@Olter yes i had asked that earlier but did not get enough attention, can you please help me on that — user2056563, Jun 16 '14 at 10:14

score 1 · Answer 1 · answered Jun 16 '14 at 10:34

adding 300 items in the layout root will definatly make page load slow. you need to use controls that implement virtulization like listbox. here is how

ListBox XAML in your page.

<ListBox Name="myListBox" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Image Source="{Binding ImageUrl}">
                        </Image>
                        <TextBlock Text="{Binding Question}"></TextBlock>
                        <TextBlock Text="{Binding Answer}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

your code behind

code to bind data 

  List<MyData> list = new List<MyData>();
        for (int i = 0; i < 300; i++)
        {
            var data = new MyData();
            data.Question = "//yourquestion";
            data.Answer = "// your answer";
            data.ImageSource = new BitmapImage(new Uri("yourimagepat"));
        }
        myListBox.ItemsSource = list;

Data Class

  public class MyData {
    public string Question { get; set; }

    public string Answer { get; set; }

    public BitmapImage ImageSource { get; set; }
}

to take advantage of the virtulization please add your listbox in Grid control. otherwise it can throw out of memory exception and also will be slow

Thanks in my case i dont have a list box its, custom class which extends panel — user2056563, Jun 16 '14 at 10:36
my collegue had even sent you the project via mail ? do you remember ? — user2056563, Jun 16 '14 at 10:39
Ah the same issue yes i remembered I did not find that much time to solve that problem I will try it tonight and if can fix the issue than will email back. :( — Muhammad Saifullah, Jun 16 '14 at 10:41
Please let me know or mail me if you are able to fix that, thanks — user2056563, Jun 16 '14 at 14:12

score 0 · Answer 2 · edited May 23 '17 at 10:25

You could try using DataBinding feature instead of creating this .

 // You can bound items from your Class here

<ListBox x:Name="ListBox1" Margin="5"
 Width="450" Height="200" HorizontalAlignment="Left"
 ItemsSource="{Binding SongsList}">
ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel CleanUpVirtualizedItemEvent="VirtualizingStackPanel_CleanUpVirtualizedItemEvent_1">
                </VirtualizingStackPanel>
            </ItemsPanelTemplate>

 <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" Margin="2">
        <TextBlock Text="Artist:" Margin="2" />
        <TextBlock Text="{Binding Artist}" Margin="2" />
        <TextBlock Text="CD:" Margin="10,2,0,2" />
        <TextBlock Text="{Binding Name}" Margin="2" />
     </StackPanel>
  </DataTemplate>
</ListBox.ItemTemplate>

// your class should be like this
public Songs
{
 public string Artist{get;set;}
 public string Name {get;set;}
}

// CodeBehind Just Add Data

ObservableCollection<Songs> SongsList=new ObservableCollection<SongsL();

for (int j = 0; j <= 300; j++)
{
   SongsList.Add(new Songs{Artist="Aritst Name",Name="Song Name"});
}

// Set this Collection from the codebehind or xaml .
ListBox1.ItemSource=SongsList; // it will the bind the public properties in this Songs.

DataBinding Controls on Windows phone

Msdn Databindin greference

Binding data Grid

Databinding from Jesse Liberty

I tried this it gives me Out of memory error.any other solution — user2056563, Jun 16 '14 at 10:34
[StackReference](http://stackoverflow.com/questions/13816569/why-do-i-get-an-outofmemoryexception-when-i-have-images-in-my-listbox?rq=1) — Eldho, Jun 16 '14 at 10:40

Reuse Dynamically created view

2 Answers2