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>

Answer 1

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.