How to animate image zoom change in WPF? - c#

I am building an image viewer.
I have created a functionality that when the user moves the slider, it changes the ZoomLevel property value. This subsequently zooms the image based on the value provided by the ZoomLevel property.
<Image
Name="image"
Source="Sample1.jpg"
Opacity="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="None"
RenderTransformOrigin="0.5,0.5"
RenderOptions.BitmapScalingMode="HighQuality">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform
ScaleX="{Binding Path=ZoomLevel}"
ScaleY="{Binding Path=ZoomLevel}" />
<TranslateTransform />
</TransformGroup>
</Image.RenderTransform>
</Image>
I wish to be able to animate the zooming with a DoubleAnimation. Animation is supposed to start from the current zoom level and then get to the zoom specified in the bound ZoomLevel property. It would be great if someone could provide some help in XAML. Thanks!
Mouse wheel code:
private void border_MouseWheel(object sender, MouseWheelEventArgs e)
{
int delta;
delta = e.Delta;
zoom(delta);
}
private void zoom(int delta)
{
double zoomIncrement;
//Different zoom levels at different zoom stages
if (ZoomLevel > 2)
{
zoomIncrement = Math.Sign(delta) * 0.2;
}
else if (ZoomLevel >= 1 && ZoomLevel <= 2)
{
zoomIncrement = Math.Sign(delta) * 0.1;
}
else
{
zoomIncrement = Math.Sign(delta) * 0.06;
}
//Rounding zoom level to boundary values
//Zooming is allowed from 10% to 600%
if (ZoomLevel + zoomIncrement > 6)
{
ZoomLevel = 6;
}
else if (ZoomLevel + zoomIncrement < 0.1)
{
ZoomLevel = 0.1;
}
else
{
ZoomLevel += zoomIncrement;
}
}


It is a little messy but try this.
namespace Zoom
{
public partial class Window1
{
public double ZoomLevel { get; set; }
public double SlideLevel { get; set; }
public Window1()
{
InitializeComponent();
ZoomLevel = 1.0;
SlideLevel = 1.0;
image.MouseWheel += image_MouseWheel;
}
private void image_MouseWheel(object sender, MouseWheelEventArgs e)
{
double zoom = e.Delta > 0 ? .1 : -.1;
slider.Value = (SlideLevel + zoom);
}
private void ZoomImage(double zoom)
{
Storyboard storyboardh = new Storyboard();
Storyboard storyboardv = new Storyboard();
ScaleTransform scale = new ScaleTransform(ZoomLevel, ZoomLevel);
image.RenderTransformOrigin = new Point(0.5, 0.5);
image.RenderTransform = scale;
double startNum = ZoomLevel;
double endNum = (ZoomLevel += zoom);
if (endNum > 1.0)
{
endNum = 1.0;
ZoomLevel = 1.0;
}
DoubleAnimation growAnimation = new DoubleAnimation();
growAnimation.Duration = TimeSpan.FromMilliseconds(300);
growAnimation.From = startNum;
growAnimation.To = endNum;
storyboardh.Children.Add(growAnimation);
storyboardv.Children.Add(growAnimation);
Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
Storyboard.SetTarget(growAnimation, image);
storyboardh.Begin();
Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleY"));
Storyboard.SetTarget(growAnimation, image);
storyboardv.Begin();
}
private void slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
{
double zoomChange = (SlideLevel - slider.Value) * -1;
SlideLevel = SlideLevel + zoomChange;
ZoomImage(zoomChange);
}
}
}
I found this other stack question to be quite helpful
Here is the current setup of XAML that I have as well.
<Border MaxWidth="500"
MaxHeight="500"
Height="500"
Width="500"
Name="border">
<Image
Name="image"
Source="picture1.png"
Opacity="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5"
RenderOptions.BitmapScalingMode="HighQuality"
ClipToBounds="True">
</Image>
</Border>
<Slider
HorizontalAlignment="Left"
Margin="44,70,0,148"
Name="slider"
Width="24"
Value="1.0"
Minimum="0"
Maximum="1.0"
LargeChange="0.1"
Orientation="Vertical"
FlowDirection="LeftToRight"
TickFrequency="0.1"
IsSnapToTickEnabled="False"
ValueChanged="slider_ValueChanged" />


