WPF - MouseMove on image contained in Popup

Question

I made a color-picker with one image(HUE color) and a slider (brightness level).

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.8*"/>
        <ColumnDefinition Width="0.2*"/>
    </Grid.ColumnDefinitions>
    <Border x:Name="borderColorChart" Grid.Column="0">
        <Grid>
            <Image Stretch="Fill" Source="Assets/colorChart.PNG" MouseDown="Image_MouseDown" MouseMove="Image_MouseMove"/>
            <Ellipse x:Name="colorMarker" Width="5" Height="5" StrokeThickness="1" Stroke="#FF0B0B0B"/>
        </Grid>
    </Border>
    <Border x:Name="brightnessSliderBorder" Background="{DynamicResource BrightnessGradient}" Grid.Column="1">
        <Grid>
            <Slider x:Name="brightnessSlider" Orientation="Vertical"  IsMoveToPointEnabled="True"  Focusable="False"  Minimum="0.0" Maximum="1.0"  Style="{DynamicResource SliderStyle}" />
        </Grid>
    </Border>
</Grid>

This color-picker is contained in a Popup which open when I click on a toggle button :

<ToggleButton x:Name="SelectColorChannel1" Grid.Row="0" Background="{Binding SelectedCurrentColor, ElementName=Channel1Color}">
    <Popup IsOpen="{Binding IsChecked, ElementName=SelectColorChannel1}" StaysOpen="True">
        <CMiX:ColorPicker x:Name="Channel1Color"/>
    </Popup>
</ToggleButton>

Here is the code for the mousemove :

        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
    {
        var cb = new CroppedBitmap((BitmapSource)(((Image)e.Source).Source), new Int32Rect((int)Mouse.GetPosition(e.Source as Image).X, (int)Mouse.GetPosition(e.Source as Image).Y, 1, 1));
            _pixels = new byte[4];
                cb.CopyPixels(_pixels, 4, 0);
                UpdateCurrentColor();
                UpdateMarkerPosition();
            UpdateSlider();
    }

    private void Image_MouseMove(object sender, MouseEventArgs e)
    {
        if (Mouse.LeftButton == MouseButtonState.Pressed)
        {
            if (e.Source.GetType().Equals(typeof(Image)))
            {
                var cb = new CroppedBitmap((BitmapSource)(((Image)e.Source).Source), new Int32Rect((int)Mouse.GetPosition(e.Source as Image).X, (int)Mouse.GetPosition(e.Source as Image).Y, 1, 1));
                _pixels = new byte[4];
                cb.CopyPixels(_pixels, 4, 0);
                UpdateMarkerPosition();
                UpdateCurrentColor();
                Mouse.Synchronize();
                UpdateSlider();
            }
        }
    }

And here is the function to update the marker position

private void UpdateMarkerPosition()
    {
        _markerTransform.X = Mouse.GetPosition(borderColorChart).X - (borderColorChart.ActualWidth / 2);
        _markerTransform.Y = Mouse.GetPosition(borderColorChart).Y - (borderColorChart.ActualHeight / 2);
    }

The problem is, I can't slide the marker on the image, I can only "click" once to move it, this problem doesn't happen if the color-picker is contained in a ContextMenu. But I need popup, so it stays open while finding the right color on the image and while using the slider.

Any hint ? Thank you

EDIT 1 --- I have done some testing and now as far as I understand the function UpdateMarkerPosition() on MouseMove is not working when I use a popup, but it is working in case I use a contextmenu... Still, UpdateMarkerPosition() is working on MouseDown

EDIT 2 --- Ok so now I know precisely that this condition :

if (Mouse.LeftButton == MouseButtonState.Pressed)

is never true in case I use wpf Popup

Answer 1

Take out Popup control from within ToggleButton . And place it separately outside with its Placement property set to Mouse .