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 :)

Windows Phone ImageMergings: Merging Image with Text/Multiple Images(C#-XAML)

Introduction

Hi guys! its quit very interesting concept for me is "Merging multiple image on single image control in windows phone" or "Merging image with text" .However in this post i am going to explain how can we achieve these two Requirements in our windows phone app with c#

Source File:WindowsPhone ImageMergings Sample

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
         2)Due to memory limitations, if you operate too many pictures for merge, it will throw an OutOfMemoryException exception.

Description

However we can achieve this by converting our image control to WriteableBitmap and finnaly  render the text/images over the image control and position it, and then save the final merge image to media library.So that we need follow some few steps to meet simplicity

1)How to merge Image with Text

Create WriteableBitmap object as global 

C#

 WriteableBitmap wb;

 Do like this for merging image with Text

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            wb = new WriteableBitmap((BitmapSource)firstimage.Source); 
            TextBlock tb = new TextBlock(); 
            tb.Text = Txt.Text; 
            tb.TextWrapping = TextWrapping.Wrap; 
            tb.Foreground = new SolidColorBrush(Colors.Black); 
            tb.FontSize = 70; 
            tb.FontWeight = FontWeights.Bold; 
            wb.Render(tb, new TranslateTransform() { X = 25, Y = 191 }); 
            wb.Invalidate(); 
            FinalMergeImage.Source = wb;//Merging Image with text 
            Savebtn.IsEnabled = true; 
        } 

  Do like this for saving merged image to Media Library

C#

 private void SaveMergebtn_click(object sender, RoutedEventArgs e) 
        { 
            using (MemoryStream stream = new MemoryStream()) 
            { 
                wb.SaveJpeg(stream, wb.PixelWidth, wb.PixelHeight, 0, 100); 
                stream.Seek(0, SeekOrigin.Begin); 
                using (MediaLibrary mediaLibrary = new MediaLibrary()) 
                    mediaLibrary.SavePicture("Picture.jpg", stream); 
            } 
            MessageBox.Show("Picture Saved to media library..."); 
        }

ScreenShot

2)How to merge Multiple Images on single image control

C#

BitmapImage finalImage = new BitmapImage(); 
 WriteableBitmap wbFinal;

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            string[] files = new string[] { "Roses-Most-Beautiful-485x728.jpg", "Lovely-Sea-House-485x728.jpg"}; // Image list. 
            List<BitmapImage> images = new List<BitmapImage>(); // BitmapImage list. 
            int width = 0; // Final width. 
            int height = 0; // Final height. 
 
            foreach (string image in files) 
            { 
                // Create a Bitmap from the file and add it to the list                 
                BitmapImage img = new BitmapImage(); 
                StreamResourceInfo r = System.Windows.Application.GetResourceStream(new Uri(image, UriKind.Relative)); 
                img.SetSource(r.Stream); 
 
                WriteableBitmap wb = new WriteableBitmap(img); 
 
                // Update the size of the final bitmap 
                width = wb.PixelWidth > width ? wb.PixelWidth : width; 
                height = wb.PixelHeight > height ? wb.PixelHeight : height; 
 
                images.Add(img); 
            } 
 
            // Create a bitmap to hold the combined image  
            
              
            StreamResourceInfo sri = System.Windows.Application.GetResourceStream(new Uri("White.jpg", 
                UriKind.Relative)); 
            finalImage.SetSource(sri.Stream); 
 
            wbFinal = new WriteableBitmap(finalImage); 
            using (MemoryStream mem = new MemoryStream()) 
            { 
                int tempWidth = 0;   // Parameter for Translate.X 
                int tempHeight = 0;  // Parameter for Translate.Y 
 
                foreach (BitmapImage item in images) 
                { 
                    Image image = new Image(); 
                    image.Height = item.PixelHeight; 
                    image.Width = item.PixelWidth; 
                    image.Source = item; 
 
                    // TranslateTransform                       
                    TranslateTransform tf = new TranslateTransform(); 
                    tf.X = tempWidth; 
                    tf.Y = tempHeight; 
                    wbFinal.Render(image, tf); 
 
                    tempHeight += item.PixelHeight; 
                } 
 
                wbFinal.Invalidate(); 
                wbFinal.SaveJpeg(mem, width, height, 0, 100); 
                mem.Seek(0, System.IO.SeekOrigin.Begin); 
 
                // Show image.                
                finalmergeimage.Source = wbFinal;//Mergin Multiple Image into single Image 
                txtblck.Visibility = Visibility.Visible; 
                Savebtn.IsEnabled = true; 
            } 
 
             
        }

ScreenShot  

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 :)

