Question

I have a window with a number of controls, that necessarily reference each others viewModels. I want to move a group of related controls into a custom UserControl, and when I do I have problems with binding to the now-embedded controls from other controls in the window.

E.g. In my window I have a Grid. In one cell of the Grid I have StackPanel containing two custom UserControls:

<StackPanel>
    <KtWpf:TicketGridControl x:Name="ticketGrid" />
    <KtWpf:TicketViewControl x:Name="ticketView" />
</StackPanel>

In another cell of the Grid, I have another custom UserControl that binds to the current item in the grid:

<local:AddressView x:Name="addressView"
    currentItem="{Binding ElementName=ticketGrid,Path=viewModel.tickets.CurrentItem}" />

And that binding works fine.

But what I want is to move the ticketGrid and the ticketView into a new custom UserControl. This is easily done:

<UserControl
        x:Class="KorEnterprise.EnterpriseMobile.MyTickets"
        ...
        >
    <StackPanel>
        <KtWpf:TicketGridControl x:Name="ticketGrid" />
        <KtWpf:TicketViewControl x:Name="ticketViewControl" />
    </StackPanel>
</UserControl>

And then in the Grid, I replace the StackPanel with:

<local:MyTickets x:Name="myTickets" />

And then I’d expect the binding for addressView to change to:

<local:AddressView x:Name="addressView"
    currentItem="{Binding ElementName=myTickets,Path=ticketGrid.viewModel.tickets.CurrentItem}" />

But this doesn’t work. I get a BindingExpression error at runtime:

System.Windows.Data Error: 40 : 
BindingExpression path error: 'ticketGrid' property not found on 'object' ''MyTickets' (Name='myTickets')'. 
BindingExpression:Path=ticketGrid.viewModel.tickets.CurrentItem; 
DataItem='MyTickets' (Name='myTickets'); 
target element is 'AddressView' (Name='addressView'); 
target property is 'currentItem' (type 'TicketVM')

And I don’t understand why. I get no errors at compile time – and I get no errors in the code.

This, for example, does not throw an exception:

public MainWindow()
{
    ...
    this.applicationExiting += new ApplicationExitingEventHandler(this.myTickets.ticketGrid.applicationExitingEventHandler);
    ...
}

When I walk through in the debugger, this.myTickets exists, and this.myTickets.ticketGrid exists, and the event handler hooks up just fine.

But when the XAML starts doing its silent magic stuff, hooking up the bindings, for some reason this.myTickets.ticketGrid doesn’t exist.

And I’m at a loss to understand why.

Answer 1

I’m not at all sure that this is the best approach, but it does work. It just involves more plumbing than I would have liked.

• Create a view model class, and set an instance of it to be the DataContext for the control.
• Create a ticket collection property on the view model
• Set the view model’s ticket collection to the ticketGrid’s ticket collection, when the user control is constructed
• Bind the AddressView control’s currentItem property to the view model’s ticket collection
• And most important – raise PropertyChanged when the view model’s ticket collection is changed.

This works, but I’d love to find something simpler:

public partial class MyTickets : KorUserControl
{
    public MyTickets()
    {
        InitializeComponent();

        this.DataContext = new MyTicketsVM();
        this.viewModel.tickets = this.ticketGrid.viewModel.tickets;
    }

    public MyTicketsVM viewModel
    {
        get { return this.DataContext as MyTicketsVM; }
    }
}

public class MyTicketsVM : MyViewModelBase
{
    private QueryableCollectionView _tickets;
    public QueryableCollectionView tickets
    {
        get { return this._tickets; }
        internal set
        {
            this._tickets = value;
            notifyPropertyChanged("tickets");
        }
    }
}

<local:AddressView
    x:Name="addressView"
    currentItem="{Binding ElementName=myTickets,Path=viewModel.tickets.CurrentItem}"
    />

(Note: MyViewModelBase implements INotifyPropertyChanged)