c# - 使用 FlipView 进行缩放的简单相册

Question

我正在尝试使用 Flip View 创建一个简单的相册(Windows 应用商店应用程序)。

我将 Image 元素嵌入到 ScrollViewer 中。我可以浏览照片，但我想做以下事情。

• 图像应均匀填充屏幕高度 [当图像未缩放时]。我得到了几个项目的垂直滚动条。当所有图像的高度都相同时，我不会遇到这个问题。
• 当我改变屏幕方向时，图像的一部分在右侧被剪裁掉了。
• 当我在页面之间移动时，滚动查看器应该忘记缩放级别(将缩放因子重置为 1)。

这是我现在拥有的代码。我究竟做错了什么？我应该在我的 EventHandler 中添加什么来重置我的 ScrollViewer 的缩放系数。

<FlipView 
    Name="MainFlipView"
    Margin="0"
    Height="{Binding ActualHeight, ElementName=pageRoot, Mode=OneWay}"
    Width="{Binding ActualWidth, ElementName=pageRoot, Mode=OneWay}"
    Background="Black">
         <FlipView.ItemTemplate>
              <DataTemplate>
                  <ScrollViewer Name="myScrollViewer" ZoomMode="Enabled"
                                Height="{Binding ActualHeight, ElementName=pageRoot, Mode=OneWay}"
                                Width="{Binding ActualWidth, ElementName=pageRoot, Mode=OneWay}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                HorizontalScrollBarVisibility="Auto"
                                VerticalScrollBarVisibility="Auto"
                                MinZoomFactor="0.5"
                                MaxZoomFactor="2.5"
                                Margin="0" >
                       <Image Source="{Binding Path=Image}"
                              Name="MainImage" Stretch="Uniform" />
                  </ScrollViewer>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

Answer 1

什么 user2199147说应该解决你的第一个要点，另外两个我必须以编程方式修复，但应该注意的是我还必须使用你必须导入的 VisualTreeHelper 类和扩展方法帮助我使用助手类。

首先，我必须使用 VisualTreeHelper 扩展中的一个方法，它可以找到 FlipView 中任何类型的第一个元素:

private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
    if (parentElement != null)
    {
        var count = VisualTreeHelper.GetChildrenCount(parentElement);
        if (count == 0)
            return null;

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(parentElement, i);

            if (child != null && child is T)
                return (T)child;
            else
            {
                var result = FindFirstElementInVisualTree<T>(child);
                if (result != null)
                {
                    return result;
                }
            }
        }
    }
    return null;
}

为了进入纵向模式，我为 WindowSizeChanged 添加了一个回调处理程序，并简单地重置翻转 View 中的所有 ScrollViewer默认值

private void WindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
    //Reset scroll view size
    int count = MainFlipView.Items.Count;
    for(int i = 0; i < count; i++)
    {
        var flipViewItem = MainFlipView.ItemContainerGenerator.ContainerFromIndex((i));
        var scrollViewItem = FindFirstElementInVisualTree<ScrollViewer>(flipViewItem);
        if (scrollViewItem is ScrollViewer)
        {
            ScrollViewer scroll = (ScrollViewer)scrollViewItem;
            scroll.Height = e.Size.Height; //Reset width and height to match the new size
            scroll.Width = e.Size.Width;
            scroll.ZoomToFactor(1.0f);//Zoom to default factor
        }
    }
}

然后在您的构造函数中，您需要 Window.Current.SizeChanged += WindowSizeChanged; 以便调用回调。

现在，为了将每个 ScrollViewer 设置回它们的默认位置，我们执行类似的过程，仅当 FlipView 选择更改时，我们将 ScrollViewer 重置为其默认缩放系数

private void FlipViewSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (sender is FlipView)
    {
        FlipView item = (FlipView)sender;
        var flipViewItem = ((FlipView)sender).ItemContainerGenerator.ContainerFromIndex(((FlipView)sender).SelectedIndex);
        var scrollViewItem = FindFirstElementInVisualTree<ScrollViewer>(flipViewItem);
        if (scrollViewItem is ScrollViewer)
        {
            ScrollViewer scroll = (ScrollViewer)scrollViewItem;
            scroll.ScrollToHorizontalOffset(0);
            scroll.ScrollToVerticalOffset(0);
            scroll.ZoomToFactor(1.0f);
        }
    }
}

同样，我们必须在构造函数中进行调用，看起来像 MainFlipView.SelectionChanged += FlipViewSelectionChanged;

我知道这些方法看起来真的很老套和迂回，因为它们确实如此，但这对我有用，我希望这对您有所帮助。