在Windows手机上的滚动查看器中实现图像缩放

发布时间：2020-12-14 01:50:28 所属栏目：Windows 来源：网络整理

导读：我将图像控件放在滚动查看器中,就像tnis一样： ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Image Source="/Test/1.jpg" Width="320" Image.RenderTransform CompositeTransform ScaleX="{Binding Path=Value,El

我将图像控件放在滚动查看器中,就像tnis一样：

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
        <Image Source="/Test/1.jpg" Width="320">
            <Image.RenderTransform>
                <CompositeTransform ScaleX="{Binding Path=Value,ElementName=slider}"/>
            </Image.RenderTransform>
        </Image>
    </ScrollViewer>

正如代码所示,我添加了一个滑块来控制图像的Compositetransform,但是当我改变滑块的值时,什么也没发生？

而且我还尝试在图像上附加缩放和平移行为(取决于工具包),不幸的是,我可以上下滚动,但我无法放大/缩小图像.似乎Scrollviewer阻止了捏合操纵.

我们知道,Scrollviewer控件在WPF中有一个“ZoomMode”属性,但在Windows Phone中已弃用.
那么我怎样才能实现iamge缩放滚动查看器,有人能给我一个帮助吗？

xaml代码：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,12,0">
        <ScrollViewer x:Name="scrl" Height="300" Width="300" BorderBrush="red"
                      BorderThickness="2" VerticalScrollBarVisibility="Disabled">
            <StackPanel>
                <Image x:Name="img" Source="Assets/Mountain.jpg" Height="100" Width="150"
                       RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <CompositeTransform x:Name="trans"/>
                    </Image.RenderTransform>
                    <toolkit:GestureService.GestureListener>
                        <toolkit:GestureListener PinchStarted="GestureListener_PinchStarted" PinchDelta="GestureListener_PinchDelta" DragDelta="GestureListener_DragDelta"/>
                    </toolkit:GestureService.GestureListener>
                </Image>
            </StackPanel>
        </ScrollViewer>
    </Grid>

cs代码：

double _initialAngle,_initialScale;
    public MainPage()
    {
        InitializeComponent();
        scrl.ManipulationMode = ManipulationMode.Control;
    }

    private void GestureListener_PinchStarted(object sender,PinchStartedGestureEventArgs e)
    {
        _initialAngle = trans.Rotation;
        _initialScale = trans.ScaleX;
    }

    private void GestureListener_PinchDelta(object sender,PinchGestureEventArgs e)
    {
        trans.Rotation = _initialAngle + e.TotalAngleDelta;
        var curZoom = _initialScale * e.DistanceRatio;
        if (curZoom >= 1 && curZoom <= 3)
        {
            trans.ScaleX = _initialScale * e.DistanceRatio;
            trans.ScaleY = _initialScale * e.DistanceRatio;
        }
    }

    private void GestureListener_DragDelta(object sender,DragDeltaGestureEventArgs e)
    {
        trans.TranslateX += e.HorizontalChange;
        trans.TranslateY += e.VerticalChange;
    }

此代码适用于缩放,旋转和缩放.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!