我不知道我的命名是否正确,但我有一个显示一排图片的应用程序。如果用户向左滑动,则全屏显示上一张图片,如果向右滑动,则全屏显示下一张图片,两者的 Action 与在照片应用程序或 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,而是将图像放入其中并将源绑定(bind)到您的 ImageSource。注意列表框下方的矩形。我将所有触摸代码放在那里,因为当我使用缩放图像时,我的坐标系正在改变。使用矩形覆盖可以让我拥有所有触摸的标准屏幕坐标。您可能不需要这个。
<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"/>
好的,另一个关键部分。确保将其放入页面的构造函数中。这使您可以动画化滚动查看器偏移变化。
Storyboard.SetTargetProperty(ScrollStoryboard.Children[0], new PropertyPath(ScrollViewerEx.HOffsetProperty));
Storyboard.SetTargetProperty(ScrollStoryboard.Children[1], new PropertyPath(ScrollViewerEx.VOffsetProperty));
获取对列表框中滚动查看器的永久引用:
private void listBox_Loaded_1(object sender, RoutedEventArgs e)
{
scrollviewer = GetVisualChild<ScrollViewer>(listBox);
}
最后,处理操作事件。列表框滚动动画的关键是操作完成事件。我没有使用垂直偏移,仅使用水平偏移。变量 vm.Position 是沿scrollviewer.horizontaloffset计算的位置。基本上,如果您在第五张图像上,请将屏幕宽度乘以四以获得水平偏移。
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 虚拟化之外还包括数据虚拟化。那和缩放。它尚未完全准备好发布,但这将帮助您开始。
关于c# - 如何拥有照片查看器风格的页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17374732/