Have you tried using a ViewBox? You can bind the final width to any value you need, here's a quick sample:
<Window.Resources>
<Storyboard x:Key="ZoomIn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ImageContainer">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Viewbox x:Name="ImageContainer" Width="200">
<Image Source="http://images.wikia.com/lossimpson/es/images/a/a7/Homer_Simpson2.png"/>
</Viewbox>
</Grid>

Related

UWP Radial Progress Bar Image Fill

I am using the Radial Progress Bar from the UWP ToolKit. I want to use this progress in a game that I creating. I have an image that I want to fill the foreground of the progress bar with. No matter what I try I cannot get the image to fill in the progress bar, in the manner a progress bar fills in.
I am currently trying to scale the image in the foreground but that isn't quite the effect I am going for.
XAML:
<toolKit:RadialProgressBar Width="316" Height="316" Minimum="0" Maximum="100" Value="{Binding Value}" Thickness="36"
BorderBrush="Transparent" >
<toolKit:RadialProgressBar.Foreground>
<ImageBrush ImageSource="ms-appx:///Assets/progress2.png" >
<ImageBrush.Transform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="{Binding Scale}" ScaleY="{Binding Scale}" />
</ImageBrush.Transform>
</ImageBrush>
</toolKit:RadialProgressBar.Foreground>
</toolKit:RadialProgressBar>
C#:
private int _value;
public int Value
{
get => _value;
set
{
if (_value != value)
{
_value = value;
RaisePropertyChanged(nameof(Value));
Scale = 1.0-(100.0 - (316.0 * (Convert.ToDouble(value) / 100.0) / 316.0 * 100.0))/100.0;
}
}
}
private double _scale;
public double Scale
{
get => _scale;
set
{
if (_scale != value)
{
_scale = value;
RaisePropertyChanged(nameof(Scale));
}
}
}
Below is the effect that the above code creates:
Is there a way to fill a progress bar with an image?

How about custom one using Win2d?
XAML:
<Grid Width="500" Height="500">
<xaml:CanvasControl x:Name="CanvasControl" Draw="CanvasControl_OnDraw"/>
<Slider Width="500" VerticalAlignment="Center" ValueChanged="RangeBase_OnValueChanged"/>
</Grid>
and behind it:
private static Vector2 _centerPoint = new Vector2(250);
private static float _radius = 200;
private int _currentValue;
private readonly List<Vector2> _points = new List<Vector2>();
private readonly CanvasStrokeStyle _strokeStyle = new CanvasStrokeStyle
{
StartCap = CanvasCapStyle.Round,
EndCap = CanvasCapStyle.Round
};
public MainPage()
{
InitializeComponent();
GetPoints(100);
}
private void GetPoints(int i)
{
var radFactor = Math.PI / 180;
var angleStep = 360f / i;
for (int j = 0; j < i + 1; j++)
{
_points.Add(new Vector2(_centerPoint.X + _radius * (float)Math.Cos((angleStep * j + 90) * radFactor),
_centerPoint.Y + _radius * (float)Math.Sin((angleStep * j + 90) * radFactor)));
}
}
private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
for (int i = 0; i < _currentValue; i++)
{
args.DrawingSession.DrawLine(_points[i], _points[i + 1], Colors.LimeGreen, 24, _strokeStyle);
}
}
private void RangeBase_OnValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
_currentValue = (int) e.NewValue;
CanvasControl.Invalidate();
}
and it should look like this:

I have decided to go away from using a radial progress bar. I have learned about Image cliping. I am using the image clip along with a Rotation transformation to get the desired effect.
XAML:
<Image Source="ms-appx:///Assets/Progress.png" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" >
<Image.Clip>
<RectangleGeometry Rect="{Binding Rect}" >
<RectangleGeometry.Transform>
<RotateTransform CenterX="{Binding CenterXY}" CenterY="{Binding CenterXY}" Angle="{Binding Angle}" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Image.Clip>
</Image>
C#:
private int _value;
public int Value
{
get => _value;
set
{
if (_value != value)
{
_value = value;
RaisePropertyChanged(nameof(Value));
Angle = 144 - 1.44 * value;
}
}
}

Clipping Using Ellipse and binding it inside my user control in Windows RT

I have an image and I am clipping the mouse area using an Ellipse in which I am quite successful.
But I want that ellipse to be a part of my user control and the user control should move along with my finger and the clipping Ellipse should be inside the user control .
The complete project can be downloaded from here
My UserControl'sXAML is
<UserControl
x:Class="App78.Magnifier"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="230"
Width="170">
<Grid Height="230" Width="170">
<Path 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" ></Path>
<Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
<Ellipse.RenderTransform>
<TranslateTransform x:Name="MagnifierTransform" x:FieldModifier="public"/>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform x:FieldModifier="public"
x:Name="PositionTransform"/>
<ScaleTransform x:FieldModifier="public"
x:Name="ZoomTransform"/>
<TranslateTransform x:FieldModifier="public"
x:Name="CenterTransform" />
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</UserControl>
My MainPage.XAML is
<Page
x:Class="App78.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
x:Name="LayoutGrid"
Margin="0,0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Holding="LayoutGrid_Holding"
PointerMoved="LayoutGrid_OnPointerMoved"
PointerWheelChanged="LayoutGrid_OnPointerWheelChanged">
<Image
x:Name="BigImage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"
Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />
<!--<Ellipse
x:Name="MagnifierEllipse"
Opacity="1"
Visibility="Collapsed"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsHitTestVisible="False"
Width="150"
Height="150"
Stroke="White"
StrokeThickness="3"
Margin="-100">
<Ellipse.RenderTransform>
<TranslateTransform
x:Name="MagnifierTransform"/>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform
x:Name="PositionTransform"/>
<ScaleTransform
x:Name="ZoomTransform"/>
<TranslateTransform
x:Name="CenterTransform" />
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>-->
<local:Magnifier x:Name="MagnifierTip" Visibility="Visible" />
</Grid>
</Page>
Please see the commented section of Ellipse , If I uncomment , I clearly get a Ellipse that is doing the clip.
My main requirenment is to get the Ellipse inside the user control , please refer the video for more clarification
My MainPage.XAML.CS has the following code
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace App78
{
public sealed partial class MainPage : Page
{
private double zoomScale = 2;
private double pointerX = 0;
private double pointerY = 0;
private const double MinZoomScale = .25;
private const double MaxZoomScale = 32;
public MainPage()
{
this.InitializeComponent();
var bi = (BitmapImage)BigImage.Source;
bi.ImageOpened += bi_ImageOpened;
this.SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
this.UpdateImageLayout();
}
void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
this.UpdateImageLayout();
}
private void UpdateImageLayout()
{
var bi = (BitmapImage)BigImage.Source;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
this.BigImage.Stretch = Stretch.None;
}
else
{
this.BigImage.Stretch = Stretch.Uniform;
}
this.UpdateMagnifier();
}
private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
// MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
var point = e.GetCurrentPoint(this.LayoutGrid);
this.pointerX = point.Position.X;
this.pointerY = point.Position.Y;
this.UpdateMagnifier();
}
private void UpdateMagnifier()
{
var bi = (BitmapImage)BigImage.Source;
double offsetX = 0;
double offsetY = 0;
double imageScale = 1;
var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
//imageScale = 1; - remains
}
else if (imageRatio < gridRatio)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
offsetY = 0;
imageScale = BigImage.ActualHeight / bi.PixelHeight;
}
else
{
offsetX = 0;
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
imageScale = BigImage.ActualWidth / bi.PixelWidth;
}
MagnifierTip.MagnifierTransform.X = this.pointerX;
MagnifierTip.MagnifierTransform.Y = this.pointerY;
MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
MagnifierTip. ZoomTransform.ScaleX = imageScale * zoomScale;
MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
}
private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
}
else
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
}
this.UpdateMagnifier();
}
private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
{
// MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}
}

