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

Answer 1

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.