0

image内部にaがborderあり、画像ソースのさまざまな部分をさまざまな時間に画像ボックスに表示したいと思います。具体的には、特定のテキストボックスにフォーカスが移ったときに、画像コンテンツの特定の部分にズームするように画像を変更したいと思います。

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>

たとえば、私の画像ソースは2550x3320ピクセルです。ボックスに、ポイント1755,300から始まり、幅650、高さ230の長方形でソースを表示したいimageと思います。手動ズームセットもあるため、CloneBitmapを使用してその長方形を切り取って表示したくありません。これimageは、ユーザーがマウスホイールを使用してズームインおよびズームアウトし、クリック＆ドラッグして画像をパンできる場所です。希望の領域にズームした後でも、それを許可したいと思います。

更新： 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);
      }
}
4

1 に答える 1

0

ScrollViewer を使用して Image をラップすることができます...次に、ScrollToVerticalOffset()andScrollToHorizontalOffset()メソッドを呼び出すことにより、ScrollViewer に垂直方向および水平方向のオフセットに移動するように指示できます (設定できるプロパティがないため)。

<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 への呼び出しを行う添付プロパティを定義することです。

于 2012-09-08T15:13:37.597 に答える