How do i bind the Image size and Canvas in Wpf

Question

I have a hard time solving this problem.

I am creating a program that draws rectangle on canvas and the background is an Image control, that has Pan and Zoom with the help of this code Pan & Zoom Image. Then i added dependency property that returns Rect base from the mouse position But when the Window is resized the drawn rectangle doesn't adjust. but the Image adjust

Here is the Xaml code

  <dpzrm:ZoomBorder IsDrawing="True" Rect="{Binding Rect}">
        <Grid>
            <Image   Source="img_05_l.jpg" x:Name="img"/>

            <ItemsControl ItemsSource="{Binding RectItems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding X}"/>
                        <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </dpzrm:ZoomBorder>

Below is the sample screenshot

This is what it looks like when i resize the window

With the codes above the draw position is correct (drawing using the mouse it falls in the correct coordinates with the mouse) but when i resize the window. the drawn rectangle doesn't follow.

<Canvas Height="{Binding ActualHeight, ElementName=img}" Width="{Binding ActualWidth, ElementName=img}"/>

But when i add this code in binding. The drawing using the mouse doesn't fall in the correct coordinates. And when i resize the window. The drawn rectangle doesn't adjust

The drawn rectangle is wrong. Am i binding the image properly?

I suspect... the drawn rectangles collection is not notified when the canvas is resized. A workaround I use to force an ObservableCollection to effectively change is to add and delete a "dummy" element. In your case, you could add a rectangle and delete it inmediatelly when the resize code is executed. Upvoted to balance the undeserved downvotes — zameb, Dec 20 '18 at 08:35

score -1 · Answer 1 · answered Dec 20 '18 at 09:25

I don't know if this will fix your problem because I'd have to find the code you used, implement it myself and see what happens.

One thing I would do anyhow is make the background of the canvas in the itemscontrol the picture.

Remove the separate image you have at the moment and use an imagebrush instead:

 <ItemsPanelTemplate>
    <Canvas>
        <Canvas.Background>
             <ImageBrush ImageSource="img_05_l.jpg"/>
        </Canvas.Background>

How do i bind the Image size and Canvas in Wpf

1 Answers1