question

Primoufi-4675 avatar image
0 Votes"
Primoufi-4675 asked Primoufi-4675 commented

WPF Image mouse pointer coordinates

Hello,

I'm trying to make a custom window which displays an image and allows the user to draw/drag a rectangle on it.

I'm using a Canvas which contains Image and Rectangle. Rectangle is drawn fine according to the pointer location, but I'm having issues with coordinates transformation to the image itself. It works fine on the external screen but it produces location and size errors on my laptop screen.

Main part of the XAML:

 <Grid >
             <Grid.RowDefinitions>
                     <RowDefinition Height="*"/>
                 </Grid.RowDefinitions >
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*"/>
                 </Grid.ColumnDefinitions>
             <Canvas Name="canvas" MouseMove="ctlCanvas_MouseMove" MouseDown="ctlCanvas_MouseDown" MouseUp="ctlCanvas_MouseUp">
                 <Image x:Name="ctlImage" Source="{Binding Image, UpdateSourceTrigger=PropertyChanged}" Width="{Binding Path=ActualWidth, ElementName=canvas}" Height="{Binding Path=ActualHeight, ElementName=canvas}" Stretch="Uniform"/>
                 <Rectangle Stroke="Red" Fill="Transparent" IsHitTestVisible="False" Visibility="{Binding CanvasSelectionVisibility}" Width="{Binding CanvasSelectionWidth}" Height="{Binding CanvasSelectionHeight}" Canvas.Left="{Binding CanvasSelectionPositionLeft}" Canvas.Top="{Binding CanvasSelectionPositionTop}"/>
             </Canvas>
         </Grid >

Code for transforming coordinates from Canvas to the image itself:

         public static System.Drawing.Point GetImageCoordinates(MouseButtonEventArgs e, System.Windows.Controls.Image imageControl)
         {
             System.Windows.Point imageControlPosition = e.GetPosition(imageControl);
             return new System.Drawing.Point((int)Math.Floor(imageControlPosition.X * imageControl.Source.Width / imageControl.ActualWidth), (int)Math.Floor(imageControlPosition.Y * imageControl.Source.Height / imageControl.ActualHeight));
         }

Maybe I'm missing something but I wasn't able to figure it out.

Thank you for your help in advance.

Have a nice day ;),

Primož




dotnet-csharpwindows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

Viorel-1 avatar image
0 Votes"
Viorel-1 answered Primoufi-4675 commented

Check if this works:

 <Image 
     x:Name="ctlImage" 
     HorizontalAlignment="Left"
     VerticalAlignment="Top" 
     Width="{Binding Path=ActualWidth, ElementName=canvas}" 
     Height="{Binding Path=ActualHeight, ElementName=canvas}" 
     Stretch="Uniform" />

In your function:

 return e.GetPosition( ctlImage );
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I added the alignments and change the function as you suggested (without transform) and coordinates does not align with the image at all.

With my original code I noticed the following:

  1. If I run the program on my laptop which is closed but I have two external monitors hooked to it it works fine. Even if I resize the window and draw a rectangle again it works fine.

  2. If I disconnect the laptop from a docking station while the program is still running it works fine on the laptop screen as well.

  3. If I then restart the program while still out of dock it does not work ok.

  4. Restart does nothing.

0 Votes 0 ·