0

I have this peculiar problem. I am having a user control . I am making an app for Windows 8.1 where I would choose an image from my Picture gallery. The image would open in my app with Stretch is Uniform and Horizontal And vertical alignment to center.

My user control will appear where I tap on the image. Now the problem is , when the image Stretch was none , I was able to magnify the correct region (around my click) , but now when I make it Stretch to Uniform and Set the horizontal and vertical Alignment to Center , I am getting other pixel information in my user control.

I want to know how to fix it.Any how , the images can be of 2*Full HD also or they can be HD or even less. Secondly , I want to know the boundaries of the image . With boundaries I want to say that , my user control shouldnt go above the boundaries of the image . How to implement that. If my code is needed , I would paste it , If required.

Have this video for reference . This is what I have to develop ! I have the user control ready and I am getting exact pixels for Stretch=NONE , and no Horizontal And Vertical Alignment set.

This is my code for my app

Community
  • 1
  • 1
Apoorv
  • 2,023
  • 1
  • 19
  • 42

1 Answers1

0

I believe the issue is with how you use the control, rather than the image. If you avoid doing the bitmap cropping and replacing, it would speed up dramatically and likely work for all stretch types.

I've modified the source to show this - removing the Cropping completely. If you need cropping for other reasons, you should consider using the unsafe keyword (and property setting to allow) in order to dramatically speed up its use.

Also, to avoid the lagging/jumping upward, I added IsHitTestVisible="False" so that your delta wouldn't be interrupted by hovering over your image.

I see you have the 45-degree code already - since it wasn't in your source, I only added an example of 90 degree rotation when you get to the sides - so you can see how to set a RenderTransformOrigin point.

MainPage.xaml:

<Page x:Name="page1" 
    x:Class="controlMagnifier.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="ParentGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" PointerReleased="ParentGrid_OnPointerReleased"  >
        <Canvas x:Name="InkPresenter" Height="auto" Width="auto">

            <Image Stretch="Uniform" x:Name="image2"  >
                <Image.Source >
                    <BitmapImage UriSource="/Assets/wallpaper.jpg" />
                </Image.Source>
            </Image>

        </Canvas>

        <local:MagnifierUsercontrol  x:Name="MagnifyTip"  Visibility="Collapsed"  ManipulationMode="All"
                                     IsHitTestVisible="False" Height="227" Width="171"
                                     VerticalContentAlignment="Bottom" HorizontalContentAlignment="Center">
        </local:MagnifierUsercontrol>
    </Grid>
</Page>

MainPage.xaml.cs:

using System;
using Windows.Foundation;
using Windows.Storage;
using Windows.UI.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace controlMagnifier
{
    public sealed partial class MainPage : Page
    {
        public const int XAxis = 200;
        public const int YAxis = 435;
        private readonly RotateTransform myRotateTransform = new RotateTransform {CenterX = 0.5, CenterY = 1};
        private readonly ScaleTransform myScaleTransform = new ScaleTransform {ScaleX = 1, ScaleY = 1};
        private readonly TransformGroup myTransformGroup = new TransformGroup();
        private readonly TranslateTransform myTranslateTransform = new TranslateTransform();
        public WriteableBitmap CurrentBitmapObj, CurrentCroppedImage = null;
        public Point currentContactPt, GridPoint;
        public Thickness margin;
        public PointerPoint pt;
        public double xValue, yValue;

        public MainPage()
        {
            InitializeComponent();
            ParentGrid.Holding += Grid_Holding;
            image2.PointerMoved += InkCanvas_PointerMoved;
            image2.PointerReleased += ParentGrid_OnPointerReleased;
            margin = MagnifyTip.Margin;
            image2.CacheMode = new BitmapCache();

            myTransformGroup.Children.Add(myScaleTransform);
            myTransformGroup.Children.Add(myRotateTransform);
            myTransformGroup.Children.Add(myTranslateTransform);

            MagnifyTip.RenderTransformOrigin = new Point(0.5, 1);
            MagnifyTip.RenderTransform = myTransformGroup;
        }

        private void Grid_Holding(object sender, HoldingRoutedEventArgs e)
        {
            try
            {
                GridPoint = e.GetPosition(image2);

                myTranslateTransform.X = xValue - XAxis;
                myTranslateTransform.Y = yValue - YAxis;
                MagnifyTip.RenderTransform = myTransformGroup;

                MagnifyTip.Visibility = Visibility.Visible;
            }
            catch (Exception)
            {
                throw;
            }
        }

        private void InkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            try
            {
                pt = e.GetCurrentPoint(image2);
                currentContactPt = pt.Position;

                xValue = currentContactPt.X;
                yValue = currentContactPt.Y;

                if (xValue > 300)
                {
                    myRotateTransform.Angle = -90;
                }
                else if (xValue < 100)
                {
                    myRotateTransform.Angle = 90;
                }
                else
                {
                    myRotateTransform.Angle = 0;
                }

                MagnifyTip.RenderTransform = myRotateTransform;

                myTranslateTransform.X = xValue - XAxis;
                myTranslateTransform.Y = yValue - YAxis;
                MagnifyTip.RenderTransform = myTransformGroup;
            }
            catch (Exception)
            {
                throw;
            }

            finally
            {
                e.Handled = true;
            }
        }

        private async void StoreCrrentImage()
        {
            try
            {
                var storageFile =
                    await
                        StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/wallpaper.jpg",
                            UriKind.RelativeOrAbsolute));

                using (
                    var fileStream =
                        await storageFile.OpenAsync(FileAccessMode.Read))
                {
                    var bitmapImage = new BitmapImage();

                    await bitmapImage.SetSourceAsync(fileStream);
                    var writeableBitmap =
                        new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
                    fileStream.Seek(0);
                    await writeableBitmap.SetSourceAsync(fileStream);
                    CurrentBitmapObj = writeableBitmap;
                    writeableBitmap.Invalidate();
                }
            }
            catch (Exception)
            {
                // Graphics g=new Graphics();
                throw;
            }


            finally
            {
            }
        }

        private void ParentGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e)
        {
            MagnifyTip.Visibility = Visibility.Collapsed;
        }
    }
}

