locked
Creating Listbox dynamically and adding Custom List Item RRS feed

  • General discussion

  • Hi,

    As per the project requirement, I have to create all the controls at runtime. So I cannot create it in XAML.

    The UI requires a listbox to be created at runtime with custom Items. Listbox Custom Item might be having 2 lines of text, an image and probably a checkbox.

     

    I am new to WP7. As per my investigation till now all I could find was controls created in XAML and then data binding done in cs file.

    But as per the requirement, I need to do all the controls creation in code behind.

     

    One of the link has some code to create data template and add it to listbox.
    Link--> http://stackoverflow.com/questions/248362/how-do-i-build-a-datatemplate-in-c-sharp-code

    However, in SDK it is not recommended. Also I could not find

    FrameworkElementFactory 

     

    Please suggest if anybody has any solutions.

    Thanks in advance.

    Wednesday, December 14, 2011 10:50 AM

All replies

  • Interesting project requirement. You don’t need much xaml, most anything can be done in code behind, just not as easy since it isn’t drag and drop.

     

    This may get you started, create a blank project and copy the code into the mainpage code file. It will dynamically create a listbox with stack panels containing a textblock and a checkbox. Pretty simple code, but you need to add event handlers, and whatever else you need to the stack panel.


            // Constructor  
            public MainPage()  
            {  
                InitializeComponent();  
                CreateListBox();  
                LoadListBox1();  
            }  
     
            ListBox listBox1;  
            void CreateListBox()  
            {  
                listBox1 = new ListBox();  
                listBox1.Height = 100;  
                listBox1.Width = 350;  
                listBox1.HorizontalAlignment = HorizontalAlignment.Left;  
                listBox1.VerticalAlignment = VerticalAlignment.Top;  
                listBox1.Margin = new Thickness(50,150,0,0);  
                ContentPanel.Children.Add(listBox1);  
            }  
     
            void LoadListBox1()  
            {  
     
                for (int ctr = 0; ctr < 10; ctr++)  
                {  
                    //stack panels  
                    StackPanel stk = new StackPanel();  
                    stk.Name = "stack" + ctr.ToString();  
                    stk.Orientation = System.Windows.Controls.Orientation.Horizontal;  
                    stk.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;  
                    //// text blocks   
                    TextBlock txtBlk = new TextBlock();  
                    txtBlk.Name = "txtBlk" + ctr.ToString();  
                    txtBlk.Text = "txtBlk " + ctr.ToString();  
                    txtBlk.FontSize = 30;  
                    txtBlk.VerticalAlignment = System.Windows.VerticalAlignment.Center;  
                    // checkboxes  
                    CheckBox ckBox = new CheckBox();  
                    ckBox.Name = "ckBox" + ctr.ToString();  
                    ckBox.Content = "ckBox" + ctr.ToString();  
                    ckBox.VerticalAlignment = System.Windows.VerticalAlignment.Center;  
                    //Add child elements to stack panel order important, last will be on right  
                    stk.Children.Add(txtBlk);  // index 0  
                    stk.Children.Add(ckBox);  // index 1  
                    //Add to the listbox  
                    listBox1.Items.Add(stk);  
                }  
            }  
     
    Wednesday, December 14, 2011 11:10 PM
  • Thanks a lot Orencosoft for the reply. I hope this will help me. I was confused because all the XAML example that I have gone through had datatemplate in them for custom list items. So first thing I was looking for was creating datatemplate dynamically. Will try your solution and confirm.

    One quick question, The event handlers need to be added to listbox logically right? You mentioned to add it to stack panel. Pardon me if this is trivial, but I am new to WP7 env, mostly worked on C++ based mobile platforms.

    Thanks again :)
    Thursday, December 15, 2011 5:14 AM
  • Your welcome, I come from a C++ background also, but not phones. Never tried doing anything dynamically in xaml, don’t know if you can.

     

    Yes you need to add events to whatever requires them. As far as the stack panel, add more controls you need. One thing worth mentioning, since the stack panel is horizontal, they show up left to right in the order you add them. Also their index starts at 0, and increases for each one.

     

    Some more simple code based on what I posted above. Easier to just post it then explain what to add. This adds an event to the listbox, and an image to the stack panel. Checking / un-checking the checkbox and selecting it in the listbox will change the image and textbox text. For something to display I used project pngs.

     

    Good luck on your project.

     


            // Constructor  
            public MainPage()  
            {  
                InitializeComponent();  
                CreateListBox();  
                LoadListBox1();  
            }  
     
            ListBox listBox1;  
            void CreateListBox()  
            {  
                listBox1 = new ListBox();  
                listBox1.Height = 100;  
                listBox1.Width = 350;  
                listBox1.HorizontalAlignment = HorizontalAlignment.Left;  
                listBox1.VerticalAlignment = VerticalAlignment.Top;  
                listBox1.Margin = new Thickness(50,150,0,0);  
                listBox1.SelectionChanged += new SelectionChangedEventHandler(listBox1_SelectionChanged);  
                ContentPanel.Children.Add(listBox1);  
            }  
     
            void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)  
            {  
                if (listBox1.SelectedIndex == -1) return;  
                StackPanel stackP = (StackPanel)listBox1.SelectedItem;  
                Image im = (Image)stackP.Children.ElementAt(0);  
                TextBlock textB = (TextBlock)stackP.Children.ElementAt(1);  
                CheckBox checkB = (CheckBox)stackP.Children.ElementAt(2);  
                if ((bool)checkB.IsChecked)  
                {  
                    im.Source = new BitmapImage(new Uri("Background.png", UriKind.Relative));   // test image from project    
                    textB.Text = "selected";  
                }  
                else 
                {  
                    im.Source = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.Relative));   // test image from project    
                    textB.Text = "unselected";  
                }  
                listBox1.SelectedIndex = -1;  
            }  
     
            void LoadListBox1()  
            {  
                for (int ctr = 0; ctr < 10; ctr++)  
                {  
                    //stack panels  
                    StackPanel stk = new StackPanel();  
                    stk.Name = "stack" + ctr.ToString();  
                    stk.Orientation = System.Windows.Controls.Orientation.Horizontal;  
                    stk.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;  
                    // create Images     
                    Image img = new Image();  
                    img.Stretch = Stretch.Uniform;  
                    img.Name = "img" + ctr.ToString();  
                    img.Height = 120;  
                    img.Width = 80;  
                    img.Source = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.Relative));   // test image from project    
                    // text blocks   
                    TextBlock txtBlk = new TextBlock();  
                    txtBlk.Name = "txtBlk" + ctr.ToString();  
                    txtBlk.Text = "txtBlk " + ctr.ToString();  
                    txtBlk.FontSize = 30;  
                    txtBlk.VerticalAlignment = System.Windows.VerticalAlignment.Center;  
                    // checkboxes  
                    CheckBox ckBox = new CheckBox();  
                    ckBox.Name = "ckBox" + ctr.ToString();  
                    ckBox.Content = "ckBox" + ctr.ToString();  
                    ckBox.VerticalAlignment = System.Windows.VerticalAlignment.Center;  
                    //Add child elements to stack panel order important, last will be on right  
                    stk.Children.Add(img);  // index 0  
                    stk.Children.Add(txtBlk);  // index 1  
                    stk.Children.Add(ckBox);  // index 2  
                    //Add to the listbox  
                    listBox1.Items.Add(stk);  
                }  
            }  
     
    Thursday, December 15, 2011 3:02 PM
  • Hi Orencosoft,

    Your code has been of great help. Thanks a lot.
    I have been able to create custom listbox item and add it to list box. I used Grid instead of Stack Panel as suggested by one of my colleague.

    Thanks again for quick replies.
    Friday, December 16, 2011 4:36 AM
  • Hi Orencosoft, Sagrian,

    This post was really helpfull to me!! I tried this code in a WP8 and it worked great and smooth

    This post really made my work easier.

    Thanks and greetings.

    Thursday, February 6, 2014 6:24 PM