create buttons into listbox using ObservableCollection in wp8 C#

Question

In my windows phone application I want to add buttons dynamically When I click on Add button as you can see on the image:

And below is the code that I am using on the Add button.

xaml page code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="24,0,0,0">
            <TextBox x:Name="tb_groupname"
                 Height="90"
                 Background="White" 
                 Margin="0,0,125,517"

                 Foreground="Blue" TextChanged="tb_groupname_TextChanged" GotFocus="tb_groupname_GotFocus" LostFocus="tb_groupname_LostFocus"/>
            <Button x:Name="btn_groupname"
                    Content="Add"
                    Background="AliceBlue"
                    Foreground="Blue"
                    FontSize="25"
                    Width="120"
                    Height="90"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top" Click="btn_groupname_Click"></Button>
            <ListBox x:Name="lb_groupofcontacts" ItemsSource="{Binding}" Margin="0,118,0,0">
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="{Binding Name}" Width="100" Height="100" Click="btn_Click"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox>
        </Grid>

xaml.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Microsoft.Phone.UserData;
using System.Windows.Media;
using Microsoft.Phone.Maps.Controls;
using System.Collections.ObjectModel;

namespace GetContacts
{
    public partial class createGroups : PhoneApplicationPage
    {
        string buttonName = "";
        public ObservableCollection<Group> groupbtn;      
        List<Button> buttons = new List<Button>();
        public createGroups()
        {
            InitializeComponent();
        }

        private void btn_groupname_Click(object sender, RoutedEventArgs e)
        {

            if (tb_groupname.Text != string.Empty)
            {
                groupbtn = new ObservableCollection<Group>()
                {
                    new Group {Name = tb_groupname.Text}
                };
                lb_groupofcontacts.DataContext = groupbtn;
            }
        }
        private void btn_Click(object sender, RoutedEventArgs e)
        {
          // some code
        }

    }
}

And Group is my class below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using GetContacts.Resources;
using Microsoft.Phone.UserData;

namespace GetContacts
{
    class Group
    {
        public string Name { get; set; }

        public Group()
        { 

        }
        public Group(Button btn)
        {
            Name = btn.Name;

        }
    }
}

But I am getting error below at this line public ObservableCollection<Group> groupbtn; and at this reference groupbtn

Inconsistent accessibility: field type 'System.Collections.ObjectModel.ObservableCollection<GetContacts.Group>' is less accessible than field

Kindly suggest me, waiting for your reply. Thanks.

Answer 1

You are creating new list every time and hence at a given time it will just has one button that you most recently add.

so instead of defining List<Button> buttons = new List<Button>() locally. So either make this collection member variable

OR use proper MVVM to do it correctly. (Still this is not the proper example of using MVVM but trying to make it as close as possible for your solution) I would suggest you to define the properties like below (Implement INotifyPropertyChanged)

       public  ObservableCollection<string> Buttons{get;set;}
       public  string ButtonName{get;set;}

and bind your textbox and define ItemTemplate for your ListBox like:

    <TextBox x:Name="tb_groupname" Text="{Binding ButtonName}"/>
    <ListBox x:Name="lb_groupofcontacts" ItemsSource="{Binding Buttons}" Margin="0,118,0,0">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <Button FontSize="25" Width="120" Height="90" Content="{Binding}"></Button>
           </DataTemplate>
       </ListBox.ItemTemplate>
    </ListBox>

now just initialize you button collection in the initialize method

     public MainWindow()
     {
        InitializeComponent();

        Buttons = ObservableCollection<string>();
        DataContext = this;
     }


private void btn_groupname_Click(object sender, RoutedEventArgs e)
{
    if (ButtonName != string.Empty)
    {
            Buttons.Add(ButtonName);
           ButtonName = string.Empty;
    }            
}

Inconsistent accessibility error: Generally this happens because your field or class is private. You must change it to public

like public class Group {}