在 WP8 中使用双指缩放图片幻灯片 [英] Pictures slideshow with pinch zoom in WP8
问题描述
我正在尝试使用经典图片视图制作应用程序,例如在照片中心或任何移动设备上的任何标准图片应用程序中.到目前为止,我开始使用 Kinnara 工具包 fork 中的 FlipView 和 CompositeTransform 进行缩放,但我不明白如何将图片与屏幕中心对齐(VerticalAlignment=Center 似乎不能作为 DataTemplate 中 Image 的属性),我不明白如何在查看邻居图片时使缩放图片在背景中不可见.另外,也许我错过了一些标准模式?
I am trying to make application with classic pictures view like in photo hub or any standard picture application on any mobile device. So far I began to use FlipView from Kinnara's toolkit fork and CompositeTransform for pinchzooming, but I don't understand how to align picture to the center of the screen (VerticalAlignment=Center seems to not working as a property of Image inside DataTemplate) and I don't understand how to make zoomed pictures not visible in background when viewing neighbor picture. Also, maybe there are some standard patterns for it that I missed?
UPD:一些代码
<toolkit:FlipView x:Name="FlipView"
d:DataContext="{d:DesignInstance viewModels:PostsViewModel}"
ItemsSource="{Binding Pictures}">
<toolkit:FlipView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<ProgressBar Value="{Binding DownloadProgress}"
Maximum="100"
Minimum="1"
IsEnabled="{Binding IsLoading}" />
<Image x:Name="PostImage"
Source="{Binding Sample}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill"
ManipulationDelta="Image_OnManipulationDelta">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</StackPanel>
</DataTemplate>
</toolkit:FlipView.ItemTemplate>
</toolkit:FlipView>
UPD2:缩放代码
private void Image_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
if (e.PinchManipulation != null)
{
var transform = (CompositeTransform)((Image) sender).RenderTransform;
// Scale Manipulation
transform.ScaleX = e.PinchManipulation.CumulativeScale;
transform.ScaleY = e.PinchManipulation.CumulativeScale;
// Translate manipulation
var originalCenter = e.PinchManipulation.Original.Center;
var newCenter = e.PinchManipulation.Current.Center;
transform.TranslateX = newCenter.X - originalCenter.X;
transform.TranslateY = newCenter.Y - originalCenter.Y;
// end
e.Handled = true;
}
}
推荐答案
如果您想要更像 OS 的外观(比如图片库中的图像显示方式),请查看名为 Windows Phone Media Viewer 的 nuget( https://www.nuget.org/packages/PhoneMediaViewer/).
If you want the more OS like look and feel ( like how images are shown in the pictures lib ), take a look at the nuget called Windows Phone Media Viewer ( https://www.nuget.org/packages/PhoneMediaViewer/ ).
甚至有一个示例应用程序已经在 MSDN 上用完了 ( http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b )
There is even a sample app where it's been used up on MSDN ( http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b )
这篇关于在 WP8 中使用双指缩放图片幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!