Binding with CollectionViewSource

Question

I am trying to implement some combo box sorting using CollectionViewSource. This combo box is actually part of a data template and is repeated in a list view. My first approach seemed to work (using CollectionViewSource) but all my combo boxes shared the same data context. This made it so whenever one of the other boxes was changed all the others changed to reflect - not a desired side effect.

I decided to just pull back and try to implement a basic combo box (not inside a data template) using inline xaml for specifying the CollectionViewSource (as opposed to creating the cvs as a static resource). I have not been able to successfully get my data to display. I'm probably going about this entirely wrong as I'm still new to WPF.

Here is the xaml for my combo box:

<ComboBox>
    <ComboBox.ItemsSource>
        <Binding>
            <Binding.Source>
                <CollectionViewSource Source="{Binding Path=Configurations}">
                    <CollectionViewSource.SortDescriptions>
                        <scm:SortDescription PropertyName="AgencyName" />
                    </CollectionViewSource.SortDescriptions>
                </CollectionViewSource>
            </Binding.Source>
        </Binding>
    </ComboBox.ItemsSource>
</ComboBox>

The DataContext of the user control where this combo box lives is bound to an object which has an ObservableCollection called Configurations and each configuration has a property called AgencyName. I've verified that this works fine using standard binding without the cvs so I know everything is fine in that accord.

Any help would be greatly appreciated as I have ran out of excuses to my boss :). I also don't want to have to drop down into code and do the sorting in the code behind (which I could when I build the ObservableCollection but IMHO that violates the DRY principle).

Answer 1

What exactly do you mean by "whenever one of the other boxes was changed all the others changed to reflect"? Are you talking about the SelectedItem? If so, then it may help setting IsSynchronizedWithCurrentItem = false in your ComboBox.

Beside that: I think as long as you create and sort your ICollectionView in the code behind only once, there is no violation of the DRY principle, because what you do more there is not needed in the XAML anymore. But I see there may be other reasons to say that a feature like sorting should be done in the View, speaking in terms of Model-View-ViewModel.

Answer 2

Didn't read your entire post, but the problem is that resources are shared by default. Each combo box was therefore referencing the same collection view. A collection view includes tracking selection, so changing the selection in one combo box would affect the others.

Rather than move the CVS to a local resource, you could just prevent it from being shared:

<CollectionViewSource x:Key="whatever" x:Shared="False" .../>

Answer 3

While its probably too late, I'm leaving this answer for others who may encounter this problem. Your binding for the CollectionViewSource.Source doesn't work because the CollectionViewSource doesn't belong to the visual/logical tree, and it neither inherits the Data Context nor its able to reference the ComboBox as a source of binding. I was able to solve this in an ugly, but simple way using the following class:

/// <summary>
/// Provides a way to set binding between a control
/// and an object which is not part of the visual tree.
/// </summary>
/// <remarks>
/// A bright example when you need this class is having an 
/// <see cref="ItemsControl"/> bound to a <see cref="CollectionViewSource"/>.
/// The tricky thing arises when you want the <see cref="CollectionViewSource.Source"/>
/// to be bound to some property of the <see cref="ItemsControl"/> 
/// (e.g. to its data context, and to the view model). Since 
/// <see cref="CollectionViewSource"/> doesn't belong to the visual/logical tree,
/// its not able to reference the <see cref="ItemsControl"/>. To stay in markup,
/// you do the following:
/// 1) Add an instance of the <see cref="BindingBridge"/> to the resources 
/// of some parent element;
/// 2) On the <see cref="ItemsControl"/> set the <see cref="BindingBridge.BridgeInstance"/> attached property to the
/// instance created on step 1) using <see cref="StaticResourceExtension"/>;
/// 3) Set the <see cref="CollectionViewSource.Source"/> to a binding which has 
/// source set (via <see cref="StaticResourceExtension"/>) to <see cref="BindingBridge"/>  
/// and path set to the <see cref="BindingBridge.SourceElement"/> (which will be the control 
/// on which you set the attached property on step 2) plus the property of interest
/// (e.g. <see cref="FrameworkElement.DataContext"/>):
/// <code>
///  <CollectionViewSource
///     Source="{Binding SourceElement.DataContext.Images, Source={StaticResource ImagesBindingBridge}}"/>
/// </code>.
/// 
/// So the result is that when assigning the attached property on a control, the assigned 
/// <see cref="BindingBridge"/> stores the reference to the control. And that reference can be 
/// retrieved from the <see cref="BindingBridge.SourceElement"/>.
/// </remarks>
public sealed class BindingBridge : DependencyObject
{
    #region BridgeInstance property

    public static BindingBridge GetBridgeInstance(DependencyObject obj)
    {
        Contract.Requires(obj != null);
        return (BindingBridge)obj.GetValue(BridgeInstanceProperty);
    }

    public static void SetBridgeInstance(DependencyObject obj, BindingBridge value)
    {
        Contract.Requires(obj != null);
        obj.SetValue(BridgeInstanceProperty, value);
    }

    // Using a DependencyProperty as the backing store for BridgeInstance.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty BridgeInstanceProperty =
        DependencyProperty.RegisterAttached("BridgeInstance", typeof(BindingBridge), typeof(BindingBridge),
        new PropertyMetadata(OnBridgeInstancePropertyChanged));

    #endregion BridgeInstance property

    #region SourceElement property

    public FrameworkElement SourceElement
    {
        get { return (FrameworkElement)GetValue(SourceElementProperty); }
        private set { SetValue(SourceElementPropertyKey, value); }
    }

    // Using a DependencyProperty as the backing store for SourceElement.  This enables animation, styling, binding, etc...
    private static readonly DependencyPropertyKey SourceElementPropertyKey =
        DependencyProperty.RegisterReadOnly("SourceElement", typeof(FrameworkElement), typeof(BindingBridge), new PropertyMetadata(null));

    public static readonly DependencyProperty SourceElementProperty;

    #endregion SourceElement property

    /// <summary>
    /// Initializes the <see cref="BindingBridge"/> class.
    /// </summary>
    static BindingBridge()
    {
        SourceElementProperty = SourceElementPropertyKey.DependencyProperty;
    }

    private static void OnBridgeInstancePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var sourceElement = (FrameworkElement)d;
        var bridge = (BindingBridge)e.NewValue;
        bridge.SourceElement = sourceElement;
    }
}

Here is an example of usage (the resource dictionary isn't shown):

 <ItemsControl
        infrastructure:BindingBridge.BridgeInstance="{StaticResource ImagesBindingBridge}">
        <ItemsControl.ItemsSource>
            <Binding>
                <Binding.Source>
                    <CollectionViewSource
                                Source="{Binding SourceElement.DataContext.Images, Source={StaticResource ImagesBindingBridge}, Mode=OneWay}">
                        <CollectionViewSource.SortDescriptions>
                            <componentModel:SortDescription PropertyName="Timestamp" Direction="Descending"/>
                        </CollectionViewSource.SortDescriptions>
                    </CollectionViewSource>
                </Binding.Source>
            </Binding>
        </ItemsControl.ItemsSource>
    </ItemsControl>

Answer 4

Binding depends on VisualTree which cvs is not a visual, so Binding doesn't work.

You can use x:Reference instead.

<Border x:Name="border" />
<ComboBox>
    <ComboBox.ItemsSource>
        <Binding>
            <Binding.Source>
                <CollectionViewSource Source="{Binding Path=DataContext.Configurations, Source={x:Reference border}}">
                    <CollectionViewSource.SortDescriptions>
                        <scm:SortDescription PropertyName="AgencyName" />
                    </CollectionViewSource.SortDescriptions>
                </CollectionViewSource>
            </Binding.Source>
        </Binding>
    </ComboBox.ItemsSource>
</ComboBox>