XAML - Bind combobox in DataTemplate to a collection?

Question

Firstly, thank you for taking the time out to read this post. All contributions are very much appreciated.

I'm having difficulty understanding how I can bind a ComboBox ItemsSource within a DataTemplate to an ObservableCollection.

Here's my code thus far:

DataTemplate Template (notice the combo's at the bottom of the template):

<DataTemplate x:Key="ListBoxCustomTemplate">

            <Grid Margin="4" HorizontalAlignment="Stretch" x:Name="lstBoxItemRoomGrid" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontWeight="Bold" Text="{Binding TemplateGroupName}" />

            <Image x:Name="imgDeleteListBoxItem" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Source="/Icons/Print-Groups-Config/delete-32.png" Height="25" Cursor="Hand"
                   ToolTip="Remove template" VerticalAlignment="Center"
                   HorizontalAlignment="Right" MouseLeftButtonUp="imgDeleteListBoxItem_MouseLeftButtonUp">
                <Image.Style>
                    <Style>
                        <Setter Property="Image.Visibility" Value="Hidden" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsMouseOver, ElementName=lstBoxItemRoomGrid}" Value="True">
                                <Setter Property="Image.Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>

            <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding TemplateDescription}" TextWrapping="WrapWithOverflow" />

            <!-- Header Template Selection -->
            <Label Grid.Row="2" Grid.Column="0"  Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Header:" FontWeight="DemiBold" Foreground="DarkGray" />
            <telerik:RadComboBox x:Name="radComboHeaderTemplate" Grid.Row="3" Grid.Column="0" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" 
                                 ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateHeaderID}" />

            <!-- Footer Template Selection -->
            <Label Grid.Row="2" Grid.Column="1" Margin="0,3,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Content="Select Footer:" FontWeight="DemiBold" Foreground="DarkGray" />
            <telerik:RadComboBox x:Name="radComboFooterTemplate" Grid.Row="3" Grid.Column="1" Width="120" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" 
                                 ClearSelectionButtonVisibility="Visible" SelectedValue="{Binding TemplateFooterID}" />

        </Grid>
    </DataTemplate>

When my Window loads, I download the collection data from my database and store into a local collection. Note that there are two Collections, one for each of the 2 ComboBoxes in my DataTemplate.

    //Header Templates
    private ObservableCollection<TemplateHeaderFooter> templatesHeader = new ObservableCollection<TemplateHeaderFooter>();

    //Footer Templates
    private ObservableCollection<TemplateHeaderFooter> templatesFooters = new ObservableCollection<TemplateHeaderFooter>();



    //--- Constructors ---

    public PrintTemplateGroupsConfigWindow()
    {
        InitializeComponent();

        //Download Data From DB
        this.templatesHeader = TemplateHeaderFootersDB.GetAllTemplatesOfType(1);
        this.templatesFooters = TemplateHeaderFootersDB.GetAllTemplatesOfType(2);
    }

How do I get the collection Data templatesFooters & templatesHeader into the the ItemsSources of their respective ComboBoxes?

The datatemplate is for a ListBox.

<telerik:RadListBox x:Name="lstBoxPrintGroupTemplates" Height="300" Width="280" ItemsSource="{Binding}" IsEnabled="False"  
                            ItemTemplate="{StaticResource ListBoxCustomTemplate}" Style="{StaticResource DraggableListBox}" >

Many thanks. Any help is appreciated.

Answer 1

Define properties wrappers over the variables of your collections and then you can bind them to comboboxes as:

ItemsSource="{Binding TemplatesHeader, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"

public ObservableCollection<TemplateHeaderFooter> TemplatesHeader
{
  get{return templatesHeader;}
}

Similarly you can do for other property