Google WindowsPhone 8: Crop Image Area with Different Shapes using Clip Property And Image selection with Crop Using PhotoChooserTask(C#-XAML) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Thursday 27 March 2014

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>
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>
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.93100267.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  

Have a nice day by  :)

4 comments:

  1. how to save the image after cropping?

    ReplyDelete
  2. Thanks tut
    please help me reduced size image

    ReplyDelete
  3. With such systemic changes the least MS could have done is named this 9.0 rather than 8.1 right? Am I right? MS SUCKS! I hate having to dig through 7 and 8 code only to find out that the 8.1 target doesn't work. No wonder MS only has 2.5% of market share in the phone. Because the HATE developers.

    ReplyDelete
  4. Great article. Was of real assistance to me.

    ReplyDelete

Search Engine Submission - AddMe