I think you need to get your MagnifierTransform to the "root" Grid of your Magnifier UserControl.
Also the CenterTransform doesn't seem to be needed in my opinion.
The other last change is in the MainPage, making the User Control aligned to Top/Left so that the TranslateTransforms make sense.
Just as a bonus, I got the updated project here , also with pointer pressed/released events to show/hide the magnifier. Be warned that "Holding" doesn't work with most mouse devices. Source: link
I also added comments on my changes (comments start with DV:).
It's not perfect and there's obviously still a lot for you to implement but hopefully this is what you needed.
For whoever doesn't want to download the project I'll leave the updated code here:
MainPage.xaml
<Page
x:Class="App78.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid
x:Name="LayoutGrid"
Margin="0,0"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Holding="LayoutGrid_Holding"
PointerMoved="LayoutGrid_OnPointerMoved"
PointerWheelChanged="LayoutGrid_OnPointerWheelChanged"
PointerPressed="LayoutGrid_OnPointerPressed"
PointerReleased="LayoutGrid_OnPointerReleased">
<Image
x:Name="BigImage"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"
Source="http://blog.al.com/space-news/2009/04/iss015e22574.jpg" />
<local:Magnifier VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="MagnifierTip" Visibility="Collapsed" />
</Grid>
</Page>
MainPage.xaml.cs
using System;
using System.Diagnostics;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace App78
{
public sealed partial class MainPage : Page
{
private double zoomScale = 2;
private double pointerX = 0;
private double pointerY = 0;
private const double MinZoomScale = .25;
private const double MaxZoomScale = 32;
public MainPage()
{
this.InitializeComponent();
var bi = (BitmapImage)BigImage.Source;
bi.ImageOpened += bi_ImageOpened;
this.SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, Windows.UI.Xaml.SizeChangedEventArgs e)
{
this.UpdateImageLayout();
}
void bi_ImageOpened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
this.UpdateImageLayout();
}
private void UpdateImageLayout()
{
var bi = (BitmapImage)BigImage.Source;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
this.BigImage.Stretch = Stretch.None;
}
else
{
this.BigImage.Stretch = Stretch.Uniform;
}
this.UpdateMagnifier();
}
private void LayoutGrid_OnPointerMoved(object sender, PointerRoutedEventArgs e)
{
//DV: If pointer is not in contact we can ignore it
if (!e.Pointer.IsInContact) { return; }
var point = e.GetCurrentPoint(this.LayoutGrid);
this.pointerX = point.Position.X;
this.pointerY = point.Position.Y;
this.UpdateMagnifier();
}
private void UpdateMagnifier()
{
var bi = (BitmapImage)BigImage.Source;
double offsetX = 0;
double offsetY = 0;
double imageScale = 1;
var imageRatio = (double)bi.PixelWidth / bi.PixelHeight;
var gridRatio = this.LayoutGrid.ActualWidth / this.LayoutGrid.ActualHeight;
if (bi.PixelWidth < this.LayoutGrid.ActualWidth &&
bi.PixelHeight < this.LayoutGrid.ActualHeight)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - bi.PixelWidth);
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - bi.PixelHeight);
//imageScale = 1; - remains
}
else if (imageRatio < gridRatio)
{
offsetX = 0.5 * (this.LayoutGrid.ActualWidth - imageRatio * this.LayoutGrid.ActualHeight);
offsetY = 0;
imageScale = BigImage.ActualHeight / bi.PixelHeight;
}
else
{
offsetX = 0;
offsetY = 0.5 * (this.LayoutGrid.ActualHeight - this.LayoutGrid.ActualWidth / imageRatio);
imageScale = BigImage.ActualWidth / bi.PixelWidth;
}
//DV: This is probably not need anymore
//MagnifierTip.MagnifierTransform.X = this.pointerX;
//MagnifierTip.MagnifierTransform.Y = this.pointerY;
MagnifierTip.PositionTransform.X = (-this.pointerX + offsetX) / imageScale;
MagnifierTip.PositionTransform.Y = (-this.pointerY + offsetY) / imageScale;
//DV: I haven't tested the Scaling/Zoom
MagnifierTip.ZoomTransform.ScaleX = imageScale * zoomScale;
MagnifierTip.ZoomTransform.ScaleY = imageScale * zoomScale;
MagnifierTip.CenterTransform.X = MagnifierTip.MagnifierEllipse.ActualWidth / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
MagnifierTip.CenterTransform.Y = MagnifierTip.MagnifierEllipse.ActualHeight / 2 - MagnifierTip.MagnifierEllipse.StrokeThickness / 2;
//DV: I added a GlobalGrid Transform which translates every children
MagnifierTip.MagnifierTransformGrid.X = this.pointerX - (MagnifierTip.ActualWidth / 2);
MagnifierTip.MagnifierTransformGrid.Y = this.pointerY - (MagnifierTip.ActualHeight); ;
}
private void LayoutGrid_OnPointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
if (e.GetCurrentPoint(this.LayoutGrid).Properties.MouseWheelDelta > 0)
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale * 1.2));
}
else
{
zoomScale = Math.Max(MinZoomScale, Math.Min(MaxZoomScale, zoomScale / 1.2));
}
this.UpdateMagnifier();
}
//DV: Holding usually only works with touch https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.uielement.holding.aspx?f=255&MSPPError=-2147217396
private void LayoutGrid_Holding(object sender, HoldingRoutedEventArgs e)
{
//
}
//DV: pointer pressed supports both mouse and touch but fires immeadiatley. You'll have to figure out a delay strategy or using holding for touch and right click for mouse
private void LayoutGrid_OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
//DV: pointer released supports both mouse and touch.
private void LayoutGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e)
{
MagnifierTip.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}
}
}
Magnifier.xaml
<UserControl
x:Class="App78.Magnifier"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App78"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="230"
Width="170">
<Grid Height="230" Width="170">
<!-- DV: This is the global transform I added -->
<Grid.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="MagnifierTransformGrid" x:FieldModifier="public"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Opacity="1" Visibility="Visible" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Top" IsHitTestVisible="False" Width="135" Height="128" StrokeThickness="3" Margin="0,17,0,0" />
<Ellipse x:Name="MagnifierEllipse" x:FieldModifier="public" Opacity="1" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" Width="150" Height="150" Stroke="White" StrokeThickness="3" Margin="11,8,0,0" >
<Ellipse.Fill>
<ImageBrush
ImageSource="http://blog.al.com/space-news/2009/04/iss015e22574.jpg"
Stretch="None"
AlignmentX="Left"
AlignmentY="Top">
<ImageBrush.Transform>
<TransformGroup>
<TranslateTransform x:FieldModifier="public"
x:Name="CenterTransform"/>
<TranslateTransform x:FieldModifier="public"
x:Name="PositionTransform"/>
<ScaleTransform x:FieldModifier="public"
x:Name="ZoomTransform"/>
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</Ellipse.Fill>
</Ellipse>
<Path 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" ></Path>
</Grid>
</UserControl>

