最近在學習WP8,想實作WP微信中檢視圖檔時的放大縮小功能。
網上找了兩個解決方案：
1 利用GestureListener
這個類在Microsoft.Phone.Controls.Toolkit中，GestureListener可以捕捉到WP手機螢幕上的手勢動作。
XAML檔案：
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image x:Name="_image" Source="/Assets/test.jpg" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<ScaleTransform x:Name="transform"/>
</Image.RenderTransform>
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener
DoubleTap="OnDoubleTap"DragDelta="OnDragDelta"
Flick="OnFlick"
PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" PinchCompleted="OnPinchCompleted"/>
</toolkit:GestureService.GestureListener>
</Image>
</Grid> cs檔案：
double initialScale;
public Zoom()
{
InitializeComponent();
}
private void OnDoubleTap(object sender, Microsoft.Phone.Controls.GestureEventArgs e)
{
transform.ScaleX = transform.ScaleY = 1;
}
private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
transform.CenterX -= e.HorizontalChange;
transform.CenterY -= e.VerticalChange;
}
private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
initialScale = transform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
transform.ScaleX = transform.ScaleY = initialScale * e.DistanceRatio;
}
private void OnPinchCompleted(object sender, PinchGestureEventArgs e)
{
}
private void OnFlick(object sender, FlickGestureEventArgs e)
{
} 前面是在XAML代碼中建構GestureListener，在背景代碼中也可以建構GestureListener。
Grid grd = new Grid
{
Height = 800,
Width = 480,
Background = new SolidColorBrush(Colors.Black),
Opacity = 0.9,
};
Image img = new Image { Source = source };
grd.Children.Add(img);
//設定圖檔變換類型為縮放
ScaleTransform transform = new ScaleTransform();
img.RenderTransform = transform;
var gesListener= GestureService.GetGestureListener(img);
gesListener.DoubleTap += (obj, arg) =>
{
transform.ScaleX = transform.ScaleY = 1;
};
gesListener.DragDelta += (obj, arg) =>
{
transform.CenterX -= arg.HorizontalChange;
transform.CenterY -= arg.VerticalChange;
};
gesListener.PinchStarted += (obj, arg) =>
{
initialScale = transform.ScaleX;
};
gesListener.PinchDelta += (obj, arg) =>
{
transform.ScaleX = transform.ScaleY = initialScale * arg.DistanceRatio;
}; 2 ViewportControl
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ViewportControl x:Name="viewport"
ManipulationStarted="OnManipulationStarted" ManipulationDelta="OnManipulationDelta"
ManipulationCompleted="OnManipulationCompleted" ViewportChanged="viewport_ViewportChanged">
<Canvas x:Name="canvas">
<Image x:Name="TestImage" Source="/Assets/test.jpg"
RenderTransformOrigin="0,0" CacheMode="BitmapCache"
ImageOpened="OnImageOpened">
<Image.RenderTransform>
<ScaleTransform x:Name="xform"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ViewportControl>
</Grid> 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();
BuildLocalizedApplicationBar();
}
/// <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));
}
// Sample code for building a localized ApplicationBar
private void BuildLocalizedApplicationBar()
{
// Set the page's ApplicationBar to a new instance of ApplicationBar.
ApplicationBar = new ApplicationBar();
// Create a new button and set the text value to the localized string from AppResources.
ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/appbar_info.png", UriKind.Relative));
appBarButton.Click += appBarButton_Click;
appBarButton.Text = AppResources.AppBarButtonInfoText;
ApplicationBar.Buttons.Add(appBarButton);
}
void appBarButton_Click(object sender, EventArgs e)
{
MessageBox.Show(AppResources.PinchZoomHelpText, AppResources.InfoCaption,MessageBoxButton.OK);
} PS:測試的話應該部署到WP8手機中測試。
參考：
http://www.cnblogs.com/chengxingliang/archive/2011/08/15/2137377.html
http://www.cnblogs.com/JerryH/archive/2012/01/05/2312635.html
http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee
如果我的文章對你有幫助，就點一下推薦吧.(*^__^*)
![WP8基礎------布局學習[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)