縮放和移動帶有代碼的圖像

Question

我在border的內部有image，我想在不同的時間在圖像框中顯示圖像源的不同部分。具體而言，當某個文本框獲得焦點時，我想更改圖像，以便縮放到圖像內容的某個部分。

這裏的XAML：

<Border BorderBrush="Silver" BorderThickness="1" Grid.Column="5" Height="504" 
    HorizontalAlignment="Left" Margin="20,116,0,0" Name="border1" 
    VerticalAlignment="Top" Width="410" ClipToBounds="True"> 
    <Image Height="493" Name="image5" Stretch="Fill" Width="390" 
     ClipToBounds="True" BindingGroup="{Binding}" 
     Clip="{Binding ElementName=border1}" 
     Cursor="Hand" StretchDirection="Both" /> 
</Border> 

有關示例，我的圖像源是2550 X 3320像素。我想image框顯示源矩形開始點1755,300寬度爲650，高度爲230.我不希望使用CloneBitmap剪切該矩形並顯示它，因爲我也有一個手動縮放爲此設置image，用戶可以使用鼠標滾輪放大和縮小，然後點擊&拖動以平移圖像。在我們縮放到所需區域後，我仍然希望允許這樣做。

UPDATE： 我已經試過落實colinsmith的回答，但每當我改變ScrollViewer中的偏移量，它砍下圖像，所以如果我以後移動（單擊並拖動以平移），它是空的空間。我以前的工作只是在scrollviewer中的圖像，但現在我有一個圖像在一個邊框內的scrollviewer內。我的縮放和平移是我現在設置的邊框所必需的。

我的更新XAML：

<Border BorderBrush="Silver" BorderThickness="1" Grid.Column="5" Height="504" 
    HorizontalAlignment="Left" Margin="20,116,0,0" Name="border1" 
    VerticalAlignment="Top" Width="410" ClipToBounds="True"> 

    <ScrollViewer x:Name="image5scroll" VerticalScrollBarVisibility="Hidden" 
     HorizontalScrollBarVisibility="Hidden"> 
     <Image Height="493" Name="image5" Stretch="Fill" Width="390" 
     ClipToBounds="True" BindingGroup="{Binding}" 
     Clip="{Binding ElementName=image5scroll}" Cursor="Hand" 
     StretchDirection="Both" /> 
    </ScrollViewer> 
</Border> 

而後面的代碼：

public void imageZoom(Element element, int index) 
{ 
    if (element.Rectangle.Left - 100 > 0) 
    { 
     image5scroll.ScrollToHorizontalOffset(element.Rectangle.Left - 100); 
     image5scroll.Width = element.Rectangle.Width + 200; 
     image5scroll.Height = element.Rectangle.Height + 200; 
     border1.Width = image5scroll.Width; 
     border1.Height = image5scroll.Height; 
     image5.Width = image5scroll.Width; 
     image5.Height = image5scroll.Height; 
     image5.Stretch = System.Windows.Media.Stretch.None; 
    } 
    else 
    { 
     image5scroll.ScrollToHorizontalOffset(0); 
    } 

    if (element.Rectangle.Top - 100 > 0) 
    { 
     image5scroll.ScrollToVerticalOffset(element.Rectangle.Top - 100); 
    } 
    else 
     { 
     image5scroll.ScrollToVerticalOffset(0); 
     } 
} 

Answer 1

可以使用的ScrollViewer來包裝你的形象......那麼你可以告訴ScrollViewer中去一縱通過調用ScrollToVerticalOffset()和ScrollToHorizontalOffset()方法進行水平偏移（因爲沒有可以設置的屬性）。

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid> 
     <Border BorderBrush="Silver" BorderThickness="1" Grid.Column="5" Height="504" 
     HorizontalAlignment="Left" Margin="20,116,0,0" Name="border1" VerticalAlignment="Top" Width="410"> 
     <ScrollViewer x:Name="image5scroll" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden"> 
      <Image Height="493" Name="image5" Stretch="None" Width="390" BindingGroup="{Binding}" 
      Cursor="Hand" Source="http://www.noaanews.noaa.gov/stories/images/goes-12-firstimage-large081701.jpg"/> 
     </ScrollViewer> 
     </Border> 
    </Grid> 
</Page> 

不過，如果你一定要能夠設置使用屬性的ScrollViewer中的位置，而不是代碼隱藏那麼一個解決方案是下面定義到ScrollToVerticalOffset/ScrollToHorizo​​ntalOffset附加屬性，其確實在呼籲你。

• http://marlongrech.wordpress.com/2009/09/14/how-to-set-wpf-scrollviewer-verticaloffset-and-horizontal-offset/