ScrollViewer與網格有規模變換

Question

所以我有一個網格>畫布>圖像，我已經放置在滾動查看器。

我已將RenderTransform> ScaleTransform放置到網格中，並使用它上面的mousewheel事件來對其進行縮放。

當我使用它時，它放大和縮小，但scrollviewer保持它的初始設置，在我看來，當我縮放（我不想改變它）時，實際的寬度和高度不會改變。

我想要的想法是縮放scrollviewer範圍以及與縮放寬度和縮放高度相關的網格相同的百分比。

我在MSDN中查看ScrollViewer類，無法找到滾動查看器範圍的保存位置。我在看着ScrollableHeight和ScrollableWidth的ExtentHeight和ExtentWidth，但我在黑暗中摸索着。

如何以編程方式獲取scrollViewer水平和垂直條的像素/數值範圍？我怎樣才能改變它們？我想在網格的mousewheel事件上做到這一點。

ViewportWidth，ExtentWidth，ScrollableWidth，Width？之間的實際區別是什麼？

XAML：

<ScrollViewer Grid.Row="0" Grid.Column="1" Name="sourcePicScroll" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" Height="Auto" Width="Auto"> 
     <Grid Name="sourceGrid" Background="Gray" MouseWheel="sourceGrid_MouseWheel"> 
      <Grid.RenderTransform> 
       <ScaleTransform x:Name="sourceGridScaleTransform"/> 
      </Grid.RenderTransform> 
      <Canvas Name="sourceCanvas" Width="0" Height="0" Background="White" MouseMove="sourceCanvas_MouseMove" PreviewMouseLeftButtonDown="sourceCanvas_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="sourceCanvas_PreviewMouseLeftButtonUp" HorizontalAlignment="Left" VerticalAlignment="Top" MouseWheel="sourceCanvas_MouseWheel"> 
       <Canvas.RenderTransform> 
        <ScaleTransform x:Name="sourceScaleTransform"/> 
       </Canvas.RenderTransform> 
       <Image Name="sourcePic" HorizontalAlignment="Left" VerticalAlignment="Top" Panel.ZIndex="1" Stretch="None"></Image> 
       <Rectangle Name="sourceSelectionBox" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="50"/> 
       <Ellipse Name="sourceSelectionEllipse" Visibility="Collapsed" Stroke="Black" StrokeThickness="1" Panel.ZIndex="51"/> 
      </Canvas> 
     </Grid> 
    </ScrollViewer> 

C＃代碼：

double ScaleRate = 1.1; 
     if (e.Delta > 0) 
     { 
      sourceGridScaleTransform.ScaleX *= ScaleRate; 
      sourceGridScaleTransform.ScaleY *= ScaleRate; 
     } 
     else 
     { 
      sourceGridScaleTransform.ScaleX /= ScaleRate; 
      sourceGridScaleTransform.ScaleY /= ScaleRate; 
     } 

Answer 1

兩個問題

1. 渲染變換僅適用於不影響佈局，因此滾動瀏覽器並不反映渲染相同
2. 帆布沒有尺寸，de故障爲0，因此應用轉換不會影響畫布大小，除非在畫布上指定大小。

因爲您沒有在兒童上使用任何畫布屬性，所以除非需要，否則您可以安全地移除它們。

，所以你可以試試這個樣本

<ScrollViewer Grid.Row="0" 
       Grid.Column="1" 
       Name="sourcePicScroll" 
       VerticalScrollBarVisibility="Visible" 
       HorizontalScrollBarVisibility="Visible" 
       Height="Auto" 
       Width="Auto"> 
    <Grid Name="sourceGrid" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Top" 
      Background="Gray" 
      MouseWheel="sourceGrid_MouseWheel"> 
     <Grid.LayoutTransform> 
      <ScaleTransform x:Name="sourceGridScaleTransform" /> 
     </Grid.LayoutTransform> 
     <Image Name="sourcePic" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Panel.ZIndex="1" 
       Source="pr.png" 
       Stretch="None"></Image> 
     <Rectangle Name="sourceSelectionBox" 
        Visibility="Collapsed" 
        Stroke="Black" 
        StrokeThickness="1" 
        Panel.ZIndex="50" /> 
     <Ellipse Name="sourceSelectionEllipse" 
       Visibility="Collapsed" 
       Stroke="Black" 
       StrokeThickness="1" 
       Panel.ZIndex="51" /> 
    </Grid> 
</ScrollViewer> 

變化

• 的RenderTransform到LayoutTransform

• 添加的Horizo​​ntalAlignment = 「左」 & VerticalAlignment = 「評出的」 網格

• 刪除內部畫布

試試看看這是你在找什麼，注意鼠標滾輪只能在內部網格上工作。

這裏是修改樣本，如果你需要滾動到上充分滾動瀏覽器，而不是工作ScaleTransform的

<Grid> 
    <ScrollViewer Grid.Row="0" 
        Grid.Column="1" 
        Name="sourcePicScroll" 
        VerticalScrollBarVisibility="Visible" 
        HorizontalScrollBarVisibility="Visible" 
        Height="Auto" 
        Width="Auto"> 
     <Grid Name="sourceGrid" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Background="Gray"> 
      <Grid.LayoutTransform> 
       <ScaleTransform x:Name="sourceGridScaleTransform" /> 
      </Grid.LayoutTransform> 
      <Image Name="sourcePic" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Panel.ZIndex="1" 
        Source="pr.png" 
        Stretch="None"></Image> 
      <Rectangle Name="sourceSelectionBox" 
         Visibility="Collapsed" 
         Stroke="Black" 
         StrokeThickness="1" 
         Panel.ZIndex="50" /> 
      <Ellipse Name="sourceSelectionEllipse" 
        Visibility="Collapsed" 
        Stroke="Black" 
        StrokeThickness="1" 
        Panel.ZIndex="51" /> 

     </Grid> 
    </ScrollViewer> 
    <Grid MouseWheel="sourceGrid_MouseWheel" 
      Background="Transparent"></Grid> 
</Grid>