如何将用户控件属性绑定到 observable 集合中包含的 observable 对象的属性

Question

I am using MVVMLight and need to be able to make programmatic edits to the properties about 12 toggle boxes during the initialization of a View. Since there are so many of them and I would like to iterate through the linked properties I am trying to use an ObservableCollection of an ObservableObject containing the values to be bound to the properties of the toggle buttons. I am unsure if this is a binding issue or incorrect implementation of the INotifyPropertyChanged interface inherited from the ObservableObject .

Here is the class containing the properties I wish to bind to:

public class CavitySelect : ObservableObject
{
    private string _Text;
    public string Text
    {
        get { return _Text; }
        set
        {
            _Text = value;
            RaisePropertyChanged("Text");
        }
    }
    private bool _Visible;
    public bool Visible
    {
        get { return _Visible; }
        set
        {
            _Visible = value;
            RaisePropertyChanged("Visible");
        }
    }
    private bool _Toggle;

    public bool Toggle
    {
        get { return _Toggle; }
        set
        {
            _Toggle = value;
            RaisePropertyChanged("Toggle");
        }
    }

    public CavitySelect()
    {
        Text = "";
        Visible = false;
        Toggle = false;
    }
}

Here is the instantiation of my ObservableCollection :

private ObservableCollection<CavitySelect> _CavTogglesProperties;
public ObservableCollection<CavitySelect> CavTogglesProperties
{
    get { return _CavTogglesProperties; }
    set
    {
        _CavTogglesProperties = value;
        RaisePropertyChanged("CavTogglesProperties");
    }
}

public MyViewModel()
{
    this.CavTogglesProperties = GetCavities();
}    

public ObservableCollection<CavitySelect> GetCavities()
{
    CavitySelect t11 = new CavitySelect();
    CavitySelect t12 = new CavitySelect();
    CavitySelect t13 = new CavitySelect();
    CavitySelect t14 = new CavitySelect();
    CavitySelect t15 = new CavitySelect();
    CavitySelect t16 = new CavitySelect();
    CavitySelect t26 = new CavitySelect();
    CavitySelect t21 = new CavitySelect();
    CavitySelect t22 = new CavitySelect();
    CavitySelect t23 = new CavitySelect();
    CavitySelect t24 = new CavitySelect();
    CavitySelect t25 = new CavitySelect();
    ObservableCollection<CavitySelect> temp = new ObservableCollection<CavitySelect>() {t11,t12,t13,t14,t15,t16,t21,t22,t23,t24,t25,t26};
    return temp;
}

And here is how I am attempting to bind it:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibilty"/>
</Window.Resources>
<Grid Background="#FFF4F4F5" Margin="8,165,8,8"  DataContext="{Binding CavTogglesProperties}">
    <ToggleButton DataContext="{Binding t11}" Content="{Binding Text}" IsChecked="{Binding Toggle}" Visibility="{Binding Visible,Converter={StaticResource BoolToVisibilty}}"/> 
</Grid>

I have confirmed the binding of the View to the ViewModel class is working properly. I have also tried binding without setting the DataContext of the containing Grid first, like:

<ToggleButton DataContext="{Binding CavTogglesProperties[t11]}" ... />

For clarification: Each one of CavitySelect items is related to a toggle button in a GridView, and the properties will be initialized based on an input not shown.

Answer 1

Displaying a collection of items

Your question doesn't make it perfectly clear, but I believe you want to show a list of items in your UI; however, as currently implemented, your XAML is really structured to show a single item.

To show a list, you'll want to look at any of the variety of collection views (eg ListView , GridView , etc.).

For example:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibilty"/>
</Window.Resources>
<Grid Background="#FFF4F4F5" Margin="8,165,8,8">
  <ListView ItemsSource="{Binding CavTogglesProperties}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ToggleButton Content="{Binding Text}" IsChecked="{Binding Toggle}" />
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

To only show specific items, you should filter the list in the ViewModel, rather than binding the visibility. If the items visible doesn't change while being displayed, simply filter the list when you're populating it.

If, however, the visibilities will change and you want the view to reflect those changes, look at implementing a filter for your items source as explained in this question: How do I Filter ListView in WPF? .

As you're already using an ObservableCollection and ObservableObject, everything should automatically update.

Showing a single item from a collection

If I read your question wrong and you want to know how to show a single item from a collection, there's a couple of different ways of approaching this:

1. Expose the individual item as a property on the ViewModel so the View doesn't have to dig into the list.
2. Create a converter that takes in the collection and index, then pulls out the correct item.

I would highly recommend going with option 1, though, as it most conforms with MVVM, producing the cleanest and most testable code.

For example:

private ObservableCollection<CavitySelect> _CavTogglesProperties;
public ObservableCollection<CavitySelect> CavTogglesProperties
{
    get { return _CavTogglesProperties; }
    set
    {
        _CavTogglesProperties = value;
        RaisePropertyChanged("CavTogglesProperties");
    }
}

private CavitySelect _SpecificCavToggle;
public CavitySelect SpecificCavToggle
{
    get { return _SpecificCavToggle; }
    set
    {
        _SpecificCavToggle= value;
        RaisePropertyChanged("SpecificCavToggle");
    }
}

public MyViewModel()
{
    this.CavTogglesProperties = GetCavities();
    this.SpecificCavToggle = this.CavTogglesProperties[0];
}    

public ObservableCollection<CavitySelect> GetCavities()
{
    CavitySelect t11 = new CavitySelect();
    CavitySelect t12 = new CavitySelect();
    CavitySelect t13 = new CavitySelect();
    CavitySelect t14 = new CavitySelect();
    CavitySelect t15 = new CavitySelect();
    CavitySelect t16 = new CavitySelect();
    CavitySelect t26 = new CavitySelect();
    CavitySelect t21 = new CavitySelect();
    CavitySelect t22 = new CavitySelect();
    CavitySelect t23 = new CavitySelect();
    CavitySelect t24 = new CavitySelect();
    CavitySelect t25 = new CavitySelect();
    ObservableCollection<CavitySelect> temp = new ObservableCollection<CavitySelect>() {t11,t12,t13,t14,t15,t16,t21,t22,t23,t24,t25,t26};
    return temp;
}