Windows phone 8 apps Image pinch/zoom in data template using canvas

Windows Phone 8 apps i am using image in pivot control inside data template and then using pinch/zoom image But My Problem is if i am minimize image so small then it not zooming image..How to use canvas in data template.
MY XAML
<phone:Pivot x:Name="pivot" ItemsSource="{Binding}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Name="title" FontWeight="ExtraBold" Text="{Binding _textview}" HorizontalAlignment="Center" FontSize="30" Foreground="Orange"></TextBlock>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Image Margin="0,-30,0,80" Name="img" Stretch="Fill" Source="{Binding _images}" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" DoubleTap="GestureListener_DoubleTap" DragDelta="GestureListener_DragDelta" />
</toolkit:GestureService.GestureListener>
</Image>
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
MY CS
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
var image = sender as Image;
var transform = image.RenderTransform as CompositeTransform;
angle = transform.Rotation;
scale = transform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
var image = sender as Image;
var transform = image.RenderTransform as CompositeTransform;
transform.Rotation = angle + e.TotalAngleDelta;
transform.ScaleX = scale * e.DistanceRatio;
transform.ScaleY = scale * e.DistanceRatio;
}
private void GestureListener_DoubleTap(object sender, GestureEventArgs e)
{
var image = sender as Image;
var transform = image.RenderTransform as CompositeTransform;
transform.ScaleX = transform.ScaleY = 1;
}
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
var image = sender as Image;
var transform = image.RenderTransform as CompositeTransform;
transform.TranslateX += e.HorizontalChange;
transform.TranslateY += e.VerticalChange;
}

