如何拥有照片浏览器页面风格？ [英] How to have photo viewer style pages?
问题描述
我不知道如果我把它命名为正确的，但我有一个应用程序，显示图片的一排。如果用户挥笔留在全屏幕上一张照片出现了，如果刷卡右边会出现在全屏下一张图片，都与运动完全一样的照片应用程序观看图片或PDF阅读器。我以为我可以操纵全景控制，以适应这一点，但我不能全屏幕显示的画面并没有发生在顶部的标题。
I don't know if I named it right, But I have an app which shows a row of pictures. If the user swipes left the previous picture in full screen appears, and if swipes right the next picture in full screen appears, both with a motion exactly the same as viewing pictures in Photo app, or a PDF reader. I thought I can manipulate the panorama control to fit this, but I couldn't show the picture in full screen and there is place for title at the top.
如何能是我做的？任何提示
How can I do that? any tips
注意：这个计算器的政策得到了烦人。有一些类型的人谁才可以投票关闭，或者说一些句子片段：你尝试过什么或者是你的代码。从基本关闭这个问题得到了很好的感觉。
Note: Policies on this stackoverflow got annoying. There are some type of people who just can vote to close, or say some sentence snippets: what have you tried or where is your code. Close this question from the base to get a good feeling.
这是有关要求导游有观看..我应该表现出什么样的代码风格，如果没有关于如何执行它的想法？反正我发现我的答案，没必要这样。
this is about asking guides to have a style of viewing.. what code should I show, if there is no idea of how to perform it? anyway I found my answer and no need to this.
推荐答案
我会告诉你我做了什么，也许你会发现它足够。我想要一个全屏幕的图像浏览器，可以让我刷到下一个（或上）的图像，但它捕捉到的图像，而不是正常滚动。
I'll tell you what I did and maybe you'll find it adequate. I wanted a full-screen image viewer that lets me swipe to the next (or previous) image, but have it snap to the image instead of normal scrolling.
我用禁用（参见XAML）内部的ScrollViewer全屏列表框，然后使用一些附加的依赖属性得到偏移内部的ScrollViewer的水平（与垂直）属性（这样我可以动画滚动我自己）。我实现了很多更复杂的，因为我想也放大（然后平移）的形象，但只是进入下一个图像的部分并不难做到。
I used a fullscreen ListBox with the internal scrollViewer disabled (see XAML), then used some attached dependency properties to get a property for the Horizontal (and Vertical) Offset of the internal scrollViewer (so I can animate the scrolling myself). My implementation is a lot more involved because I wanted to also zoom (and then pan) the image, but the part that just goes to the next image is not hard to do.
免责声明：我已经采取了从代码的StackOverflow和其他网站几个来源。我不记得在那里我得到了他们了，但我并没有拿出这些想法都在我自己的。我很乐意给予信贷，如果我知道在哪里给它
Disclaimer: I've taken code from several sources on StackOverflow and other sites. I don't remember where I got them anymore, but I did not come up with these ideas all on my own. I'd be happy to give credit if I knew where to give it.
首先，创建一个名为ScrollViewerEx新类：
First, create a new class called 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，但只是把图像内并绑定源到您的ImageSource。注意下面的列表框矩形。我把我所有的触摸代码中有，因为我是用放大的图像时，我的坐标系发生了变化。使用矩形叠加使得它让我对所有的触摸屏幕的标准坐标。你可能不需要这个。
Ok, let's assume you have a listbox prepared like the one below. The Images property in my case was a class called PictureModel and inside there was an ImageSource. I'm not showing my ItemTemplate but just put an Image inside and bind the Source to your ImageSource. Notice the Rectangle below the ListBox. I put all my touch code there because when I was using zoomed images, my coordinate system was changing. Using the Rectangle overlay makes it so that I have the standard screen coordinates for all touches. You may not need this.
<ListBox ItemsSource="{Binding Images}"
x:Name="listBox"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.ManipulationMode="Control"
Loaded="listBox_Loaded_1"
>
<ListBox.Resources>
<Storyboard x:Name="ScrollStoryboard">
<DoubleAnimation x:Name="AnimationH" Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation x:Name="AnimationV" Duration="0:0:0.5">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<StaticResource ResourceKey="ListBoxItemPivotStyle"/>
</ListBox.ItemContainerStyle>
</ListBox>
<Rectangle Fill="Transparent"
x:Name="TouchRectangle"
ManipulationCompleted="Rectangle_ManipulationCompleted_1"
ManipulationDelta="Rectangle_ManipulationDelta_1"
ManipulationStarted="Rectangle_ManipulationStarted_1"/>
好吧，另一个关键部分。确保你把这个在你的页面的构造函数。这就是让你的动画的ScrollViewer偏移的变化。
Ok, another critical section. Make sure you put THIS in the constructor of your page. This is what allows you to animate your scrollviewer offset changes.
Storyboard.SetTargetProperty(ScrollStoryboard.Children[0], new PropertyPath(ScrollViewerEx.HOffsetProperty));
Storyboard.SetTargetProperty(ScrollStoryboard.Children[1], new PropertyPath(ScrollViewerEx.VOffsetProperty));
获得永久参考列表框内部的ScrollViewer：
Get a permanent reference to the scrollviewer inside the ListBox:
private void listBox_Loaded_1(object sender, RoutedEventArgs e)
{
scrollviewer = GetVisualChild<ScrollViewer>(listBox);
}
最后，处理操纵事件。关键的一个动画列表框滚动是操作完成的事件。我没有使用垂直偏移，只是水平的。可变vm.Position是沿scrollviewer.horizontaloffset一个计算的位置。基本上，如果你是第5个图像，然后乘以4的屏幕宽度以获得水平偏移。
Finally, handle the manipulation events. The critical one to animate the listbox scroll is the manipulation completed event. I did not use the vertical offsets, just the horizontal ones. The variable vm.Position is a calculated position along the scrollviewer.horizontaloffset. Basically, if you're on the 5th image, then multiply the screen width by four to get the horizontal offset.
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();
}
}
我希望这帮助。就像我说的，全面落实我做了包括数据虚拟化，除了内置您从列表框中获取UI虚拟化。这和缩放。它不完全准备好发布，但这将让你开始。
I hope this helps. Like I said, the full implementation I made includes data virtualization in addition to the built-in UI virtualization you get from the ListBox. That and zooming. It's not exactly ready to publish but this will get you started.
这篇关于如何拥有照片浏览器页面风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
