如何拥有照片查看器样式页面?

我不知道我是否正确命名,但我有一个显示一行图片的应用程序。 如果用户向左滑动,则全屏显示前一张图片,如果向右滑动,则会出现全屏下一张图片,两者的动作与在Photo应用程序或PDF阅读器中查看图片完全相同。 我以为我可以操纵全景控制以适应这个,但我无法全屏显示图片,顶部有标题的位置。

我怎样才能做到这一点? 有小费吗

注意:此stackoverflow上的策略很烦人。 有些类型的人可以投票关闭,或者说一些句子片段:你尝试了什么或你的代码在哪里。 从基地关闭这个问题以获得良好的感觉。

这是关于让导游有一种观看方式..我应该展示什么代码,如果不知道如何执行它? 无论如何,我找到了答案,没有必要这样做。

我会告诉你我做了什么,也许你会发现它足够了。 我想要一个全屏图像查看器,让我可以滑动到下一个(或上一个)图像,但是它会捕捉到图像而不是正常滚动。

我使用了禁用内部scrollViewer的全屏ListBox(请参阅XAML),然后使用一些附加的依赖项属性来获取内部scrollViewer的水平(和垂直)偏移的属性(因此我可以自己动画滚动)。 我的实现涉及更多,因为我想缩放(然后平移)图像,但刚刚进入下一个图像的部分并不难。

免责声明:我从StackOverflow和其他网站上的几个来源获取代码。 我不记得我在哪里得到它们了,但我自己并没有想出这些想法。 如果我知道在哪里给它,我会很乐意给予信任。

首先,创建一个名为ScrollViewerEx的新类:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; namespace ImageViewer { public class ScrollViewerEx { public static double GetHOffset(ScrollViewer obj) { return (double)obj.GetValue(ScrollViewer.HorizontalOffsetProperty); } public static void SetHOffset(ScrollViewer obj, double value) { obj.SetValue(HOffsetProperty, value); } // Using a DependencyProperty as the backing store for HOffset. This enables animation, styling, binding, etc... public static readonly DependencyProperty HOffsetProperty = DependencyProperty.RegisterAttached("HOffset", typeof(double), typeof(ScrollViewerEx), new PropertyMetadata(new PropertyChangedCallback(OnHOffsetChanged))); private static void OnHOffsetChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { var scroll = sender as ScrollViewer; scroll.ScrollToHorizontalOffset((double)e.NewValue); } public static double GetVOffset(ScrollViewer obj) { return (double)obj.GetValue(ScrollViewer.VerticalOffsetProperty); } public static void SetVOffset(ScrollViewer obj, double value) { obj.SetValue(VOffsetProperty, value); } // Using a DependencyProperty as the backing store for VOffset. This enables animation, styling, binding, etc... public static readonly DependencyProperty VOffsetProperty = DependencyProperty.RegisterAttached("VOffset", typeof(double), typeof(ScrollViewerEx), new PropertyMetadata(new PropertyChangedCallback(OnVOffsetChanged))); private static void OnVOffsetChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) { var scroll = sender as ScrollViewer; scroll.ScrollToVerticalOffset((double)e.NewValue); } } } 

好的,我们假设你有一个如下所示的列表框。 在我的案例中,Images属性是一个名为PictureModel的类,里面有一个ImageSource。 我没有显示我的ItemTemplate,只是在里面放了一个Image并将Source绑定到你的ImageSource。 注意ListBox下面的Rectangle。 我把所有的触摸代码放在那里,因为当我使用缩放图像时,我的坐标系正在改变。 使用矩形叠加使得我有所有触摸的标准屏幕坐标。 你可能不需要这个。

                      

好的,另一个关键部分。 确保将此信息放在页面的构造函数中。 这使您可以为您的滚动查看器偏移更改设置动画。

 Storyboard.SetTargetProperty(ScrollStoryboard.Children[0], new PropertyPath(ScrollViewerEx.HOffsetProperty)); Storyboard.SetTargetProperty(ScrollStoryboard.Children[1], new PropertyPath(ScrollViewerEx.VOffsetProperty)); 

获取ListBox内滚动查看器的永久引用:

 private void listBox_Loaded_1(object sender, RoutedEventArgs e) { scrollviewer = GetVisualChild(listBox); } 

最后,处理操作事件。 动画列表框滚动的关键一点是操作完成事件。 我没有使用垂直偏移,只使用水平偏移。 变量vm.Position是scrollviewer.horizo​​ntaloffset的计算位置。 基本上,如果您在第5张图像上,则将屏幕宽度乘以4以获得水平偏移。

 private void Rectangle_ManipulationCompleted_1(object sender, ManipulationCompletedEventArgs e) { if (e.FinalVelocities.LinearVelocity.X > 2000) { if (ScrollStoryboard.GetCurrentState() != ClockState.Stopped) ScrollStoryboard.Stop(); // ensure storyboard stopped after previous run AnimationH.SetValue(DoubleAnimation.FromProperty, scrollviewer.HorizontalOffset); AnimationH.SetValue(DoubleAnimation.ToProperty, (double)vm.Position); Storyboard.SetTarget(ScrollStoryboard, scrollviewer); ScrollStoryboard.Begin(); } } 

我希望这有帮助。 就像我说的,除了从ListBox获得的内置UI虚拟化之外,我所做的全部实现还包括数据虚拟化。 那和缩放。 它还没准备好发布,但这会让你开始。