how to allow user to move\resize an image control on a picture on Windows Phone 8

Question

Here is the challenge I am having with a Windows 8 phone app

Flow: The user takes a photo using a Windows 8 phone. The logic uses the PhotoCamera class, which works for my purpose. Once the stream is available, I transfer the stream to a results page, where a BitmapImage is constructed from the stream. This bitmap image is then used as the source of an Image object, which is defined in the xaml file. The idea is to show the taken picture to the user for confirmation, and this flow works fine. Here is what the result page does.

protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        base.OnNavigatedTo(e);
        MemoryStream stream = (MemoryStream)App.ObjectNavigationData;
        stream.Seek(0, SeekOrigin.Begin);
        var bitmapImage = new BitmapImage(); 
        bitmapImage.SetSource(stream);
        imgCaptureResult.Source = bitmapImage;
        imgCaptureResult.Visibility = System.Windows.Visibility.Visible;
    }

What I want to do is to display a rectangle where the user can define a crop area, which I can do by defining a rectangle object (or multiple lines) on the image object itself. And this works fine as long as the overlay object (crop area) is static. See the xaml below. (Note that the canvas here is the viewFinder (the camera feed), not the results page. In the results page, I will be using the image object instead of the canvas, but the concept works, I can overlay lines over another UI element, as long as the lines are static)

<Canvas x:Name="viewfinderCanvas"
            Grid.Column="0"
            Width="640" 
            Height="480" 
            HorizontalAlignment="Left" >
        <!--Camera viewfinder -->
        <Canvas.Background>
            <VideoBrush x:Name="viewfinderBrush" />
        </Canvas.Background>
        <Line   X1="20" Y1="20"
                X2="100" Y2="20"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="20"
                X2="20" Y2="100"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="540" Y1="20"
                X2="620" Y2="20"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="620" Y1="20"
                X2="620" Y2="100"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="540" Y1="460"
                X2="620" Y2="460"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="620" Y1="460"
                X2="620" Y2="380"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="460"
                X2="100" Y2="460"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="460"
                X2="20" Y2="380"
                Stroke="Red"
                StrokeThickness="4"/>
    </Canvas>

But I want the user to be able to re-size this rectangle by gestures, so that s\he can truly customize the crop area. Either move the whole rectangle up\down, or move the bottom side up\down etc. In other words, I need a control which resembles a "Select" rectangle you see in Paint.Net so that the crop area is selectable by the user. I couldn't figure out a way to do this. I looked at the Phone API as well as the Nokia Imaging SDK, but nothing lit a bulb in my head. Any suggestions are appreciated. Thanks

Not sure about moving UI elements, but why don't you keep the UI elements static and transform the image to achieve the same effect. So instead of moving UI crop area, just refit the image (resize, move, rotate). — David Božjak, May 05 '14 at 06:11
Thank you for your reply. You are correct, my end goal is to crop the image, but I need the crop area selectable by user. Can you think of anything that will help me? I need something like a "Select Image" control which you can find in Paint.Net. I will clarify my question. Thanks again for the response — freud, May 05 '14 at 14:39
Well it would be selectable that way too. When you detect a gesture from the user you can apply the reframing filter in such a way that the user is modifying what is visible within the rectangle. (You cake a look at how Nokia Creative Studio does it.) — David Božjak, May 06 '14 at 05:49
Thank you. I made a lot of progress after your suggestions, I am almost there. I handled the ManipulationStarted event and the ManipulationDelta, retrieved the coordinates of the selected rectangle, and used in the reframing filter. Need to polish more but the core is done. Thanks again! — freud, May 07 '14 at 04:20

score 2 · Answer 1 · answered May 06 '14 at 11:22

You could also have an approach where user could select the vertical and the horizontal boundaries separately instead of panning it (if panning is not straight forward and no control does that easily). Let the user select the vertical limit with some vertical slider, and then in the same way make him do the horizontal selection. And then you can shade the areas selected by him vertically and horizontally with apt colors to show a panning kind of effect. This, only if you don't achieve what you are trying to.

Thank you. I agree that panning was not super easy on a touch screen, and I will try to implement your suggestions with two boundaries. Appreciate the help — freud, May 07 '14 at 04:22

how to allow user to move\resize an image control on a picture on Windows Phone 8

1 Answers1