CODEWITHSUNDEEP
c#wpf
A.Pissicat
A.Pissicat

Reputation: 3293

Overlaying elements on image

I have a grid containing an Image (with 2 rows top and bot that I will use later) and another grid containing 4 radio button.

When user click on image, a cross is displayed on the point where he clicked.

There is a part of code :

<Grid Grid.Column="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <Image Grid.Row="0"
           x:Name="ImageViewer"
           Source="{Binding Picture}"
           HorizontalAlignment="Stretch"
           VerticalAlignment="Stretch"
           MouseDown="Image_MouseDown"
           MouseMove="ImageViewer_MouseMove"
           MouseUp="Image_MouseUp"/>

    <local:Cross Grid.Row="0"
                 CenterPoint="{Binding Point1}"
                 Foreground="Red"/>

    <!-- Grid.Row="1" - Grid with RadioButtons -->
</Grid>

With events :

protected bool StartMove = false;
private void Image_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left)
    {
        StartMove = true;
        Point p = e.GetPosition(ImageViewer);
        DrawPoint(p);
    }
}
private void Image_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left)
    {
        StartMove = false;
    }
}
private void ImageViewer_MouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed && StartMove)
    {
        Point p = e.GetPosition(ImageViewer);
        DrawPoint(p);
    }
}

When image is perfectly sized (no border), the cross is correctly drawn. Clicking on my cat eye made this :

enter image description here

But if I resize my window, the cross is moving. I guess that the coordinates are computed considering the white spaces but I don't know how to prevent this.

There it is with the same point :

enter image description here

enter image description here

Upvotes: 0

Views: 191

Answers (2)

Mazyad
Mazyad

Reputation: 75

In fact, it is your image that is moving not the cross. Your problem is that your are catching the position relative to Image UI element, so when you resize your main window you are also resizing your Image element.

Possible solutions:

  • Fixed size Image element
  • or, Recalculate the position of your cross when resize
  • or, Keep your image aligned to top left in your Image

Upvotes: 0

Sinatr
Sinatr

Reputation: 22008

The cross is drawn by local:Cross element. This element layout is matching to Image and you expect it to draw cross relative to Image.

And it does.

The problem is what Image (disregards it's stretching its size) also stretching its source image. You can try to set Image.Stretch to Fill or solve the problem by using another layout (e.g. Stretch="None", making position and size of Cross and Image equal).

Upvotes: 2

Related Questions