Enlarge an image on mouseover in Popup in WPF

Question

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>      

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>

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.

Any help would be greatly appreciated.

Answer 1

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