locked
How to rotate and save an image which is in Pivot in windows phone same like whatsap?

    Question

  • Here is my code,

      <controls:Pivot Name="pivotImages"
                                Width="520"
                                Margin="-20,100,-20,0"
                                ItemsSource="{Binding originalImages}">
                    <controls:Pivot.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="" />
                        </DataTemplate>
                    </controls:Pivot.HeaderTemplate>
                    <controls:Pivot.ItemTemplate>
                        <DataTemplate>
                            <Image x:Name="imgRotate"
                                   HorizontalAlignment="Center"
                                   CacheMode="BitmapCache"
                                   Source="{Binding }"
                                   Stretch="UniformToFill">
                                <Image.RenderTransform>
                                    <RotateTransform Angle="0" />
                                </Image.RenderTransform>
                            </Image>
                        </DataTemplate>
                    </controls:Pivot.ItemTemplate>
                </controls:Pivot>


    And I am trying like this in code behind,

    List<PictureItem> imgs = null;
            ImageViewModel viewModel;
    
            public ImageRotateAndCrop()
            {
                viewModel = new ImageViewModel();
                InitializeComponent();
                this.DataContext = viewModel;
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                viewModel.originalImages = new ObservableCollection<BitmapImage>();
                if (PhoneApplicationService.Current.State.ContainsKey("multipleimageschat"))
                {
                    imgs = PhoneApplicationService.Current.State["multipleimageschat"] as List<PictureItem>;
                }
                foreach (var item in imgs)
                {
                    BitmapImage bm = new BitmapImage();
                    bm.SetSource(item.ImageStream);
                    viewModel.originalImages.Add(bm);
                }
    
                pivotImages.ItemsSource = viewModel.originalImages;
            }
    
            private void btnRotate_Clicked(object sender, RoutedEventArgs e)
            {
                PivotItem item = (PivotItem)pivotImages.ItemContainerGenerator.ContainerFromItem(pivotImages.SelectedItem);
                Image a = FindFirstElementInVisualTree<Image>(item);
                var returnStream = RotateStream(imgs[pivotImages.SelectedIndex].ImageStream, 90);
                imgs[pivotImages.SelectedIndex].ImageStream = returnStream;
                BitmapImage bm = new BitmapImage();
                bm.SetSource(returnStream);
                a.Source = bm;
    
            }       
    
            private Stream RotateStream(Stream stream, int angle)
            {
                stream.Position = 0;
    
                if (angle % 90 != 0 || angle < 0)
                    throw new ArgumentException();
                if (angle % 360 == 0)
                    return stream;
    
                BitmapImage bitmap = new BitmapImage();
                bitmap.SetSource(stream);
    
                WriteableBitmap wbSource = new WriteableBitmap(bitmap);
                WriteableBitmap wbTarget = null;
    
                if (0 == angle % 180)
                    wbTarget = new WriteableBitmap(wbSource.PixelWidth, wbSource.PixelHeight);
                else
                    wbTarget = new WriteableBitmap(wbSource.PixelHeight, wbSource.PixelWidth);
    
                for (int x = 0; x < wbSource.PixelWidth; x++)
                {
                    for (int y = 0; y < wbSource.PixelHeight; y++)
                    {
                        switch (angle % 360)
                        {
                            case 90:
                                wbTarget.Pixels[(wbSource.PixelHeight - y - 1) + x * wbTarget.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
                                break;
                            case 180:
                                wbTarget.Pixels[(wbSource.PixelWidth - x - 1) + (wbSource.PixelHeight - y - 1) * wbSource.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
                                break;
                            case 270:
                                wbTarget.Pixels[y + (wbSource.PixelWidth - x - 1) * wbTarget.PixelWidth] = wbSource.Pixels[x + y * wbSource.PixelWidth];
                                break;
                        }
                    }
                }
    
                MemoryStream targetStream = new MemoryStream();
    
                wbTarget.SaveJpeg(targetStream, wbTarget.PixelWidth, wbTarget.PixelHeight, 0, 100);
    
                return targetStream;
            }
    
    
            private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
            {
                var count = VisualTreeHelper.GetChildrenCount(parentElement);
                if (count == 0)
                    return null;
    
                for (int i = 0; i < count; i++)
                {
                    var child = VisualTreeHelper.GetChild(parentElement, i);
    
                    if (child != null && child is T)
                        return (T)child;
    
                    else
                    {
                        var result = FindFirstElementInVisualTree<T>(child);
                        if (result != null)
                            return result;
    
                    }
                }
                return null;
            }

    this is working fine for rotating an image but the problem is height and width's are getting cut at 90 degrees and 270 degrees.What could be the problem?

    Thanks in advance.





    Monday, December 01, 2014 5:02 AM

All replies

  • Hello Kishu,

    You might have to create the rotatetransform object and pass that to the image.rendertransform. See below:

    Image imgrt = FindFirstElementInVisualTree<Image>(pivotImages); //get the image object
    
    if (imgrt != null)
    {
    	RotateTransform rt = new RotateTransform(90); //set the angle to 90
    	rt.CenterX = 0; // Can set this in XAML also
    	rt.CenterY = 0; // Can set this in XAML also
    	imgrt.RenderTransform = rt;  
    }

    If the above still doen't work, try the WriteableBitmapEx library to easily rotate the image from code.

    http://writeablebitmapex.codeplex.com/releases/view/96927
    http://writeablebitmapex.codeplex.com/

    Example:
    writeableBmp.Rotate(90);


    Let me know if this helps.


    Abdulwahab Suleiman


    Tuesday, December 02, 2014 1:01 AM
    Moderator
  • Hi Abdulwahab,

    Thanks for your reply, I edited my code It is working fine for rotating an image but the problem is height and width's are getting cut at 90 degrees and 270 degrees.

    What could be the problem?

    Tuesday, December 02, 2014 6:11 AM