PreviewMouseWheel event handler for WPF Canvas doesn't trigger on the event

Question

I developed a WPF UserControl that has two instances of Canvas - one in another (the Usercontrol was developed using Caliburn.Micro). Below is UserControl XAML.

<UserControl x:Class="ChartControl.LineChart"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ChartControl"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">

    <!--Main layout greed.-->
    <Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
    <!--Layout greed for canvases-->
    <Grid  Margin="0,0,0,0" x:Name ="chartGrid" Grid.Column="1" Grid.Row="1"
           ClipToBounds="False" Background="Transparent" SizeChanged="chartGrid_SizeChanged">
        <!-- Height and Width of this Canvas are equal to Heigt and Width of Greed where this canvase is-->
        <Canvas Margin="2" Name="textCanvas" Grid.Column="1" Grid.Row="1" ClipToBounds="True" Background="Aqua"
            Width="{Binding ElementName=chartGrid, Path=ActualWidth}" Height="{Binding ElementName=chartGrid, this Path=ActualHeight}">
            <Canvas Name="chartCanvas" ClipToBounds="True" PreviewMouseWheel="chartCanvas_PreviewMouseWheel"/>
        </Canvas>
    </Grid>
</Grid>
</UserControl>

The enclosed "chartCanvas" Canvas is for chart drawing and has PreviewMouseWheel event handler.

private void chartCanvas_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
{
    double dx = e.Delta;
    double dy = e.Delta;
    // Change X min coordinate of the chart.
    _chartStyle.Xmin = _chartStyle.Xmin + (_chartStyle.Xmax - _chartStyle.Xmin) * dx / chartCanvas.Width;
    // Change X max coordinate of the chart.
    _chartStyle.Xmax = _chartStyle.Xmax - (_chartStyle.Xmax - _chartStyle.Xmin) * dx / chartCanvas.Width;
    // Change Y min coordinate of the chart.
    _chartStyle.Ymin = _chartStyle.Ymin + (_chartStyle.Ymax - _chartStyle.Ymin) * dy / chartCanvas.Height;
    // Change X nax coordinate of the chart.
    _chartStyle.Ymax = _chartStyle.Ymax - (_chartStyle.Ymax - _chartStyle.Ymin) * dy / chartCanvas.Height;
    // Prepair canvases to redrawing.
    chartCanvas.Children.Clear();
    textCanvas.Children.RemoveRange(1, textCanvas.Children.Count - 1);
    // Draw vertical and horizontal grid lines.
    _chartStyle.AddChartStyle(tbTitle, tbXLabel, tbYLabel);
    // Draw the chart curve.
    _chartStyle.SetLines(DataCollection);
}

In the same solution where UserControl is I have a WPF application. This is MVVM application and was developed using Caliburn.Micro. This application uses the Usercontrol mentioned above.

<!--The Applicaion main view-->
<UserControl x:Class="ChartDrawer.Views.MainWindowView"
 . . . . . . . . . . . . . . . .
    <!--Here the usercontrol is included in the application-->
    xmlns:local="clr-namespace:ChartControl;assembly=ChartControl"
 . . . . . . . . . . . . . . . .
>
    . . . . . . . . . . . . . . . .
    <!--Here is the binding of application properties as sources to the Usercontrol properties as targets-->
    <local:LineChart Grid.Row="3" Grid.Column="0" DataCollection="{Binding DataCollection}" Xmin="{Binding Xmin}" Xmax="{Binding Xmax}" XTick="{Binding XTick}" Ymin="{Binding Ymin}" Ymax="{Binding Ymax}" YTick="{Binding YTick}"/>
    . . . . . . . . . . . . . . . .
</UserControl>

My problem is the following. When I run my application, click on chart curve (that is drawn on chartCanvas) and rotate the mouse wheel then chartCanvas_PreviewMouseWheel doesn't fire at all or fires rarely. Before I used MouseWheel event handler for "chartCanvas" and had the same result. What is the reason of this error. Please help!

Answer 1

You need to set chartCanvas Background to Transparent.

<Canvas Name="chartCanvas" ClipToBounds="True" PreviewMouseWheel="chartCanvas_PreviewMouseWheel" Background="Transparent"/>