Crop image with rectangle

Question

I have a Image and I want crop it by using a rectangle, code below is the code I put a image and draw a rectangle at middle of the image:

MainPage.Xaml:

<Canvas x:Name="canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480" Background="Blue">
        <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <RectangleGeometry Rect="0,0,340,480"/>
            </Path.Data>
        </Path>
    </Canvas>

I successful display the image and draw a rectangle. The sample image as below:

Now I want click a button to crop the image within the rectangle(not auto clip). The rectangle is auto added when image loaded. So cannot use "Point Pressed" and "Point Released". And also cannot use "rectangle.clip" because it will auto clip the image. How do I solve it? Thanks

Updated: I able to move the image,How do I bind the data and set the rectangle coordinate to dynamic? Code below is to transform the image. Thanks.

public sealed partial class MainPage: Page
{
        private CompositeTransform compositeTranslation;

        public MainPage()
        {
            this.InitializeComponent();
            photo.ManipulationDelta += Composite_ManipulationDelta;
            compositeTranslation = new CompositeTransform();
            photo.RenderTransform = this.compositeTranslation;
        }

        void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            // scale the image.
            compositeTranslation.CenterX = photo.ActualWidth / 2;
            compositeTranslation.CenterY = photo.ActualHeight / 2;
            compositeTranslation.ScaleX *= e.Delta.Scale;
            compositeTranslation.ScaleY *= e.Delta.Scale;
            compositeTranslation.TranslateX += e.Delta.Translation.X;
            compositeTranslation.TranslateY += e.Delta.Translation.Y;
        }
}

Answer 1

I have not used or XAML as it creates confusion for me. So I created a snippet according to you problem. Try that and let me know the results. I have used the same image as you posted

XAML

<Page.BottomAppBar>
    <AppBar IsSticky="True" IsOpen="True">
        <Button Content="Crop" Click="btnCrop_Click" />
    </AppBar>
</Page.BottomAppBar>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Source="http://i.stack.imgur.com/UIBSp.png" />
    <Path x:Name="path" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <RectangleGeometry Rect="545,212,440,420"/>
        </Path.Data>
    </Path>
</Grid>

C#

private void btnCrop_Click(object sender, RoutedEventArgs e)
{
    var _rect = new RectangleGeometry();
    _rect.Rect = path.Data.Bounds;
    photo.Clip = _rect;
}