How can i set the command of a button within a DataTemplate to the data context of the parent element

Question

I have a listbox which binds to a observable collection in my view model (the user controls data context).

DeviceDetector driveDetector;
public DriveSelector()
{
    InitializeComponent();

    driveDetector = DeviceDetector.Instance;
    DataContext = driveDetector;
}

This is my code for my listbox

<ListBox Style="{StaticResource ListBoxStyle}" ItemsSource="{Binding DriveCollection}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Button Width="70" Style="{StaticResource DriveButtonStyle}" Command="{Binding SimpleMethod}">
                                <StackPanel>
                                    <Image Source="{Binding Image}" Style="{StaticResource DriveImageStyle}"/>
                                    <Label Content="{Binding Name}" Style="{StaticResource DriveLabelStyle}"/>
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

I have implemented ICommand and when i bind to the command outside of the listbox like so:

<Button Command="{Binding SimpleMethod}"/>

Everything is fine. However when i try to bind the command to the button's inside the listbox's datatemplate i get this error:

System.Windows.Data Error: 40 : BindingExpression path error: 'SimpleMethod' property not found on 'object' ''DriveInfo' (HashCode=6377350)'. BindingExpression:Path=SimpleMethod; DataItem='DriveInfo' (HashCode=6377350); target element is 'Button' (Name=''); target property is 'Command' (type 'ICommand')

I can see that the datacontext of the button is to the model and so the method 'SimpleMethod' cannot be found. Is there a way that i can bind the command to the datacontext of the listbox itself?

Answer 1

You can reference the window or page top level DataContext like this:

 <Button Content="{StaticResource Whatever}"
      DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=Page}}"
      CommandParameter="{Binding}"
      Command="{Binding SimpleMethod}" />

Answer 2

What is owner of SimpleMethod? DataContext or item of collection? I suspect that DataContext. Move SimpleMethod to item class from DataContext class. Or use RelativeSource like this Bind to ItemsControl's DataContext from inside an ItemTemplate

Answer 3

How i managed to solve my problem:

Firstly i created a static resource of my view model. Then bound it to my datacontext in xaml

<UserControl.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/Styles;component/Resources.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <vm:DeviceSelectorViewModel x:Key="myViewModel" x:Name="myVM" />
    </ResourceDictionary>
</UserControl.Resources>

<UserControl.DataContext>
    <StaticResourceExtension ResourceKey="myViewModel"/>
</UserControl.DataContext>

Which allowed me to then change the source of the command to the (static resource) view model like so:

<Button Width="70" Style="{StaticResource DriveButtonStyle}" Command="{Binding SimpleCommand, Source={StaticResource myViewModel}}" >

Thanks for the replies!