Custom Rectangle having circles on Corners windows phone 7

Question

I am developing a photo app in windows phone 7. I want a Rectangle having circles on corner of it, that will allow the user to resize the rectangle from the corner (circles) and if the user want to Move the rectangle then Drag it in any direction. See the Sample 1 & 2.

I am using this mechanism to Crop the image via this rectangle, You mostly will have seen this type of control in the Image editor especially in iPhone photo apps. I have checked all sample aaps and other ideas on google.com but never seen such type of idea. I also read the Canvas and their manipulation event concept but don't know how to implement and even don't understand that is it used for such mechanism or not? Please a complete source code in this regard may highly be appreciated.

See the Sample figures, you will get the idea, what exactly I want.

Answer 1

You can create a UserControl that will represent such shape. Put a single Grid inside the UserControl and place a single Rectangle and four Circles in it. For example:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Rectangle Stroke="Green"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               Margin="25" />

    <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top"
             Stroke="Red"
             Width="50" Height="50"/>
    <Ellipse HorizontalAlignment="Left" VerticalAlignment="Bottom"
             Stroke="Red"
             Width="50" Height="50"/>
    <Ellipse HorizontalAlignment="Right" VerticalAlignment="Top"
             Stroke="Red"
             Width="50" Height="50"/>
    <Ellipse HorizontalAlignment="Right" VerticalAlignment="Bottom"
             Stroke="Red"
             Width="50" Height="50"/>
</Grid>

Style it as you please and add the necessary events for handling touch and drag events.