×

Discussion Board

Results 1 to 4 of 4

Hybrid View

  1. #1
    Registered User
    Join Date
    Jul 2013
    Posts
    21

    Image view undesirably cropped

    I'm trying to implement an Image View within an page but when I deploy, the image gets cropped. How can I fix this issue so that the whole image appears?



    XAML
    Code:
    <phone:PhoneApplicationPage
        x:Class="sdkImages.Scenarios.PinchAndZoom"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        mc:Ignorable="d"
        shell:SystemTray.IsVisible="False">
    
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1">
                <ViewportControl x:Name="viewport"  
                    ManipulationStarted="OnManipulationStarted" ManipulationDelta="OnManipulationDelta"  
                                 ManipulationCompleted="OnManipulationCompleted" ViewportChanged="viewport_ViewportChanged">
                    <Canvas x:Name="canvas">
                        <Image x:Name="TestImage" Source="/Assets/map.jpg"  
                                RenderTransformOrigin="0,0" CacheMode="BitmapCache"
                               ImageOpened="OnImageOpened">
                            <Image.RenderTransform>
                                <ScaleTransform x:Name="xform"/>
                            </Image.RenderTransform>
                        </Image>
                    </Canvas>
                </ViewportControl>
            </Grid>
        </Grid>
    </phone:PhoneApplicationPage>
    CS
    Code:
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using sdkImages.Resources;
    using System;
    using System.Windows;
    using System.Windows.Input;
    using System.Windows.Media.Imaging;
    
    namespace sdkImages.Scenarios
    {
        public partial class PinchAndZoom : PhoneApplicationPage
        {
            const double MaxScale = 10;
    
            double _scale = 1.0;
            double _minScale;
            double _coercedScale;
            double _originalScale;
    
            Size _viewportSize;
            bool _pinching;
            Point _screenMidpoint;
            Point _relativeMidpoint;
    
            BitmapImage _bitmap; 
    
    
            public PinchAndZoom()
            {
                InitializeComponent();
            }
    
            /// <summary> 
            /// Either the user has manipulated the image or the size of the viewport has changed. We only 
            /// care about the size. 
            /// </summary> 
            void viewport_ViewportChanged(object sender, System.Windows.Controls.Primitives.ViewportChangedEventArgs e)
            {
                Size newSize = new Size(viewport.Viewport.Width, viewport.Viewport.Height);
                if (newSize != _viewportSize)
                {
                    _viewportSize = newSize;
                    CoerceScale(true);
                    ResizeImage(false);
                }
            }
    
            /// <summary> 
            /// Handler for the ManipulationStarted event. Set initial state in case 
            /// it becomes a pinch later. 
            /// </summary> 
            void OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
            {
                _pinching = false;
                _originalScale = _scale;
            }
    
            /// <summary> 
            /// Handler for the ManipulationDelta event. It may or may not be a pinch. If it is not a  
            /// pinch, the ViewportControl will take care of it. 
            /// </summary> 
            /// <param name="sender"></param> 
            /// <param name="e"></param> 
            void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
            {
                if (e.PinchManipulation != null)
                {
                    e.Handled = true;
    
                    if (!_pinching)
                    {
                        _pinching = true;
                        Point center = e.PinchManipulation.Original.Center;
                        _relativeMidpoint = new Point(center.X / TestImage.ActualWidth, center.Y / TestImage.ActualHeight);
    
                        var xform = TestImage.TransformToVisual(viewport);
                        _screenMidpoint = xform.Transform(center);
                    }
    
                    _scale = _originalScale * e.PinchManipulation.CumulativeScale;
    
                    CoerceScale(false);
                    ResizeImage(false);
                }
                else if (_pinching)
                {
                    _pinching = false;
                    _originalScale = _scale = _coercedScale;
                }
            }
    
            /// <summary> 
            /// The manipulation has completed (no touch points anymore) so reset state. 
            /// </summary> 
            void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
            {
                _pinching = false;
                _scale = _coercedScale;
            }
    
    
            /// <summary> 
            /// When a new image is opened, set its initial scale. 
            /// </summary> 
            void OnImageOpened(object sender, RoutedEventArgs e)
            {
                _bitmap = (BitmapImage)TestImage.Source;
    
                // Set scale to the minimum, and then save it. 
                _scale = 0;
                CoerceScale(true);
                _scale = _coercedScale;
    
                ResizeImage(true);
            }
    
            /// <summary> 
            /// Adjust the size of the image according to the coerced scale factor. Optionally 
            /// center the image, otherwise, try to keep the original midpoint of the pinch 
            /// in the same spot on the screen regardless of the scale. 
            /// </summary> 
            /// <param name="center"></param> 
            void ResizeImage(bool center)
            {
                if (_coercedScale != 0 && _bitmap != null)
                {
                    double newWidth = canvas.Width = Math.Round(_bitmap.PixelWidth * _coercedScale);
                    double newHeight = canvas.Height = Math.Round(_bitmap.PixelHeight * _coercedScale);
    
                    xform.ScaleX = xform.ScaleY = _coercedScale;
    
                    viewport.Bounds = new Rect(0, 0, newWidth, newHeight);
    
                    if (center)
                    {
                        viewport.SetViewportOrigin(
                            new Point(
                                Math.Round((newWidth - viewport.ActualWidth) / 2),
                                Math.Round((newHeight - viewport.ActualHeight) / 2)
                                ));
                    }
                    else
                    {
                        Point newImgMid = new Point(newWidth * _relativeMidpoint.X, newHeight * _relativeMidpoint.Y);
                        Point origin = new Point(newImgMid.X - _screenMidpoint.X, newImgMid.Y - _screenMidpoint.Y);
                        viewport.SetViewportOrigin(origin);
                    }
                }
            }
    
            /// <summary> 
            /// Coerce the scale into being within the proper range. Optionally compute the constraints  
            /// on the scale so that it will always fill the entire screen and will never get too big  
            /// to be contained in a hardware surface. 
            /// </summary> 
            /// <param name="recompute">Will recompute the min max scale if true.</param> 
            void CoerceScale(bool recompute)
            {
                if (recompute && _bitmap != null && viewport != null)
                {
                    // Calculate the minimum scale to fit the viewport 
                    double minX = viewport.ActualWidth / _bitmap.PixelWidth;
                    double minY = viewport.ActualHeight / _bitmap.PixelHeight;
    
                    _minScale = Math.Min(minX, minY);
                }
    
                _coercedScale = Math.Min(MaxScale, Math.Max(_scale, _minScale));
    
            }
    
        }
    }

  2. #2
    Registered User
    Join Date
    Jul 2013
    Posts
    8

    Re: Image view undesirably cropped

    I am facing a similar issue.
    When I remove CacheMode="BitmapCache", the cropping goes away but the zoom and pan performance is affected.



    Update:
    It seems that there is a size limit (2000 x 2000) of image size in the Windows Phone environment. See this.
    Do have a look at the PhotoPage.xaml and PhotoPage.xaml.cs files in the FilterExplorerWP project .
    It will help you.
    Last edited by BuildNokia; 2014-05-19 at 21:16. Reason: Fixed link

  3. #3
    Regular Contributor
    Join Date
    Oct 2013
    Location
    Pennsauken, NJ, USA
    Posts
    123

    Re: Image view undesirably cropped

    The size limit for any control in WP8 is 4096x4096 (2048x2048 in WP7). That's probably what is happening.

    You can either:
    1. Load the image using a DecodePixelHeight or DecodePixelWidth to reduce the resolution. Yes, you lose some resolution if you plan on zooming, but it's an easy solution.

    2. Use Nokia Imaging SDK and follow one of the methods in the wiki for displaying high resolution images. The way it generally works is that it loads a low resolution image when zoomed out, but will reload the high-resolution portion of the image you're zoomed in on.

  4. #4
    Nokia Developer Moderator
    Join Date
    Oct 2006
    Location
    Finland
    Posts
    4,573

    Re: Image view undesirably cropped

    FYI, this thread has been featured and you will find details of the same here

Similar Threads

  1. Marketing Kit Videos: images cropped because shop screenshots are square
    By internetlabor in forum Feedback - Nokia Developer Services & Infrastructure
    Replies: 3
    Last Post: 2013-01-31, 00:46
  2. Replies: 1
    Last Post: 2009-09-29, 15:23
  3. Can I open the image editor view with specific image?
    By nadis in forum Symbian Media (Closed)
    Replies: 0
    Last Post: 2009-08-12, 10:47
  4. ListBox cropped
    By ash_leo in forum Symbian
    Replies: 7
    Last Post: 2008-12-08, 10:06
  5. Image.getRGB on 6600 results in cropped image
    By CheekyWirelessUSA in forum Mobile Java Media (Graphics & Sounds)
    Replies: 0
    Last Post: 2003-11-11, 15:51

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×