点击C# UWP后放大图片答案

【问题标题】：Enlarge image after click C# UWP点击C# UWP后放大图片
【发布时间】：2017-05-03 00:33:12
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： c# image pdf uwp

【解决方案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>

【讨论】：

看起来不错，但是有问题。当我添加更多图像时，例如添加到 GridView 中，它们会重叠并突出显示。像这样：link你也有解决这个问题的办法吗？
如果您放大图片并且在 GridView 中放大的图片和下一张图片之间没有足够的空间，您如何期望它们不重叠？
我的意思是，我点击的图片会在顶部。图片可以重叠，但我点击的图片应该始终在顶部...
请看我编辑的答案。它应该让您了解如何实现这一点。