when you need to show an image in canvas,
<Canvas>
<Image Margin="0,-30,0,80" Name="img" Stretch="Fill" Source="{Binding _images}" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform>
</Image>
</Canvas>
For further reference, here is a great official sample

You can prevent pinching the image too small by limiting the scale to a minimum size.
// Don't shrink the image to less than 1/4 normal size.
const double minScaleX = 0.25;
const double minScaleY = 0.25;
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
var image = sender as Image;
var transform = image.RenderTransform as CompositeTransform;
transform.Rotation = angle + e.TotalAngleDelta;
transform.ScaleX = scale * e.DistanceRatio;
transform.ScaleY = scale * e.DistanceRatio;
if (transform.ScaleX < minScaleX)
{
transform.ScaleX = minScaleX;
}
if (transform.ScaleY < minScaleY)
{
transform.ScaleY = minScaleY;
}
}

How to get the portion of image inside rectangle for cropping , windows phone 8

I have an image, and a rectangle on top of it.The image can be zoomed and dragged .I need to get the portion of the image inside the rectangle after these operations and save it as a jpeg.
This is my code,
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
initialAngle = compositeTransform.Rotation;
initialScale = compositeTransform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
if (1.0 <= (initialScale * e.DistanceRatio))
{
compositeTransform.ScaleX = initialScale * e.DistanceRatio;
compositeTransform.ScaleY = initialScale * e.DistanceRatio;
}
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
compositeTransform.TranslateX += e.HorizontalChange;
compositeTransform.TranslateY += e.VerticalChange;
}
and my XAML is
<Image x:Name="mypic" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache" HorizontalAlignment="Left" Margin="79,0,0,0" VerticalAlignment="Top" Height="345" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="scale" />
<TranslateTransform x:Name="transform" />
<CompositeTransform x:Name="compositeTransform"/>
</TransformGroup>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragDelta="OnDragDelta" PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
</toolkit:GestureService.GestureListener>
</Image>
<Rectangle x:Name="rect" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="250" Margin="111,26,0,0" Stroke="Black" VerticalAlignment="Top" Width="233" Opacity="0.1" StrokeThickness="3"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="275,396,0,0" VerticalAlignment="Top" Click="ClipImage"/>
In the ClipImage method how do I get the cropped image? Im not using canvas here.. Is using canvas mandatory for this?In case Im moving the rectangle i can call CompositionTarget.Rendering to get the current x,y points .How do I proceed in this scenario?
EDIT:
Im now able to get portion of image inside rectangle with the following code..
void ClipImage()
{
RectangleGeometry geo = new RectangleGeometry();
r = (Rectangle)rect;
GeneralTransform gt = r.TransformToVisual(LayoutRoot);
Point p = gt.Transform(new Point(0, 0));
geo.Rect = new Rect(p.X, p.Y, (r.Width) + 50, (r.Height) + 50);
mypic.Clip = geo;
r.Visibility = System.Windows.Visibility.Collapsed;
TranslateTransform t = new TranslateTransform();
t.X = -p.X;
t.Y = -p.Y;
mypic.RenderTransform = t;
}
This works fine when I don't pan or zoom the image, but when the image is zoomed by user, this doesnt work.Can some one pls help..

