How to bind data to a ListBox in a ControlTemplate?

Question

Hello Stackoverflow users,

What I am trying to do is to create some sort of "rooms"(like a chat group, a sharing center or whatever you want). All the room are created the same way, but each one of them contains different informations. Each of these rooms is contained in a TabItem. I managed to create dynamically all the Tabitems, to give those a Grid and a Canvas. But at the moment I am facing a problem: I created a ControlTemplate Called RoomMenu that will show different buttons and, the most important, the people connected in this room in a ListBox(I retrieve those people from a WebService each time I change the selected Tabitem). But since my ListBox is in a ControlTemplate I have no idea how to access the ListBox ItemSource to bind a generic List to it. Down Below is the code used to create my rooms and their content.

Here is my room menu class:

public class RoomMenu : ContentControl
{
    public RoomMenu()
    {
        DefaultStyleKey = typeof(RoomMenu);
    }

    public string Current_room_id;
    public string FullName;
    public string Rights;
}

And here is the ControlTemplate located in generic.xaml:

    <Style TargetType="test:RoomMenu">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="test:RoomMenu">
                <Grid x:Name="MenuGrid">
                    <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="Black" CornerRadius="2" Background="Black">
                        <StackPanel Orientation="Vertical">
                            <Border x:Name="Room_friend_border" Background="Gray" CornerRadius="4" Margin="5">
                                <ListBox x:Name="current_room_friends" ItemsSource="{Binding ''}" Margin="5" Height="230">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding FullName}" Height="20"/>
                                                <TextBlock Text="{Binding Rights}" Height="20"/>
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </Border>
                            <Border x:Name="Room_menu" Background="Gray" CornerRadius="4" Margin="5">
                                <StackPanel Orientation="Vertical" Margin="10">
                                    <Button Content="Add item" Margin="0,2,0,2"/>
                                    <Button Content="Set changes" Margin="0,2,0,2"/>
                                    <Button Content="Invite friend" Margin="0,2,0,2"/>
                                    <Button Content="Rename room" Margin="0,2,0,2"/>
                                    <Button Content="Delete room" Margin="0,2,0,2"/>
                                </StackPanel>
                            </Border>
                        </StackPanel>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Here is my Dictionnary Class that contains the RoomMenu:

public class Rooms : TabItem
{
    public string Room_guid;
    public string Room_name;
    public string Primary_user_guid;
    public string Room_version;

    public Grid Room_grid;
    public Canvas Room_canvas;
    public RoomMenu Room_menu;
}

And this is when I call my ControlTemplate and Add it to my TabItem's Grid:

    public void Set_rooms_interface()
    {
        foreach (KeyValuePair<string, Rooms> kvp in rooms_list)
        {
            rooms_list[kvp.Key].Room_menu = new RoomMenu();
            rooms_list[kvp.Key].Room_canvas = new Canvas();
            rooms_list[kvp.Key].Room_grid = new Grid();

            //instance grid columns
            rooms_list[kvp.Key].Room_grid.ColumnDefinitions.Add(new ColumnDefinition() {Width = new GridLength(900)});
            rooms_list[kvp.Key].Room_grid.ColumnDefinitions.Add(new ColumnDefinition());

            //Refreshing room canvas
            rooms_list[kvp.Key].Room_canvas.Height = rooms_list[kvp.Key].Room_grid.ActualHeight;
            rooms_list[kvp.Key].Room_canvas.Width = rooms_list[kvp.Key].Room_grid.ActualWidth;
            rooms_list[kvp.Key].Room_canvas = refresh_canvas(kvp.Key);
            Grid.SetColumn(rooms_list[kvp.Key].Room_canvas, 0);
            Grid.SetColumn(rooms_list[kvp.Key].Room_menu, 1);

            //Add Canvas to Grid
            rooms_list[kvp.Key].Room_grid.Children.Add(rooms_list[kvp.Key].Room_canvas);
            rooms_list[kvp.Key].Room_grid.Children.Add(rooms_list[kvp.Key].Room_menu);
            //Setting TabItem Name
            rooms_list[kvp.Key].Header = rooms_list[kvp.Key].Room_name;
            //Adding Grid to TabItem.Content
            rooms_list[kvp.Key].Content = rooms_list[kvp.Key].Room_grid;
            //Adding TabItem to TabControl
            Room_tab.Items.Add(kvp.Value);
        }
    }

I'm sorry if the whole question is a bit long but it was the only way to explain clearly what I was trying to do. So if anyone could give me a hint or answer to do some databinding in a ControlTemplate it would greatly help me.

Thank You.

Answer 1

I think you started in the wrong direction when instantiating UI elements in code. The code behind should only contain one line assigning the people list to the current_room_friends DataContext.

Start with simpler examples of binding data to a ListBox like the beautiful planet example of Bea Stollnitz.