CODEWITHSUNDEEP
c#wpfimagevisual-studio-2012
Dino Kantardzic
Dino Kantardzic

Reputation: 107

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>

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.

Upvotes: 1

Views: 4070

Answers (1)

Irwene
Irwene

Reputation: 3035

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

Upvotes: 2

Related Questions