Window Phone 8 Development Guide: Tutorials/Resource for Beginners (C#-XAML)

The Windows Phone 8 platform is still relatively new, and as of writing this there are no books, or training courses,  written for the platform – although there are a number of books that are planned for release mid 2013. If you’re new to the Windows Phone 8 platform it can be extremely difficult to find learning resources. In this article I will share some great learning resources that helped me get my foot on the ladder!

Microsoft Dev Center

https://dev.windowsphone.com

The Microsoft Dev Center should be your first port of call for any new developer interested in developing on the WP8 platform. There’s lots of advice and designer/developer guidelines to get you started.

The documentation for the  .NET API for Windows Phone is also an excellent resource within the Dev Center that you will want to bookmark.

http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207211(v=vs.105).aspx

Nokia Windows Phone 8 Wiki

http://developer.nokia.com/community/wiki/Windows_Phone_development_-_useful_links

Nokia have a great Wiki on Windows Phone 8 with lots of code examples! It’s one of the only places on the Internet that I was able to find code examples that utilize the Windows Phone 8 platform!

Microsoft Virtual Academy – Building Apps for Windows Phone 8

https://www.microsoftvirtualacademy.com/training-courses/windows-phone-8-apps-development-jumpstart

The MVA has put together this excellent video course that gives you a general overview of the Windows 8 Platform.

Microsoft Windows Phone 8 Code Examples

Developer Code Sample's

Digg into some code and get a feel for the platform with Microsoft’s WP8 code examples.

Geekchamp Article's 

Geekchamp Code Sample's

Good and depth article index from geekchamp

What’s New in the Windows Phone SDK 8.0

What’s new in Windows Phone SDK 8.0

If you’ve developed for Windows Phone 7 – or even if you haven’t – I think it’s important to understand the differences between the both platforms (and there are a few!). Ensure you check this out, or bookmark it for you later because trust me, you’ll need it!

Learning XAML

XAML is fundamental to Windows Phone 8 development, without understanding it you can not develop WP8 applications. If you’re like I was, and have little understanding of XAML, below are some great places to learn what XAML is, how/why it’s used, and it’s syntax:

• How XAML Works
• XAML Overview
• XAML Syntax In Detail
• Introduction to XAML

Learning C# Tutorials 

• C# Fundamentals for Absolute Beginners
• C# Tutorials for beginners

This tutorials will teach you basic C# programming and will also take you through various advanced concepts related to C# programming language.

Other Resources

Unfortunately the resources above are about all I can recommend. I’ve yet to find anything else that’s worth mentioning for beginners, although you can find lots of help and information at the following:

• Microsoft Windows Phone Developer Forums
• StackOverflow Windows Phone 8
• StackOverflow XAML
• Windows Phone Central Forums – Developers Corner

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,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 :)

WindowsPhone ImageTools:Working with Animated Gif Images(C#-Xaml)

Introduction:

In some times,we may need to working with animated Gif images,which format images are not direclty supported by Silverlight nor Windows Phone: if you try to download and display a GIF image inside an Image control you’ll get an exception.So that in this post i am going to explain how to bind and working with animated GIF images in windows phone

Note:Static GIF images are naively supported by windows phone 8 image control.So that procedure described in this post is only for animated GIF's   

Source File at :WPAnimatedGIFSample

Requirements: 

However to work Gif image ,we need to use third part library is ImageTools that contains many converters and tools to convert one image from a format to another on the fly. One of the supported scenario is GIF images conversion (that can be animated, too) for Windows Phone.

So that we need to add this library dlls by right click on your solution=>Manage NuGet Packages=>Click Online from dialog

Description:

Now we are ready for using GIF image in windows phone.Beacuse above ImageTools having

two controls

• The first is a control called AnimatedImage, which is going to replace the standard SilverlightImagecontrol. It’s the container that will display the image.
• The second is a converter called ImageConverter, which takes care of converting the image from one format to another.

Both objects are part of the ImageTools.Controls namespace, that should be declared in the XAML page where we’re going to use them.

1)How to use ImageTools AnimatedImage in xaml :

XAML

xmlns:imagetools=”clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls”

 Once you have imported the namespace, you can add the converter as a resource for the page or, if you prefer, for the global application. Here is an example on how to do it for a single page:

XAML

<phone:PhoneApplicationPage.Resources> 
    <imagetools:ImageConverter x:Key="ImageConverter" /> 
</phone:PhoneApplicationPage.Resources>

 Now you are ready to insert the AnimatedImage control into your page: you simply have to bind theSource property with a Uri object (which contains the URL of the gif image) and apply the Imageconverter.

XAML

<imagetools:AnimatedImage x:Name="Image" Source="{Binding Path=ImageSource, Converter={StaticResource ImageConverter}}" />

 2)how to bind Gif Image with imageTools c#:

Now we need to bind Gif image like this way

C#

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Navigation; 
using Microsoft.Phone.Controls; 
using Microsoft.Phone.Shell; 
using ScreenCaptureWP8.Resources; 
using System.Windows.Media.Imaging; 
using System.IO; 
using System.Windows.Media; 
using ImageTools.IO.Gif; 
 
namespace ScreenCaptureWP8 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
        // Constructor 
        public MainPage() 
        { 
            InitializeComponent(); 
            Sample smple = new Sample(); 
            smple.ImageSource = new Uri("http://0.tqn.com/d/graphicssoft/1/0/n/p/5/ST_animated_turkey01.gif", UriKind.Absolute); 
            this.DataContext = smple; 
            ImageTools.IO.Decoders.AddDecoder<GifDecoder>(); 
             
        } 
 
        
    } 
    public class Sample 
    { 
         
        private  Uri _imageSource; 
 
        public  Uri ImageSource 
        { 
            get { return _imageSource; } 
            set 
            { 
                if (_imageSource != value) 
                { 
                    _imageSource = value; 
                } 
            } 
        } 
    } 
}

Now animated GIF image will be displayed on your UI

3)How to bind  animated GIF using ImageTools ExtendedImage

For Local Gif image:

C#

ImageToolName.Source = new ExtendedImage() { UriSource = new Uri("wrong.gif", UriKind.Relative) };//Local animated gif image binding with ImageTools

For Online Gif image

C#

Image1.Source = new ExtendedImage() { UriSource = new Uri("http://0.tqn.com/d/graphicssoft/1/0/n/p/5/ST_animated_turkey01.gif" , UriKind.Absolute) };//online gif image binding

   4)How to start/stop  GIF Image animation using ImageTools 

C#

ImageToolName.Start();//to start animation 
ImageToolname.Stop();//to stop animation

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.

Have a nice day by Subramanyam Raju :)