SL Firing a Command from Within a ListItem Data Template, to a ViewModel for the MainPage.xaml

I may be making this more complicated than necessary ... but here goes.

I have my MainPage.xaml, in there I have references to two other UserControl's, ResultsView, and DetailsView.

Inside of the ResultsView, I have a ListBox bound to an ObservableCollection of custom items, I have a DataTemplate that is rendering each item. The item has a CaseID, and when I click on it, it's displayed as a HyperlinkButton, I need a Command I've set in the MainPageViewModel to fire, which handles changing the visibility to hide the ResultsView, and show the DetailsView.

How do I bind the Command of the Hyperlinkbutton to the Command located in my MainPageViewModel?

Thanks in advance!

edit for clarification:

MainPage.xaml

<resultsView:ResultsView/>
<detailsView:DetailsView/>

Each of the two views (ResultsView & DetailsView) have their own ViewModel. So I'm going from my DataTemplate which resides in a ListBox inside my ResultsView, I need to go up to the MainPageViewModel, an extra step than your answer mentioned. Tried your method naming my MainPage.xaml to Name="mainPage", and using that as the ElementName in my HyperlinkButton, but no luck. I'll do some research on the RelativeSource option and see if I can make that work.

Thanks for your help so far.

edit 2: Forgot to add that the DataTe开发者_如何学运维mplate is in a ResourceDictionary, not in the ResultsView.

Well, it depends on the specific details, not all of which you've told us, but I can give you some examples.

Let's say that your DataTemplate for the custom items resides in the XAML of the ResultsView user control. That's a good spot for it but you might have put it in a resource dictionary.

As you say, the ListBox is bound to the collection of custom items. Let's further assume that the custom items collection is itself a property in your MainPageViewModel. And you've said clearly that the command you want to bind to is also in MainPageViewModel.

So the problem, which is a very common one, is that you are working inside a template associated with a binding to a collection, and so your DataContext is a custom item. It is no longer the main view-model itself. That's great as you show appropriate properties of the custom item like CaseID. But it's not great when you want to escape to the top-level of view-model.

If what I've said is true, then the ResultsView user control is in fact probably bound to the MainPageViewModel because you haven't "drilled into" the custom items collection yet. So, what you need to do is find a way using the binding syntax to reference the ResultsView user control from inside the DataTemplate for the ListBox. If you can do that, then you've escaped the collection.

There are two main approaches to do this:

• ElementName syntax
• RelativeSource syntax

I'll describe ElementName syntax and you can look up the other one.

Part 1) Name your ResultsView UserControl element like this:

<UserControl ....
    Name="resultsView">
    <!-- ... -->

Part 2) Inside your DataTemplate where you are defining the appearance of the hyperlink use the ElementName syntax to refer to that element:

<TextBlock>
    <Hyperlink Command="{Binding DataContext.ItemDetailsCommand, ElementName=resultsView}"/>
</TextBlock>

So first we use ElementName to get the ResultsView UserControl element, and then we have a path with two pieces: the first piece is the DataContext property of the ResultsView which gives us the MainPageViewModel (yeah!), and then the property of the command we want to invoke.

That's one way to "escape" the binding and issue commands found at a higher level in the view-model.