在WPF的Popup中将鼠标悬停时放大图像 [英] Enlarge an image on mouseover in Popup in WPF

问题描述

大家好，我通过不同的解决方案浏览了其中的一些论坛帖子，但似乎无法理解.我的风格

Hi all I've looked through several of these forum posts with different solutions but can't seem to get it. My style

<Style x:Key="ScaleStyle" TargetType="Image">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Grid.ZIndex" Value="1"/>
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="2.5" ScaleY="2.5"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>      

带有图像的我的UniformGrid:

My UniformGrid with images:

<ListView Grid.ColumnSpan="5" Grid.Row="11" Name="Thumbnails">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="5"/>                               
                        </ItemsPanelTemplate>                             
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Image Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Source="{Binding}" Height="100" Width="100" Margin="3">

                            </Image>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

发生的事情是图像变大了，但是在均匀的网格内，这使其与其他图像重叠并且看起来不太好.

What happens with this is that the image gets bigger but inside the uniform grid which makes it overlap with other images and is just not nice looking.

另一方面，我尝试使用工具提示弹出窗口，它将打开一个新的弹出窗口，但其中的图像将是图像角的巨大缩放.

On the other hand I tried using a tooltip popup and it would open a new popup but the image inside would be a giant zoom of the corner of the image.

<Image Name="Image" Source="/WpfApplication1;component/Images/Tulips.jpg" Height="100"
Stretch="Uniform">
<Image.ToolTip>
    <ToolTip DataContext="{Binding PlacementTarget, 
        RelativeSource={RelativeSource Self}}">
        <Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
            <Image Source="{Binding Source}" Stretch="None" />
        </Border>
    </ToolTip>
</Image.ToolTip>

问题可能是原始图像非常大，我在统一网格"中将宽度和高度设置为100，这使它们看起来像缩略图，但是工具提示似乎引用了原始宽度和高度，并且从一个角开始直到它适合工具提示弹出窗口的宽度和高度为止，最终只显示原始超大图片的一小部分.

The problem might be that the original images are very large and in the Uniform grid i set the width and height to a 100 which makes them look like thumbnails but the tooltip seems to reference the original width and height and starts from a corner until it fits the width and height of the tooltip popup which ends up just showing a small part of the original very large picture.

任何帮助将不胜感激.

推荐答案

将图像的Stretch属性设置为fill将使图像的大小调整为容器的大小.

Setting the Stretch property of the image to fill will make your image resize to the size of your container.

这篇关于在WPF的Popup中将鼠标悬停时放大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！