MagnifierUsercontrol.xaml:

<UserControl
    x:Class="controlMagnifier.MagnifierUsercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="227" Width="171">

    <Canvas x:Name="controlCanvas" x:FieldModifier="public"  Height="Auto" Width="Auto" >
        <Grid Height="227" Width="171" HorizontalAlignment="Center" Canvas.Left="0" Canvas.Top="0">

            <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
                <Border.Background>
                    <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                </Border.Background>
            </Border>

            <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
            <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
            <Path x:Name="MagnifyTip"  Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338    c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33    C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328    c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
        </Grid>
    </Canvas>

</UserControl>

Let me know if this helps or if there is further toward your specific question.

Jim
  • 804
  • 6
  • 17
  • Hi Jim . Thsnks for the reply . I need the cropping whereever I move my mouse. I am currently using WriteablebitmapEX library for cropping. I have to crop only. Please go ahead and look at the video. Secondly , do you observe the way control is coming and going, the animation , and the way it turns towards the end of the screen ? I need help in that too – Apoorv Mar 14 '15 at 15:51
  • and anyidea how to use unsafe in the cropping function . The crop is not smooth as the video which I attached in the question. I need it to be as smooth as the video – Apoorv Mar 14 '15 at 16:06
  • The image control in the XAML , I need its Horizontal And Vertical Alignment = Center Tooo.. I havent tried your code but that will definately make some difference – Apoorv Mar 14 '15 at 16:22
  • do you need to crop in order to move the icon or for the purpose of magnifying the background? please restate the issue for me - is the icon positioning the issue or the correct location of the background, etc? – Jim Mar 14 '15 at 20:02
  • Ok. See , u have an image control with Stretch=Uniform and horizonal and vertical Alignment set to Stretch. My aim is to tap anywhere on the image using my finger,once I tap , my user control becomes visible and crops 50*50 pixels around my finger region. Now I have still not released my finger and I am dragging it to other location on the image , wherever my finger goes ,the user control moves with my and keeps on showing me the current cropped area. So the cropped image will be x1 ....xn if i am moving my fingers from x1 to xn – Apoorv Mar 14 '15 at 21:12
  • The thing is , the image loaded could be of 2K resolution or even the smallest one. My control should come just where I click and should be working on both potrait and landscape mode and different screen resolutions. – Apoorv Mar 14 '15 at 21:14
  • @Jim- Look into my solution. I implemented your code . http://1drv.ms/1G78sB1 Do watch the video https://www.youtube.com/watch?v=0Ie1Z-vk4aE&feature=youtu.be . It has to work like this only – Apoorv Mar 15 '15 at 09:34
  • I can see the video, but the solution doesn't download or respond. – Jim Mar 17 '15 at 08:31
  • Hey ! please give me some hours ! check back again tonight ! I will upload it to some other server – Apoorv Mar 17 '15 at 10:22
  • https://drive.google.com/file/d/0B3CCW5N6MTHoY25rUGV6ZW9MMVE/view?usp=sharing use the above link brother – Apoorv Mar 17 '15 at 14:58
  • Any success yet ? I have been waiting – Apoorv Mar 22 '15 at 09:33
  • I'll be able to look at it in a few days - not set up at the moment – Jim Mar 22 '15 at 22:06