WPF Binding on Nested ItemControls with Sub Collec

Question

I have the following xaml:

<ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=Type}"></TextBlock>
                <TextBox Text="Search...."></TextBox>
                <ItemsControl>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <CheckBox Content="{Binding Path=Values}"></CheckBox>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

With the following objects/collection(s):

public class FilterViewModel
{
    public string Type { get; set; }
    public ObservableCollection<string> Values { get; set; }
}

public class ResearchLanguageViewModel
{
    public int FirmCount { get; set; }
    public ObservableCollection<FilterViewModel> Filters { get; set; } 
}

I'm trying to bind on the Filters property and the Type property comes out fine. However, I am having trouble getting the Values collection of strings to show as a group of checkboxes. Not sure what I'm doing wrong here...

Answer 1

Bind your item controls, ItemSource property to values.

For a string, you won't even need a template. In your model, you have a collection of strings, so binding to a checkbox template does provide some UI enhancement but my betting is you want the checked status represented in the view model too.

You might want to consider creating an object to encapsulate your label and Checked status and defining your collection based on that.

public class CheckModel
{
    public string Label {get; set;}
    public bool Checked { get; set; }
}

Then bind your checkbox to:

<CheckBox IsChecked="{Binding Checked}" Content="{Binding Label}" />

I hope this helps.

Answer 2

Values in your View Model is an array, and you are trying (I'm assuming) to create an array of Checkboxes with the values of each checkbox being the index value into that array.

In your model, you are passing in the array of values into the content of one single checkbox control. What you need to do is bind the array to the parent's ItemsSource and bind the new value to the Checkbox control's content. Something like this:

<ItemsControl ItemsSource="{Binding ResearchLanguageViewModel.Filters, Mode=OneWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=Type}"></TextBlock>
                <TextBox Text="Search...."></TextBox>
                <ItemsControl>
                    <ItemsControl.ItemTemplate ItemsSource={Binding Path=Values}>
                        <DataTemplate>                              
                            <CheckBox Content="{Binding Mode=TwoWay}"></CheckBox>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 3

You will want to bind Values to the ItemsControl not the Checkbox,

 <StackPanel>
    <TextBlock Text="{Binding Path=Type}"></TextBlock>
    <TextBox Text="Search...."></TextBox>
    <ItemsControl ItemsSource="{Binding Values}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <CheckBox Content="{Binding}"></CheckBox>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</StackPanel>