c# - 在 FlipView 控件中捏合缩放和平移？ Windows Phone 8.1 XAML Winrt 应用程序

Question

我正在尝试使用需要具有缩放功能的翻转 View 创建照片查看器。

我正在使用滚动查看器启用缩放功能，这是我的 XAML。

<FlipView x:Name="FlipView1">
    <FlipView.ItemTemplate>
         <DataTemplate>
             <ScrollViewer HorizontalScrollBarVisibility="Visible"
                           VerticalScrollBarVisibility="Visible"
                           VerticalAlignment="Stretch" 
                           HorizontalAlignment="Stretch" 
                           ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="3"
                           ViewChanged="ScrollViewer_ViewChanged"
                           SizeChanged="ScrollViewer_SizeChanged">
                           <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Image}" Stretch="Uniform" />
                            </StackPanel>
             </ScrollViewer>
         </DataTemplate>
     </FlipView.ItemTemplate>
</FlipView>

在我的代码隐藏中，我将图像大小分别更改为 scrollviewer.viewport 的高度和宽度。

private void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ScrollViewer x = sender as ScrollViewer;
            Image img = FindFirstElementInVisualTree<Image>(FlipView1);
            img.Height = x.ViewportHeight;
            img.Width = x.ViewportWidth;
        }

我遇到的问题是:

1) 当图像尺寸较大时，图像不会调整大小以适应均匀并溢出控件/屏幕区域。 Scrollviewer_sizeChanged 处理程序只处理第一张图像，而 flipview 中的其余图像保持大。

2) 当我们捏放大时，黑色/未使用的区域即。没有图像的空白区域也会被放大，滚动区域不仅限于图像。我应该怎么做，因为这真的会破坏体验。

求助!我已经看过很多资源/stackoverflow 问题，但没有任何帮助，因为其中很多都与 Silverlight 或以前版本的 Windows Phone 有关。

请注意，我们正在为 Windows Phone 8.1 XAML (WINRT) 应用程序开发。

Answer 1

您的 xaml 代码应如下所示:

<Page x:Name="page">

    <FlipView x:Name="ImageBrowser" 
              ItemsSource="{Binding Images}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                    <ScrollViewer
                              ZoomMode="Enabled" 
                              MinZoomFactor="1"
                              MaxZoomFactor="4"
                              HorizontalScrollBarVisibility="Auto"
                              VerticalScrollBarVisibility="Auto" 
                              VerticalScrollMode="Auto">

                        <Image Source="{Binding source}" 
                           MaxWidth="{Binding DataContext.OptimalWidth, ElementName=page}"
                           MaxHeight="{Binding DataContext.OptimalHeight, ElementName=page}"/>

                    </ScrollViewer>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>
</Page>

您需要为此创建自己的 ViewModel 并将其属性绑定(bind)到 FlipView 数据模板中的 Image

这是我的 ViewModel 的示例:

public class BrowserViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private double optimalWidth;
    private double optimalHeight;

    public double OptimalWidth
    {
        get { return this.optimalWidth;}
        set
        {
            if (this.optimalWidth != value)
            {
                this.optimalWidth = value;
                NotifyPropertyChanged("OptimalWidth");
            }
        }
    }

    public double OptimalHeight
    {
        get { return this.optimalHeight; }
        set
        {
            if (this.optimalHeight != value)
            {
                this.optimalHeight = value;
                NotifyPropertyChanged("OptimalHeight");
            }
        }
    }

    protected void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (this.PropertyChanged != null)
        {
           PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

当您的 ViewModel 准备就绪后，您需要将它添加到您的页面。这很容易，创建公共(public)类并在方法 OnNavigatedTo 中分配它。这是一个例子:

public BrowserViewModel ViewModel { get; set; }
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        ViewModel = new BrowserViewModel();//creating new instance
        DataContext = ViewModel;//setting view model as data context - later used in binding
    }

现在在 Page_SizeChanged 方法中，您将为图像设置所需的大小。

private void page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ViewModel.OptimalWidth = e.NewSize.Width; //new width of the page
    ViewModel.OptimalHeight = e.NewSize.Height; //new height of the page
}

现在回头看看 xaml，请注意图像采用了我创建的 ViewModel 的最大宽度和高度。

<Image Source="{Binding source}" 
    MaxWidth="{Binding DataContext.OptimalWidth, ElementName=page}"
    MaxHeight="{Binding DataContext.OptimalHeight, ElementName=page}"/>

我在我的应用程序中使用了它，希望它对你有用。