缩放&在FlipView控件中平移?Windows Phone 8.1 XAML Winrt应用

本文关键字：Phone Windows XAML 应用 Winrt FlipView 控件 缩放 | 更新日期: 2023-09-27 18:04:39

我正在尝试使用flipview创建一个照片查看器，需要具有缩放功能。

我正在使用滚动查看器来启用缩放功能，这是我的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>

在我的代码后面，我改变图像的大小为滚动查看器。视口高度和宽度分别

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_sizechange处理程序只处理第一张图像，而flipview中的其余图像保持大。

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

请帮忙!我已经看到了很多资源/stackoverflow问题，但是没有任何帮助，因为很多问题都与Silverlight或以前版本的windows phone有关。

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

缩放&在FlipView控件中平移?Windows Phone 8.1 XAML Winrt应用

你的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，并将其属性绑定到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时，您需要将其添加到页面中。这很容易，创建一个公共类，并在一个方法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_sizechange方法中，您将为图像设置所需的大小。

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}"/>

我在我的应用程序中使用了这个，希望这将为您工作

相关文章：