Windows Phone 8应用程序使用画布在数据模板中进行图像放大/缩放

Question

Windows Phone 8应用程序，我在数据模板内的数据透视控件中使用图像，然后使用捏/缩放图像，但是我的问题是，如果我将图像缩小到最小，则无法缩放图像。如何在数据模板中使用画布。

---

我的XAML

<phone:Pivot x:Name="pivot" ItemsSource="{Binding}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    <phone:Pivot.HeaderTemplate>
        <DataTemplate>
            <TextBlock  Name="title" FontWeight="ExtraBold" Text="{Binding _textview}"  HorizontalAlignment="Center" FontSize="30" Foreground="Orange"></TextBlock>
        </DataTemplate>
    </phone:Pivot.HeaderTemplate>
    <phone:Pivot.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image  Margin="0,-30,0,80"  Name="img" Stretch="Fill"  Source="{Binding _images}"  RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
                    <Image.RenderTransform>
                        <CompositeTransform x:Name="transform" />
                    </Image.RenderTransform>
                    <toolkit:GestureService.GestureListener>
                        <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" DoubleTap="GestureListener_DoubleTap" DragDelta="GestureListener_DragDelta"  />
                    </toolkit:GestureService.GestureListener>
                </Image>
            </Grid>
        </DataTemplate>
    </phone:Pivot.ItemTemplate>
</phone:Pivot>

---

我的CS

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    var image = sender as Image;
    var transform = image.RenderTransform as CompositeTransform;
    angle = transform.Rotation;
    scale = transform.ScaleX;
}

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    var image = sender as Image;
    var transform = image.RenderTransform as CompositeTransform;
    transform.Rotation = angle + e.TotalAngleDelta;
    transform.ScaleX = scale * e.DistanceRatio;
    transform.ScaleY = scale * e.DistanceRatio;
}

private void GestureListener_DoubleTap(object sender, GestureEventArgs e)
{
    var image = sender as Image;
    var transform = image.RenderTransform as CompositeTransform;
    transform.ScaleX = transform.ScaleY = 1;
}

private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
    var image = sender as Image;
    var transform = image.RenderTransform as CompositeTransform;
    transform.TranslateX += e.HorizontalChange;
    transform.TranslateY += e.VerticalChange;
}

Answer 1

当您需要在画布上显示图像时，

<Canvas>
    <Image  Margin="0,-30,0,80"  Name="img" Stretch="Fill"  Source="{Binding _images}"  RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
        <Image.RenderTransform>
            <CompositeTransform x:Name="transform" />
        </Image.RenderTransform>
    </Image>
</Canvas>

进一步的参考，这是一个很好的官方样本

Answer 2

通过将缩放比例限制为最小尺寸，可以防止图像缩小。

// Don't shrink the image to less than 1/4 normal size.
const double minScaleX = 0.25;
const double minScaleY = 0.25;

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    var image = sender as Image;
    var transform = image.RenderTransform as CompositeTransform;
    transform.Rotation = angle + e.TotalAngleDelta;
    transform.ScaleX = scale * e.DistanceRatio;
    transform.ScaleY = scale * e.DistanceRatio;

    if (transform.ScaleX < minScaleX) 
    {
        transform.ScaleX = minScaleX;
    }
    if (transform.ScaleY < minScaleY) 
    {
        transform.ScaleY = minScaleY;
    }
}