Accessing the ViewModel Inside a DataTemplate in Silverlight

I’ve been doing a lot of Windows Phone 7 Development, which means that I have also been doing a lot of Silverlight development, so here is a tip for accessing your ViewModel when you’re in a DataTemplate.

In Silverlight, DataTemplates are used when binding data to a control. For example if I want to list users I will define the DataTemplate, which will define the XAML that will be bound to for each of the users in the list. When I do this, the data context for the DataTemplate is my user and no longer the VM. I have a few options here, I can modify the user to have what I need, I can access some global class which has what I need or can access my ViewModel, or I could do what I prefer doing, which is just to name my View.

I give my name a view, and I can then create a binding which accesses an element by name instead of by using its current data context. To do this I can just name my View like this.

<Views:ViewBase
    ...
    x:Name="TheView"
    DataContext="{Binding BarViewModel, Source={StaticResource SL}}">

Then in my binding I can access it using the ElementName property like this. This example is wiring up a Click event using MVVM Light Toolkit’s EventToCommand.

<Custom:Interaction.Triggers>
    <Custom:EventTrigger EventName="Click">
        <Command:EventToCommand 
          Command="{Binding DataContext.DoSomething, ElementName=TheView}" 
          CommandParameter="{Binding}" />
    </Custom:EventTrigger>
</Custom:Interaction.Triggers>