Doesn´t hand MenuItem Click into viewmodel

Question

I have this style into ResourceDictionary. This is a ToggleButton´s list. I add a contextMenu to each button and I want to hand into the viewmodel the click event. I have the method Editindicator into viewmodel. When I run the project and i click over contextmenu item it broke and show this error "{"No target found for method Click."}". I think that this error is owing to menuitem has lost viewmodel´s datacontext. Can anyone help here? Thanks a lot in advice.

<Style x:Key="ListBoxStyleIndicador" TargetType="{x:Type ListBoxItem}">
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="2,0,2,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate x:Name="ListBoxStyleIndicadorTemplate" TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Bd"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}" 
                        Padding="{TemplateBinding Padding}" 
                        SnapsToDevicePixels="true">
                    <Controles:ToggleButtonIndicador 
                        Content="{Binding NombreIndicador}" 
                        IdBIIndicadores="{Binding IdBiIndicadores}" 
                        IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" 
                        Style="{DynamicResource BotonNegro}"
                        Padding="6,2"                             
                        ToolTip="{Binding Descripcion}">
                        <Controles:ToggleButtonIndicador.ContextMenu >
                            <ContextMenu>
                                <MenuItem Header="Editar">
                                    <MenuItem.Icon>
                                        <Image Source="{DynamicResource ImagenBotonEditar}" />                                            
                                    </MenuItem.Icon>
                                    <Interactivity:Interaction.Triggers>
                                        <Interactivity:EventTrigger EventName="Click">
                                            <cal:ActionMessage MethodName="EditIndicator" />
                                        </Interactivity:EventTrigger>
                                    </Interactivity:Interaction.Triggers>
                                </MenuItem>                                  
                            </ContextMenu>
                        </Controles:ToggleButtonIndicador.ContextMenu>
                    </Controles:ToggleButtonIndicador>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsSelected" Value="{Binding Seleccionado, Mode=TwoWay}"/>        
</Style>

Answer 1

Since ContextMenu is not a part of your Visual tree, you won't get reference to the DataContext of your ViewModel which is set for your UserControl. There are two ways to get the datacontext for your control -

• Set explicitly dataContext for your ContextMenu using the PlacementTarget. Look at my answer here - cannot set tooltip in style

• Use Proxy binding. Look at my answer here - Binding from items in ItemsControl to ItemControl's DataContext

Edit : For DataContext you can do like this -

<Controles:ToggleButtonIndicador Tag="{Binding DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}>
                        <Controles:ToggleButtonIndicador.ContextMenu >
                            <ContextMenu DataContext={Binding PlacementTarget.Tag, RelativeSource={RelativeSource Self}}>
                                <MenuItem Header="Editar">
                                    <MenuItem.Icon>
                                        <Image Source="{DynamicResource ImagenBotonEditar}" />                                            
                                    </MenuItem.Icon>
                                    <Interactivity:Interaction.Triggers>
                                        <Interactivity:EventTrigger EventName="Click">
                                            <cal:ActionMessage MethodName="EditIndicator" />
                                        </Interactivity:EventTrigger>
                                    </Interactivity:Interaction.Triggers>
                                </MenuItem>                                  
                            </ContextMenu>
                        </Controles:ToggleButtonIndicador.ContextMenu>
                    </Controles:ToggleButtonIndicador>

I am assumsing that your viemodel is binded to DataContext property of your UserControl.

Answer 2

In case it might help anyone. Before using the following example code, it is highly recommended to read Attaching a Virtual Branch to the Logical Tree in WPF on CodeProject. You would know why the problem occurs and how to solve it elegantly.

Here is the quick example.

// Add a DataContextBridge.
<UserControl.Resources>
    <FrameworkElement x:Key="DataContextBridge" />
</UserControl.Resources>

// Bind.
<UserControl.DataContext>
    <Binding
        Mode="OneWayToSource"
        Path="DataContext"
        Source="{StaticResource DataContextBridge}" />
</UserControl.DataContext>

// Trigger a click event.
<ContextMenu>
    <MenuItem>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:CallMethodAction
                    TargetObject="{Binding Source={StaticResource DataContextBridge}, Path=DataContext}"
                    MethodName="OnClick" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </MenuItem>
</ContextMenu>

Thanks.