如何在滾動查看器中放置圖像周圍的“邊框”

Question

我正在創建一個Windows應用商店應用，並且在頁面上我在ScrollViewer內放置了一張大圖像，以使用戶能夠使用觸摸手勢來平移和縮放圖像。 到目前為止，一切都很好，除了一件事。 我想調整它，以便有一個“緩沖”搖攝，使用戶可以“overpan”的范圍內， 在圖像的最一半是關閉屏幕，無論ZoomFactor的-或有多少用戶已經放大進出。

我的問題是，我將如何實施呢？ 一個人建議用透明的uielements填充圖像的頂部，左側，底部和右側，但我認為插入靜態尺寸的uielements不能達到“屏幕上最多圖像的一半”的要求。

有任何想法嗎？ 提前謝謝你的幫助。

編輯：每個請求添加代碼

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