How to bind custom Events in Silverlight using MVVM Pattern w/o using Blend?

Question

I'm developing a Silverlight Project which involves Chart Controls.

I'm using Chart Control & on its series I've implemented Left Click Context Menu which has two MenuItems viz. "Expand" & "Drill".

public class WebChart : Chart
{
     ContextMenu ChartItemDataMenu;

     public WebChart()
        : base()
    {
        this.Loaded += new RoutedEventHandler(WebChart_Loaded);
    }

    private void WebChart_Loaded(object sender, RoutedEventArgs e)
    {
        MenuItem expand = new MenuItem();
        expand.Click += new RoutedEventHandler(OnExpand_Click);
        ToolTipService.SetToolTip(expand, "Expand");

        MenuItem drill = new MenuItem();
        drill.Click += new RoutedEventHandler(OnDrill_Click);
        ToolTipService.SetToolTip(drill, "Drill");

        ChartItemDataMenu = new ContextMenu();

        ChartItemDataMenu.Items.Add(expand);
        ChartItemDataMenu.Items.Add(drill);

        this.DataItemMouseLeftButtonDown += 
            new EventHandler<DataItemMouseEventArgs>(ExtendedXamWebChart_DataItemMouseLeftButtonDown);

        this.MouseRightButtonDown -= (s, eventArgs) => { eventArgs.Handled = true; };
        this.MouseRightButtonDown += (s, eventArgs) => { eventArgs.Handled = true; };
    }

    private void ExtendedXamWebChart_DataItemMouseLeftButtonDown(object sender, DataItemMouseEventArgs e)
    { 
        ChartItemDataMenu.IsOpen = true;
    }

For both the Menu Items I've declared seperate click events, registered them and raised them. Then I've bonded these events in XAML to ICommand Properties in the View Model.

    public delegate void WebChartEventHandler(object sender, DataItemMouseEventArgs e, DataPoint dp, qcPoint qp);

    public event WebChartEventHandler ExpandClickEvent;
    public event WebChartEventHandler DrillClickEvent;

    private void OnDrill_Click(object sender, RoutedEventArgs e)
    {
        if (currentDataItemMouseEventArgs == null)
            currentDataItemMouseEventArgs = new DataItemMouseEventArgs();
        if (DrillClickEvent != null)
        { DrillClickEvent(sender, currentDataItemMouseEventArgs, SelectedDataPoint, CurrentSelectedPoint); }
    }

    private void OnExpand_Click(object sender, RoutedEventArgs e)
    {
        if (currentDataItemMouseEventArgs == null)
            currentDataItemMouseEventArgs = new DataItemMouseEventArgs();
        if (ExpandClickEvent != null)
        { ExpandClickEvent(sender, currentDataItemMouseEventArgs, SelectedDataPoint, CurrentSelectedPoint); }
    }
}

But on Debugging the Code, I get "ExpandClickEvent" & "DrillClickEvent" as null as there is no one listening to it.

I'm using this WebChart Control in another User Control named ChartBaseControl which in turn is used in another User Control named Graph Control. DataContext is properly getting setup. I've created a ViewModel named ViewModelGraphControl.

I believe there is something I'm missing. Please look after the issue.

Edited Content: XAML:

<extnchart:WebChart Grid.Row="0" x:Name="CTRLWebChart" VerticalAlignment="Stretch" 
                                           Margin="0,-23,0,0" IsDrillEnable="True" 
                                           local:AxisTitleSettings.XAxisTitle="X-Axis" 
                                           local:AxisTitleSettings.YAxisTitle="Y-Axis" 
ChartSeriesCollection="{Binding WebChartSource, Mode=TwoWay}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="DrillClickEvent">
                        <command:EventToCommand Command="{Binding OnDrill_Click}"     PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="ExpandClickEvent">
                        <command:EventToCommand Command="{Binding OnExpand_Click}"     PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <extnchart:ExtendedXamWebChart.Axes>
                    <igWebChart:Axis AxisType="PrimaryX">
                        <igWebChart:Axis.Label>
                            <igWebChart:LabelGroup DistanceFromAxis="2"/>
                        </igWebChart:Axis.Label>
                    </igWebChart:Axis>
                    <igWebChart:Axis AxisType="PrimaryY">
                        <igWebChart:Axis.Label>
                            <igWebChart:LabelGroup FontSize="11"/>
                        </igWebChart:Axis.Label>
                    </igWebChart:Axis>
                </extnchart:ExtendedXamWebChart.Axes>
            </extnchart:ExtendedXamWebChart>

Answer 1

I found the answer to the query.

Instead of using custom Event Handlers, I used Routed Event Handlers as the event is routed between pages.

And in order to send my custom parameters to the ViewModel, I created a new Class named ExtendedRoutedEventArgs and inherited it from RoutedEventArgs class and created fields & properties that I wanted to access.

    public class ExtendedRoutedEventArgs : RoutedEventArgs
    {
        public ExtendedRoutedEventArgs()
            : base()
        {

        }
        private DataItemMouseEventArgs currentDataItemMouseEventArgs;

        public DataItemMouseEventArgs CurrentDataItemMouseEventArgs
        {
            get { return currentDataItemMouseEventArgs; }
            set { currentDataItemMouseEventArgs = value; }
        }

        private DataPoint selectedDataPointe;

        public DataPoint SelectedDataPointe
        {
            get { return selectedDataPointe; }
            set { selectedDataPointe = value; }
        }

        private qcPoint currentSelectedQcPoint;

        public qcPoint CurrentSelectedQcPoint
        {
            get { return currentSelectedQcPoint; }
            set { currentSelectedQcPoint = value; }
        }
    }

Next, I raise my Event in the Following Manner:

public class WebChart : Chart
{
    void OnDrill_Click(object sender, RoutedEventArgs e)
    {
        if (currentDataItemMouseEventArgs == null)

            currentDataItemMouseEventArgs = new DataItemMouseEventArgs();
        if (DrillClickEvent != null)
        {
            DrillClickEvent(sender, new ExtendedRoutedEventArgs
            {
                CurrentDataItemMouseEventArgs = currentDataItemMouseEventArgs,
                SelectedDataPointe = SelectedDataPointe,
                CurrentSelectedQcPoint = CurrentSelectedQcPoint
            });
        }
    }
}