Cannot use DataContext of parent from within styles

Question

I got some problems accessing a specific DataContext from within a Style.
I have a DataGrid defined like this:

<DataGrid Name="ReferenceDataGrid" ItemsSource="{Binding Items}" AutoGenerateColumns="False" RowHeaderWidth="0" IsReadOnly="True">
    <DataGrid.Resources>
        <Style TargetType="DataGridRow">
            <Setter Property="ContextMenu">
                <Setter.Value>
                    <ContextMenu>
                        <MenuItem Header="Delete" Command="???" />
                    </ContextMenu>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
    ...

The DataContext property of the Page containing this DataGrid is set to

DataContext="{Binding RelativeSource={RelativeSource Self}}"

I want to bind a RelayCommand to the MenuItem and tried several different ways to do this:

• Command="{Binding DeleteCommand}"
• Command="{Binding ElementName=Root, Path=DeleteCommand}" // Page element's name set to Root
• Command="{Binding ElementName=Root, Path=DataContext.DeleteCommand}"
• Command="{Binding Path=DataContext.DeleteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGrid}}}"

I set a breakpoint in the command handler of DeleteCommand but none of the variations above got there.

Let's say Items contains elements of type Foo.
If I define the command in Foo the handler gets triggered so it seems that whatever I've done above, the DataContext of each DataGridRow seems to be the list element itself.

Any idea what to do about it?

Edit:
I also tried to extract the DataContext into a separate class and reference this instead of Relative Self as I thought the list elements might use Relative Self as their DataContext instead of the Page instance it refers to. Unfortunately I was wrong.

Answer 1

Since you are only interested in commands in one place, there's another way to do this you might find useful. Define the contextmenu as a resource where it can grab that datacontext, then apply that to the datagrid rows. I've done this on a sample which was originally intended for another purpose so my objects and stuff are different.

<DataGrid 
    ItemsSource="{Binding Users}" 
    Background="White" 
    Name="dg"
    SelectedItem="{Binding SelectedUser}"
          >
    <DataGrid.Resources>
        <ContextMenu x:Key="dgContextMenu"
                     DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=DataGrid}}">
            <MenuItem Header="Up" Command="{Binding UpCommand}" />
        </ContextMenu>
    </DataGrid.Resources>
    <DataGrid.RowStyle>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="ContextMenu" Value="{StaticResource dgContextMenu}"/>

DataContext inherits down the visual tree, so the datagrid gets the same datacontext as a page or window or whatever it's in. My contextmenu is actually in the datagrid and can get it's datacontext.

I also bind selecteditem so I can use that to work out which specific row was clicked.

In the viewmodel for the window I have a command "UpCommand" that uses properties of the selected user.

    public RelayCommand UpCommand { get; set; }
    public MainWindowViewModel()
    {
          UpCommand = new RelayCommand(UpExecute);
    }
    public User SelectedUser { get; set; }
    private void UpExecute()
    {
        MessageBox.Show($"You Upped {SelectedUser.Title}");
    }

You could remove the selected user from Users and or use it's ID to delete the record off a database or whatever delete is to do.

Answer 2

<ContextMenu  DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}">
    <MenuItem Header="Delete"  Command="{Binding DataContext.DeleteCommand}" />
</ContextMenu>

As you could see in answer to the duplicate question, that the problem is:

The ContextMenu is outside of the visual tree

If you don't want to put the DeleteCommand to the object, which is an entry in Items, than you can setSource propery for Binding with x:Reference.

<DataGrid Name="ReferenceDataGrid" ItemsSource="{Binding Items}" AutoGenerateColumns="False" RowHeaderWidth="0" IsReadOnly="True">
    <DataGrid.Resources>
        <Style TargetType="DataGridRow">
            <Setter Property="ContextMenu">
                <Setter.Value>
                    <ContextMenu  DataContext="{Binding Path=DataContext, Source={x:Reference ReferenceDataGrid}}">
                        <MenuItem Header="Delete"  Command="{Binding DeleteCommand}" />
                    </ContextMenu>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>