Tampilkan postingan dengan label Image. Tampilkan semua postingan

Senin, 24 November 2014

WindowsPhone: Drag and Drop the control within parent layout, beginners tutorials (C#-Xaml)

Introduction:

Some times we may need to drag and drop the specific control around the screen.So it may chance to control will be not visible if drag & drop meets out of screen boundaries.However we can easily resolve this issue using "built-in Windows Phone behaviors" (In our sample we are using 'Motion behaviors' ,i.e MouseDragElementBehavior).

Requirements:

This sample is targeted on windowsphone 7.1 OS

Description:

It would be better to read about behaviours before start to development.And follow the below simple steps
Step 1:

Open Visual Studio
Create new project name(Ex: "ImageDragDrop")
Add two dll's to your project(System.Windows.Interactivity.dll & Microsoft.Expression.Interactions.dll) And make sure dll's added to references like this

Step 2:
Open MainPage.xaml and add two name spaces in xaml

XAML

xmlns:ExpInteractivity="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity">

Step 3:
Add your UI xaml code like below.

XAML

<Grid Background="White">            
     <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500"> 
            <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" > 
                <i:Interaction.Behaviors> 
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/> 
                </i:Interaction.Behaviors> 
            </Image> 
        </Canvas> 
    </Grid>

Note:In above code, i highlight the property ConstrainToParentBounds="True" .if you set it as 'True' means we are restricted to drag the control within parent layout boundaries.And in other hand if you set it as 'False' means we can drag the image control even out side of parent boundaries.so it will be disappear if drag and drop meets out side of screen boundaries.
So add two more image controls to play with drag & drop functionality.

XAML

<Grid Background="White">            
     <Canvas x:Name="LayoutRoot" Background="#FFFFA3F2" Height="500"> 
            <Image  x:Name="Image1" Height="100" Source="/Assets/Bal1.jpg" Width="100" Stretch="UniformToFill" > 
                <i:Interaction.Behaviors> 
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="False"/> 
                </i:Interaction.Behaviors> 
            </Image> 
            <Image x:Name="Image2" Height="100" Source="/Assets/Bal2.jpg" Width="100" Stretch="UniformToFill" > 
                <i:Interaction.Behaviors> 
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/> 
                </i:Interaction.Behaviors> 
            </Image> 
            <Image x:Name="Image3" Height="100" Source="/Assets/Bal3.jpg" Width="100" Stretch="UniformToFill" > 
                <i:Interaction.Behaviors> 
                    <ExpInteractivity:MouseDragElementBehavior ConstrainToParentBounds="True"/> 
                </i:Interaction.Behaviors> 
            </Image> 
        </Canvas> 
    </Grid>

Outputs:

Note:If you want to manually implement 'Drag & Drop' functionality for a image control. You can write following code in 'ManipulationDelta' event of Image control.

private void Image_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs args) 
        { 
            FrameworkElement Elem = sender as FrameworkElement; 
            double Left = Canvas.GetLeft(Elem); 
            double Top = Canvas.GetTop(Elem); 
            Left += args.DeltaManipulation.Translation.X;//Get x cordinate 
            Top += args.DeltaManipulation.Translation.Y;//Get y cordinate 
            //check for bounds 
            if (Left < 0) 
            { 
                Left = 0; 
            } 
            else if (Left > (LayoutRoot.ActualWidth - Elem.ActualWidth)) 
            { 
                Left = LayoutRoot.ActualWidth - Elem.ActualWidth; 
            } 
 
            if (Top < 0) 
            { 
                Top = 0; 
            } 
            else if (Top > (LayoutRoot.ActualHeight - Elem.ActualHeight)) 
            { 
                Top = LayoutRoot.ActualHeight - Elem.ActualHeight; 
            } 
 
            Canvas.SetLeft(Elem, Left); 
            Canvas.SetTop(Elem, Top); 
        }

I thought you don't need sample source code, because i already provided necessary code in this post.So read step by step to copy above code and play with drag & drop functionality.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?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 :)

Selasa, 06 Mei 2014

WindowsPhone TilePanel: Repeating(Tiling) image background(C#-XAML)

Introduction:

Sometimes we may need to make repeat single image(ex.21x20) across the windows phone background.It is very simple process and also may be useful requirement for you in future.Because it is good way for providing nice background in a page.lets understand the sample

Here i have following three small size images

Tile21x20.png Tile60x60.png Tile64x32.png

So output is after repeating above small images:

Source File at:RepeatImageSample

Building the Sample:

This sample is targeted on WindowsPhone 7.1 OS.

Description:

In WPF you normally would do it with a tiled Background as described like

XAML

<Window.Background> 
    <ImageBrush ImageSource="Images/Tile21x20.png" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,32,32"/> 
</Window.Background>

The WPF TileBrush has properties such as TileMode, Viewbox, and ViewportUnits that can be used to tile an image as a fill or as a background for a UI Element. For some reason, they’re not implemented in Silverlight/WindowsPhone. And please read more about this. So the only way of achieving this are writing something yourself or using a component .OK lets start with following steps:

Step1:

After downloading this sample,unzip it and add TilePanel.cs class to your project.

Step2:

Add the namespace to your xaml page

XAML

xmlns:Repeat="clr-namespace:ReapetImageinWP"

Step3:

Then you can use it as follows in your XAML:

XAML

 <Repeat:TilePanel   Height="67" VerticalAlignment="Top" Margin="10" TileWidth="21" TileHeight="20"> 
     <Repeat:TilePanel.Image> 
              <ImageBrush ImageSource="Images/Tile21x20.png" /> 
       </Repeat:TilePanel.Image> 
 </Repeat:TilePanel>

The panel will be filled with the image specified in your XAML. Adjust image and size as needed.

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

Kamis, 27 Maret 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>

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

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

 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:

Follow me always at @Subramanyam_B

Have a nice day by Subramanyam Raju :)

Selasa, 25 Maret 2014

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

 WriteableBitmap wb;

Do like this for merging image with Text

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

 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

BitmapImage finalImage = new BitmapImage(); 
 WriteableBitmap wbFinal;

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

Follow me always at @Subramanyam_B

Have a nice day by Subramanyam Raju :)