我正在尝试使用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)应用程序。
你的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}"/>
我在我的应用程序中使用了这个,希望这将为您工作