0

我有一个使用 ScrollViewer 实现的图像查看器

.XAML

                <ScrollViewer Name="viewImg" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
                <Image  Name="bigImage" 
               Source="/JoyOs.Media;component/img/Plugins/Photos/PHOTO.png"
                    PreviewMouseLeftButtonUp="ImageMouseLeftButtonUp" 
                    PreviewMouseLeftButtonDown="ImageMouseLeftButtonDown" 
                    PreviewMouseMove="ImageMouseMove" Stretch="Uniform"></Image>
            </ScrollViewer>

ScrollViewer 类 .cs 文件

public partial class ImageList
{
    private void ImageMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        var img = (Image)sender;
        img.ReleaseMouseCapture();
    }

    private void ImageMouseMove(object sender, MouseEventArgs e)
    {
        var img = (Image)sender;
        if (!img.IsMouseCaptured) return;
        Vector v = _startImgMove - e.GetPosition(viewImg);
        viewImg.ScrollToHorizontalOffset(_originImgMove.X - v.X);
        viewImg.ScrollToVerticalOffset(_originImgMove.Y - v.Y);
    }

    private void ImageMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var img = (Image)sender;
        img.CaptureMouse();
        _startImgMove = e.GetPosition(viewImg);
        _originImgMove = new Point(viewImg.HorizontalOffset, viewImg.VerticalOffset);
    }
}

我希望在其中实现缩放功能。因此我尝试使用thisZoomBorder.cs中的类。

怎么ZoomBorder.cs用ScrollViewer？

我试过没有ScrollViewer这样的ZoomBorder.cs。

         <local:ZoomBorder x:Name="border" ClipToBounds="True" Background="Gray">
                <Image  Name="bigImage" 
               Source="/JoyOs.Media;component/img/Plugins/Photos/PHOTO.png"
                    PreviewMouseLeftButtonUp="ImageMouseLeftButtonUp" 
                    PreviewMouseLeftButtonDown="ImageMouseLeftButtonDown" 
                    PreviewMouseMove="ImageMouseMove" Stretch="Uniform"></Image>
          </local:ZoomBorder>
4

2 回答 2

0

我无法回答问题ZoomBorder's，但我自己以不同的方式实现了缩放功能。我有一个ViewBox，我将其绑定ScaleTransform到我的ViewModel. 更改 my ViewModelthen 中的值会导致 的内容ViewBox根据值放大和缩小。

<Viewbox x:Name="vwbxZoom" Stretch="None">
    <Viewbox.LayoutTransform>
        <ScaleTransform ScaleX="{Binding ZoomLevel.Value}"
                        ScaleY="{Binding ZoomLevel.Value}" />
    </Viewbox.LayoutTransform>
</ViewBox>
于 2017-06-14T06:05:53.597 回答
0

这是一个简单的例子。您可以使用任何控件作为 Viewbox 的内容

<DockPanel>
    <Slider x:Name="ZoomSlider" DockPanel.Dock="Bottom" Minimum="0.05" Maximum="2">        
    </Slider>
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Border Width="2000" Height="2000">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                        <GradientStop Color="Red" Offset="0.33"/>
                        <GradientStop Color="Green" Offset="0.66"/>
                        <GradientStop Color="Blue" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Viewbox.LayoutTransform>
                <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider, Path=Value}" ScaleY="{Binding ElementName=ZoomSlider, Path=Value}"/>
            </Viewbox.LayoutTransform>
        </Viewbox>
    </ScrollViewer>
</DockPanel>
于 2017-06-14T07:08:29.113 回答