Windows Phone 8.1 中的 ScrollViewer 中的图像
Image in a ScrollViewer in Windows Phone 8.1
我有一个 FlipView,它会在用户滑动时显示传单的页面。我希望用户能够放大页面。
到目前为止我发现的是,如果我将 Image 包裹在 ScrollViewer 中并设置 ZoomMode = Enabled , 用户可以缩放。奇怪的是,如果我放大页面的右侧,当我从屏幕上抬起手指后,它会自动回到左侧。知道如何解决这个问题吗?
XAML:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
设置FlipView的宽度和高度:
flipView1.Width = Window.Current.Bounds.Width;
flipView1.Height = Window.Current.Bounds.Height;
尝试这样的事情:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"
MaxWidth="{Binding ElementName=YourPage, Path=DataContext.Width}"
MaxHeight="{Binding ElementName=YourPage, Path=DataContext.Height}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
这里有两个重要的变化:
- 将 ScrollViewer 的 HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 设置为自动
- 将图像的 MaxWidth 和 MaxHeight 绑定到 Window.Current.Bounds.Width 和 Window.Current.Bounds.Height,分别通过作为该特定页面的 DataContext 的 ViewModel 内的 Width 和 Height public 属性公开。这适用于您的 FlipView 占据整个页面的情况。如果您需要 FlipView 在页面上变小,则根据您的尺寸设置 ViewModel 中的 Width 和 Height 属性 expect/need/want.
编辑:
更多信息在我的博客 post Why is my zoomable ScrollViewer snapping the image to the left?
我有一个 FlipView,它会在用户滑动时显示传单的页面。我希望用户能够放大页面。 到目前为止我发现的是,如果我将 Image 包裹在 ScrollViewer 中并设置 ZoomMode = Enabled , 用户可以缩放。奇怪的是,如果我放大页面的右侧,当我从屏幕上抬起手指后,它会自动回到左侧。知道如何解决这个问题吗?
XAML:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
设置FlipView的宽度和高度:
flipView1.Width = Window.Current.Bounds.Width;
flipView1.Height = Window.Current.Bounds.Height;
尝试这样的事情:
<Grid Name="grRoot">
<FlipView x:Name="flipView1"
BorderBrush="Black"
ItemsSource="{Binding}">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="{Binding url_dotcom}"
Stretch="Fill"
Holding="imgHolding"
MaxWidth="{Binding ElementName=YourPage, Path=DataContext.Width}"
MaxHeight="{Binding ElementName=YourPage, Path=DataContext.Height}"/>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
这里有两个重要的变化:
- 将 ScrollViewer 的 HorizontalScrollBarVisibility 和 VerticalScrollBarVisibility 设置为自动
- 将图像的 MaxWidth 和 MaxHeight 绑定到 Window.Current.Bounds.Width 和 Window.Current.Bounds.Height,分别通过作为该特定页面的 DataContext 的 ViewModel 内的 Width 和 Height public 属性公开。这适用于您的 FlipView 占据整个页面的情况。如果您需要 FlipView 在页面上变小,则根据您的尺寸设置 ViewModel 中的 Width 和 Height 属性 expect/need/want.
编辑: 更多信息在我的博客 post Why is my zoomable ScrollViewer snapping the image to the left?