WindowsPhone 8: Crop Image Area with Different Shapes using Clip Property And Image selection with Crop Using PhotoChooserTask(C#-XAML)

Introduction

In this post i am going to explain about "How to crop a portion of image area with Clip Property in windows phone" (and)"How to crop  album image selection area with PhotoChosserTask".Guys its quit interesting concepts,and i hope this sample will be definitely helpful for you in future windows phone  apps

Source File:ImageCropwp8Sample

Requirements

For this sample no need for extra/third party dll's,just unzip this download sample and run it with your sdk.
Note: 1)This sample is work for both windows phone 7 and 8 sdk

Description

However in this post i am going to explain about
1)Clip property:You can use the Clip property to crop an area from the Image output. You set the Clip property to a Geometry , which means that you can clip a variety of geometric shapes from your Image (for example, an ellipse, line, or complex path).

2)PhotoChooserTask: To crop an image in the photo chooser on Windows Phone, all you have to do is set the pixel width and height that you want to allow and the crop tool pops up automatically. How cool is that? So easy
Lets start with code sample to understand easily,

1)How to Crop image with Clip Property:

You can use the Clip property to clip an area from the image output. You set the Clip property to a Geometry. However here few samples for understanding clip property

RectangleGeometry :

XAML

<Image Height="127" Source="/Roses-Most-Beautiful-485x728.jpg" Margin="0,0,0,0"> 
                    <Image.Clip> 
                        <RectangleGeometry Rect="25,2,100,100" /> 
                    </Image.Clip> 
 </Image>

  EllipseGeometry:

XAML

 <Image Height="102" Source="/Roses-Most-Beautiful-485x728.jpg" Margin="24,0,0,0" RenderTransformOrigin="0.5,0.5"> 
                    <Image.Clip> 
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" /> 
                    </Image.Clip> 
</Image>

  OpacityMask

XAML

<Image  Height="116" Source="/Roses-Most-Beautiful-485x728.jpg" Margin="0,0,34,0" > 
                    <Image.OpacityMask> 
                        <RadialGradientBrush  GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> 
                            <!-- These Gradient Stop colors are only changing the 
            alpha values so the image fades out toward the edges. --> 
                            <GradientStop Color="#ffffffff" Offset="0.5" /> 
                            <GradientStop Color="#00ffffff" Offset="0.8" /> 
                        </RadialGradientBrush> 
                    </Image.OpacityMask> 
</Image>

  Path

C#

 <Path StrokeThickness="2" Data="M39.719002,49.903999L27.454459,67.570106 6.1730003,70.669006 18.437453,53.002895z M45.763216,47.663001L54.931002, 67.117103 46.974087,87.096 37.805001,67.643096z M46.844002, 
                            41.306999L68.275991,43.094764 81.599997,59.977001 60.169409, 
                            58.189132z M0,27.119998L21.430977,28.90767 34.755001, 
                            45.788997 13.324224,44.002528z M75.427,16.426999L63.162882, 
                            34.094039 41.882,37.193 54.146118,19.526059z M34.627251, 
                            0L43.794003,19.454595 35.835654,39.434001 26.669002,19.979402z" Height="88.701" Stretch="Fill" UseLayoutRounding="False"> 
                    <Path.Stroke> 
                        <ImageBrush Stretch="Fill" ImageSource="/Roses-Most-Beautiful-485x728.jpg"/> 
                    </Path.Stroke> 
                    <Path.Fill> 
                        <ImageBrush Stretch="Fill" ImageSource="/Roses-Most-Beautiful-485x728.jpg"/> 
                    </Path.Fill> 
 
 </Path>

 ScreenShot for above code:

2)How to Crop Selected Album Image with PhotoChooserTask:

Here’s what the code looks like for the chooser (I’m actually grabbing the device screen size for my width and height).

C#

 private void ChooserCropBtn_blick(object sender, RoutedEventArgs e) 
        { 
            PhotoChooserTask _photoChooserTask = new PhotoChooserTask(); 
            _photoChooserTask.PixelWidth = Convert.ToInt32(150);//Here best use screen width 
            _photoChooserTask.PixelHeight = Convert.ToInt32(150);//Here best use screen Heigh 
 
            _photoChooserTask.Completed += _photoChooserTask_Completed; 
            _photoChooserTask.Show(); 
        } 
 
        private void _photoChooserTask_Completed(object sender, PhotoResult e) 
        { 
            //To Do your operations 
        }

 ScreenShot for with this code:

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)