Smooth image clipping while scrolling

So I'm trying to achieve an affect like the native cropper when you use a PhotoChooserTask. If you aren't familiar, there's an image in the background with a border over top, and the image appears to change opacity when in and out of the border. The following code works fine, but it's not terribly smooth (the clipped image slightly lags behind the dragging movement). Is there any way to speed up the clipping or change things so that there's less lag? I have the following XAML:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid x:Name="cropContainer" Width="375" MouseLeftButtonDown="cropContainer_MouseLeftButtonDown" MouseLeftButtonUp="cropContainer_MouseLeftButtonUp" MouseMove="cropContainer_MouseMove">
<Grid.RenderTransform>
<TranslateTransform x:Name="cropTransform" />
</Grid.RenderTransform>
<Image x:Name="fullImage" Source="{Binding Image}" Opacity=".5" />
<Image x:Name="clippedImage" Source="{Binding Image}">
<Image.Clip>
<RectangleGeometry Rect="0,0,375,267" />
</Image.Clip>
</Image>
</Grid>
</Grid>
<Border x:Name="cropBorder" Grid.Row="1" BorderThickness="1" BorderBrush="White" Opacity="1" Height="267.90571169537624660018132366274" Width="375">
</Border>
and here is the code for tracking and clipping during the sliding:
private Point _cropBorderOffset, _original, _newPosition;
private bool _moving;
private double _maxUp, _maxDown;
void Page_Loaded(object sender, RoutedEventArgs e)
{
var transform = cropBorder.TransformToVisual(Application.Current.RootVisual);
_cropBorderOffset = transform.Transform(new Point(0, 0));
_maxDown = ((fullImage.ActualHeight - cropBorder.ActualHeight) / 2);
_maxUp = -_maxDown;
var rect = (clippedImage.Clip as RectangleGeometry).Rect;
(clippedImage.Clip as RectangleGeometry).Rect = new Rect(rect.X, (fullImage.ActualHeight / 2) - 134, rect.Width, rect.Height);
}
private void cropContainer_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
cropContainer.CaptureMouse();
_original = e.GetPosition(cropBorder);
_moving = true;
}
private void cropContainer_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
cropContainer.ReleaseMouseCapture();
_moving = false;
}
private void cropContainer_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
_newPosition = e.GetPosition(cropBorder);
if(_moving)
{
var deltaY = _newPosition.Y - _original.Y;
var transform = fullImage.TransformToVisual(Application.Current.RootVisual);
var fullImageOffset = transform.Transform(new Point(0, 0));
var marginTop = deltaY;
//Too far down
if (marginTop > _maxDown)
{
marginTop = _maxDown;
}
//Too far up
else if (marginTop < _maxUp)
{
marginTop = _maxUp;
}
cropTransform.Y = marginTop;
var rect = (clippedImage.Clip as RectangleGeometry).Rect;
(clippedImage.Clip as RectangleGeometry).Rect = new Rect(rect.X, _cropBorderOffset.Y - fullImageOffset.Y, rect.Width, rect.Height);
}
}

Instead of drawing the image twice, once with clipping and once without, could you not simply draw semi-transparent rectangles to block out the sides and draw a white outlined for the center? That should reduce lag considerably.
You could then use the left, top, width and height of the clipping rectangle once the position is chosen to actually do the crop in-memory.

Categories