Question

我正在创建一个Windows应用商店应用，在页面上我有一个放置在ScrollViewer中的大图像，使用户能够使用触摸手势在图像中平移和缩放。到目前为止，除了一件事，这么好。我想调整它以便有一个用于平移的“缓冲区”，这样用户就可以“超出”到图像的最多一半离开屏幕的程度，无论ZoomFactor是什么 - 或用户放大或缩小的程度。

我的问题是，我将如何实施？一个人建议用透明的元素填充图像的上，左，下，右，但我不认为静态大小的插入的元素将能够实现“屏幕上最多一半的图像”要求。 / p>

有什么想法吗？感谢您的帮助。

编辑：每个请求添加了代码

<Grid x:Name="LayoutRoot" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer x:Name="ImageViewer" Background="White" ZoomMode="Enabled" 
                  IsVerticalRailEnabled="False" IsHorizontalRailEnabled="False" 
                  VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled" 
                  VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" 
                  MinZoomFactor=".22" MaxZoomFactor="2"
                  VerticalContentAlignment="Center" HorizontalContentAlignment="Center">
            <Image x:Name="map" Source="map.png" ImageOpened="map_Loaded_1"/>

    </ScrollViewer>
</Grid>

这是事件背后的代码

    const float _defaultZoomFactor = 0.23F;
    private void map_Loaded_1(object sender, RoutedEventArgs e)
    {
        ImageViewer.ZoomToFactor(_defaultZoomFactor);
    }

Answer 1

您可以为图片UI元素添加动态页边距，该元素是根据Loaded事件的图片大小计算出来的，该图片大小与ImageOpened不同。

Xaml方：

<Image x:Name="map" Source="map.png" ImageOpened="map_Loaded_1" Loaded="OnImageElementLoaded"/>

代码方（样机）：

private void OnImageUILoaded( object sender , RoutedEventArgs e)
{
  //Get image size
  //Calculate margin size
  //Set (Image)sender's new margin
}

如何在滚动查看器中放置图像周围的“边框”

1 个答案: