Question

如何在点击后放大C＃中的图像（完全在UWP中）？我尝试了几件事：

1）我试图添加按钮，图像内容，我要放大的内容，然后我添加了事件点击。但我不知道应该在该代码中加入什么。

2）我还尝试将图片直接添加到我的XAML页面，我想创建Tapped事件，但同样，我不知道应该在该代码中添加什么。

我只是想创建一个小型的照相馆，所以点击图片缩略图后会打开更大的图片。

或者如果有可能添加pdf文件，您也可以编写它。这是我问题的另一个解决方案。

Answer 1

您可以通过将其RenderTransform属性设置为ScaleTransform：

来放大图像

 private void Image_Tapped(object sender, TappedRoutedEventArgs e)
 {
     Image image = sender as Image;
     image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
 }

<Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />

ScaleX和ScaleY属性获取或设置缩放系数。有关更多信息，请参阅MSDN文档：https://msdn.microsoft.com/library/windows/apps/br242940?f=255&MSPPError=-2147217396

看起来不错，但有问题。当我添加更多图像时，如GridView，它们重叠并突出显示。图像可以重叠，但我点击的图像应始终位于顶部...

您可以将点击的图像放入弹出窗口，然后再将其添加回原始面板。我整理了一个例子，它可以给你一些想法和建立的东西：

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    Image image = sender as Image;

    Panel parent = image.Parent as Panel;
    if (parent != null)
    {
        image.RenderTransform = new ScaleTransform() { ScaleX = 2, ScaleY = 2 };
        parent.Children.Remove(image);
        parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag = parent });
    }
    else
    {
        Popup popup = image.Parent as Popup;
        popup.Child = null;
        Panel panel = popup.Tag as Panel;
        image.RenderTransform = null;
        panel.Children.Add(image);
    }
}

<GridView SelectionMode="None" isItemClickEnabled="True">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="ms-appx:///Assets/pic.png" Tapped="Image_Tapped" Stretch="None" />
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

单击C＃UWP后放大图像

1 个答案: