Bind a listbox inside a listbox to an observable collection? Best approach?

Question

In xaml, I have a listbox with a grid in it with 1 row and 2 columns. In the first column I have a name, and in the second column I have another listbox...I have the first listbox bound to an observable collection of Enclosure items. In the Enclosure class, I have another observablecollection of Servers (another class). I am trying to bind this to a listbox as well. The EnclosureID is working and updating properly as I add items to the observable collection. However, I am not so sure how to get the Slist to bind to the listbox I have within my other listbox. Anyone have any ideas? Is there another approach I can use?

    public class Enclosure
    {
        private string enclosureID; //bound to the first listbox

        //I want to bind this below to the second listbox
        //There is another class called Server with various properties
        public ObservableCollection<Server> Slist = new ObservableCollection<Server>();

        public string EnclosureID
        {
            get { return enclosureID; }
            set { enclosureID = value; }
        }
    }

In xaml:

    <ListBox x:Name="lb1" ItemsSource="{Binding}" DataContext="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <TextBlock x:Name="txtEnclosure" Text="{Binding Path=EnclosureID}" Background="Aqua" Grid.Column="0" Grid.Row="0" />
                    <ListBox x:Name="lbserver" ItemsSource="{Binding Slist}"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" Grid.Column="1" Grid.Row="0">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock x:Name="txtServer" Text="{Binding Path=HostnameID}" Background="Beige"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

To populate lists I use this method:

            //Query the database for enclosures and populate the Enclosure observable collection in the Settings class
    public void GetEnclosures()
    {
        bool exception = false;
        Enclosure enclosure = new Enclosure();
        Server server = new Server();
        server.HostnameID = "HEY";

        OleDbCommand GetEnclosuresCommand = new OleDbCommand(Settings.GetEnclosuresQuery, Settings.conn);

        Settings.conn.Open();
        try
        {
            Settings.myReader = GetEnclosuresCommand.ExecuteReader();//begin reading
        }
        catch
        {
            MessageBox.Show("The Enclosure table is currently being used by another application. Please close the table and run this application again.");
            Settings.conn.Close();
            exception = true;
        }

        if (!exception)
        {
            // while there are enteries to retrieve
            while (Settings.myReader.Read())
            {
                enclosure.EnclosureID = Settings.myReader.GetString(0);
                enclosure.Slist.Add(server);
                Settings.Elist.Add(enclosure);
                enclosure = new Enclosure();
                server = new Server();
                server.HostnameID = "HI";
            }

            // Close when done reading.
            Settings.myReader.Close();

            // Close the connection.
            Settings.conn.Close();
        }
        else
        {
            this.NavigationService.Navigate(new Uri("MainPage.xaml", UriKind.Relative));
        }

    }

I think i have an idea what is going wrong, but can you also post the code that calls GetEnclosures and sets the DataContext of the UI? — Kevin DiTraglia
Actually I think I know the problem, change Slist to be a property, just add a getter and setter, otherwise it can't be bound to the UI — Kevin DiTraglia

Kevin DiTraglia Kevin DiTraglia · Accepted Answer · 2012-06-17T17:58:04

Could be wrong, but isn't as as simple as...

<ListBox 
  x:Name="lbserver" 
  ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
  Grid.Column="1" 
  Grid.Row="0" 
  ItemsSource="{Binding Slist}">

Also change this

public ObservableCollection<Server> Slist = new ObservableCollection<Server>();

to say

public ObservableCollection<Server> Slist { get; set; }
//...
Slist = new ObservableCollection<Server>();

Bind a listbox inside a listbox to an observable collection? Best approach?

1 Answers