Windows phone 8应用程序使用画布对数据模板进行图像缩放

本文关键字：数据 缩放 图像 phone 应用程序 Windows | 更新日期: 2023-09-27 18:24:59

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;
}

Windows phone 8应用程序使用画布对数据模板进行图像缩放

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

<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>

为了进一步参考，这里有一个很棒的官方样本

您可以通过将比例限制在最小大小来防止将图像捏得太小。

// 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;
    }
}
相关文章：