Enlarging image in WPF

Question

I have a WPF application which checks for new images in a certain parent directory, and if there are new images, it switches the currently displayed images (I have 6 images).

I would like to add a feature which will allow a user to click on one of the images, and upon that click, a 'new' window will appear, showing that image enlarged, and another click anywhere on the screen will quit this enlargement and put the focus back to the other (6) images.

Is that possible? I tried googling zoom image wpf but found only mouse-drag related solutions.

I also tried using viewport but that didn't to work so well either.

Update - XAML

<Grid Grid.Row="0">
        <GroupBox  x:Name="AccuracyGraphsGroupBox" Header="Accuracy" Foreground="Red">
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.5*" />
                    <ColumnDefinition Width="0.5*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPicBox" MouseUp="AccuracyPicBox_OnMouseUp"></Image>
                <Image Grid.Column="1" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPerioPicBox" MouseUp="AccuracyPerioPicBox_OnMouseUp"></Image>
            </Grid>
        </GroupBox>
    </Grid>

Just create an `` with the appropriate size. The default settings will scale the picture up so it fits the bounds. — Nico Schertler, Jun 29 '14 at 08:32
you should make this into an answer Nico - just add a bit of XAML to show the relevant properties — Random Dev, Jun 29 '14 at 08:40
I have the `` with the sizes set to `Auto`, inside a group box. I would like to add the `MouseUp` event to it, and when the event is captured, I would like to show this image, enlarged, but keep the original image in place. I'm editing my question with the current `Xaml`. — Idanis, Jun 29 '14 at 08:43
Check this link http://www.c-sharpcorner.com/UploadFile/0f100d/popup-window-in-wpf/ I hope it will help you — Tanul, Jun 29 '14 at 11:07

score 7 · Answer 1 · answered Jun 29 '14 at 15:41

As the guys mentioned in the comments, your best bet is to use a ToolTip to popup your full size image. There is a slight problem with data binding the Image.Source value from the original Image in your ToolTip, because they are not part of the normal UI visual tree and exist in their own tree. However, we can overcome this by using the ToolTip.PlacementTarget property:

<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>
</Image>

Of course, you could just use the same Binding Path in both Image.Source properties, but I never like repeating code.

Enlarging image in WPF

1 Answers1