用ImageBrush背景縮放畫布

當我想用背景縮放Canvas時，它不能按我想要的方式工作。背景是相同的，只有Canvas的內容在縮放。但是，如果我將Canvas更改爲InkCanvas，它可以很好地工作，但由於InkCanvas不支持MouseLeftButtonDown事件，因此我必須使用Canvas。用ImageBrush背景縮放畫布

這是我的代碼

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible"> 
     <Canvas x:Name="CanvasChart" MouseMove="CanvasChart_MouseMove" MouseLeave="CanvasChart_MouseLeave" 
        Grid.Column="1" Margin="20 20 20 20"> 
      <Canvas.Background > 
       <ImageBrush Stretch="UniformToFill" ImageSource="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png"></ImageBrush> 
      </Canvas.Background> 
      <Canvas.LayoutTransform> 
       <ScaleTransform 
           ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
           ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/> 
      </Canvas.LayoutTransform> 
     </Canvas> 
    </ScrollViewer>

來源

2012-02-14 Malv20

首先，你必須禁用自動拉伸背景圖像刷上看到任何縮放效果：

<ImageBrush Stretch="None" ... />

但需要注意的是刷不參與佈局計算。如果您打算通過縮放轉換來調整ScrollViewer的內容大小，則應考慮以下解決方案，其中網格始終至少具有圖像的大小。

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> 
    <Grid Margin="20 20 20 20"> 
     <Grid.LayoutTransform> 
      <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
          ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/> 
     </Grid.LayoutTransform> 
     <Image Source="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png" 
       Stretch="None"/> 
     <Canvas x:Name="CanvasChart"/> 
    </Grid> 
</ScrollViewer>

作爲以類似的方式工作，與InkCanvas你可以爲畫布設置一個固定大小的一種替代方案：

<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> 
    <Canvas x:Name="CanvasChart" Margin="20 20 20 20" 
      Width="500" Height="400"> 
     <Canvas.Background > 
      <ImageBrush Stretch="UniformToFill" ImageSource="D:\Praca\JanarMapy\JanarMapy\Maps\Montenegro_Map.png"/> 
     </Canvas.Background> 
     <Canvas.LayoutTransform> 
      <ScaleTransform ScaleX="{Binding Path=Value, ElementName=zoomSlider}" 
          ScaleY="{Binding Path=Value, ElementName=zoomSlider}"/> 
     </Canvas.LayoutTransform> 
    </Canvas> 
</ScrollViewer>

來源

2012-02-14 08:37:12 Clemens

感謝這個重播。我的主要目標是：首先將圖像作爲背景加載並將其調整到我的區域（畫布）InkCanvas可以使用此效果（使用）。第二個選項可放大此區域（背景和內容）。我發佈的代碼以InkCanvas的方式工作。我更喜歡使用Canvas，它的工作方式有點不同，因爲它不縮放圖像，而只是Canvas的內容。 – Malv20 2012-02-14 10:05:18

請參閱編輯答案的替代方案。我認爲你的初始方法使用InkCanvas的原因是它（而不是Canvas）具有預定義的初始大小，ImageBrush將縮放到該大小。 – Clemens 2012-02-14 10:42:33

它也不適用於預定義的初始大小，或者我可能做出某些事情。錯誤。你試過了嗎？ – Malv20 2012-02-14 11:23:44

用ImageBrush背景縮放畫布

回答

相關問題