How to draw on Image and move it? in UWP

Question

Hello I read this Displaying a background image on a UWP ink canvas for my development

So I can draw on the image and save it.

And I want to move the image too.

I have 2 problems About image control

Firstly , When I move the Popup UI's image then, I can't draw on the image.

And Secondly, when i use only Grid control, then i can't move the image

---Here is my xaml code (only Grid)---

<Grid x:Name="img_grid3" Width="600" Height="500" HorizontalAlignment="Center" VerticalAlignment="Bottom" ManipulationDelta="img_grid3_ManipulationDelta">
        <Image VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="img3" Stretch="Fill" Height="400" Width="600" >
        </Image>
        <InkCanvas x:Name="img_inkcanvas3"/>
        <InkToolbar x:Name="img_inktoolbar3" Canvas.ZIndex="8" TargetInkCanvas="{x:Bind img_inkcanvas3}" VerticalAlignment="Top"></InkToolbar>
        <Button x:Name="IMG_C3" Canvas.ZIndex="8" Content="Close" Background="White"  VerticalAlignment="Top" HorizontalAlignment="Left" Click="IMG_C3_Click"/>
        <Button x:Name="Img_draw3" Canvas.ZIndex="8" VerticalAlignment="Top" HorizontalAlignment="Right" Content="Draw" Click="Img_draw3_Click"/>
    </Grid>

---

 private TranslateTransform dragTranslation_I;


    public MainPage()
    {
        this.InitializeComponent();

        dragTranslation_I = new TranslateTransform();

    }

 private void img_grid3_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        dragTranslation_I.X += e.Delta.Translation.X;
        dragTranslation_I.Y += e.Delta.Translation.Y;
    }

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

And this is my popup code

<Popup x:Name="IMG_G"    Width="600" Height="300" ManipulationMode="All" HorizontalAlignment="Left" >            
        <Grid x:Name="img_grid" Width="600" Height="500">                
            <Image Canvas.ZIndex="6" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="img" Stretch="Fill" Height="400" Width="600" />
            <InkCanvas x:Name="img_inkcanvas"/>
            <InkToolbar x:Name="img_inktoolbar" Canvas.ZIndex="8" TargetInkCanvas="{x:Bind img_inkcanvas}" VerticalAlignment="Top"></InkToolbar>
            <Button x:Name="IMG_C" Canvas.ZIndex="8" Content="Close" Background="White"  VerticalAlignment="Top" HorizontalAlignment="Left" Click="IMG_C_Click" />
            <Button x:Name="Img_draw" Canvas.ZIndex="8" VerticalAlignment="Top" HorizontalAlignment="Right" Click="Img_draw_Click" Content="Draw"/>
        </Grid>
    </Popup>

Can't I draw on the image using Popup UI?

OR Can't I move my Grid's image?

Is this impossible?? I'm really wondering

Please tell me anything you know!!

Thanks

Answer 1

When you use the Canvas panel and use the Canvas.ZIndex attached property to put the Controls in the xaml, the element with the highest Canvas.ZIndex value draws last and therefore draws over any other elements that share the same space or overlap in any way. So the highest zindex overlay the lower controls. If the top one has a non-maximum alpha value, you can see the lower zindex controls, you should also specify controls' size, since Canvas does not do any sizing of its children.

If you create a correct layout, you can draw on the image using popup UI. Here is a sample to draw on a Popup:

Xaml:

 <Button Click="ShowPopup" Content="click me"/>
 <Popup x:Name="IMG_G"  Width="600" Height="300" ManipulationMode="All" HorizontalAlignment="Left" >
     <Grid x:Name="img_grid" Width="600" Height="500">
         <Image  VerticalAlignment="Top" Source="Assets/image1.jpg" HorizontalAlignment="Left"
                 x:Name="img" Stretch="Fill" Height="400" Width="600" />
         <InkCanvas   x:Name="img_inkcanvas"/>
         <InkToolbar   x:Name="img_inktoolbar" TargetInkCanvas="{x:Bind img_inkcanvas}" 
                       VerticalAlignment="Top"></InkToolbar>
         <Button  x:Name="IMG_C"  Content="Close" VerticalAlignment="Top" HorizontalAlignment="Left" />
         <Button  x:Name="Img_draw" VerticalAlignment="Top" HorizontalAlignment="Right" Content="Draw"/>
     </Grid>
 </Popup>

Code behind:

public InkCanvasPage()
{
    this.InitializeComponent();
    img_inkcanvas.InkPresenter.InputDeviceTypes = 
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen;
}
private void ShowPopup(object sender, RoutedEventArgs e)
{
    IMG_G.IsOpen = true;
}

Note that: By default, the InkCanvas does not support ink input from devices other than pen. You must specify support for other devices through the InputDeviceTypes of an InkPresenter object.

For your second question to move the image, since you have overlay an InkCanvas on the top of all the Image, the image can not get the ManipulationDelta event. You can try to keep some Image area avoid from overlap to manipulate the Image from the area. As the following example, you can move the image from the top 20 px height on the image.

Xaml:

<Grid x:Name="img_grid" Width="600" Height="500">
    <Image  VerticalAlignment="Top" Source="Assets/image1.jpg" HorizontalAlignment="Left"
                x:Name="img" Stretch="Fill" Height="400" Width="600" ManipulationMode="All" />
    <InkCanvas Margin="0,20,0,0"  x:Name="img_inkcanvas"/>
    <InkToolbar Margin="0,20,0,0"  x:Name="img_inktoolbar" TargetInkCanvas="{x:Bind img_inkcanvas}"
                      VerticalAlignment="Top"></InkToolbar>
    <Button  x:Name="IMG_C"  Content="Close" VerticalAlignment="Top" HorizontalAlignment="Left" />
    <Button  x:Name="Img_draw" VerticalAlignment="Top" HorizontalAlignment="Right" Content="Draw"/>
</Grid>

Code behind:

public InkCanvasPage()
{
    this.InitializeComponent();
    img_inkcanvas.InkPresenter.InputDeviceTypes =
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen;
    img.ManipulationDelta += Img_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    img.RenderTransform = this.dragTranslation;
}

private void Img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

private TranslateTransform dragTranslation;