WPF image inside border is not fully drawn

Question

I have an image within a border:

XAML:

<Window x:Class="TestProgram.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="350" Width="525">
<DockPanel>
    <Grid DockPanel.Dock="Top">
        <!---->
    </Grid>

    <ListBox DockPanel.Dock="Left"/>

    <Grid DockPanel.Dock="Top">
        <!---->
    </Grid>


    <Border x:Name="testBorder" ClipToBounds="True" Background="Gray">
        <Image x:Name="testImage" Source="test.png" Opacity="1" Stretch="None"
               MouseLeftButtonDown="testImage_MouseLeftButtonDown"
               MouseLeftButtonUp="testImage_MouseLeftButtonUp"
               MouseMove="testImage_MouseMove"
               />
    </Border>

</DockPanel>
</Window>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestProgram
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    private Point start;
    private Point origin;

    public MainWindow()
    {
        InitializeComponent();

        TransformGroup group = new TransformGroup();

        TranslateTransform tt = new TranslateTransform();
        group.Children.Add(tt);

        testImage.RenderTransform = group;
    }

    private void testImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        testImage.CaptureMouse();
        TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
        start = e.GetPosition(testBorder);
        origin = new Point(tt.X, tt.Y);
    }

    private void testImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        testImage.ReleaseMouseCapture();
    }

    private void testImage_MouseMove(object sender, MouseEventArgs e)
    {
        if (testImage.IsMouseCaptured)
        {
            TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
            Vector v = start - e.GetPosition(testBorder);
            tt.X = origin.X - v.X;
            tt.Y = origin.Y - v.Y;
        }
    }
}
}

I have added click & drag panning functionality, but the displayed size of the image is limited by the surrounding border, leaving only the top left corner of the image visible when the image is panned. This is the case even when i remove ClipToBounds="True"

ActualHeight and ActualWidth have values corresponding to the image's natural height and width, so why is the image clipped? What can I do to make the full image visible?

Answer 1

If you really want the border to overlay on top of the the image, then put them both in a < Grid > or < Canvas >

 <Canvas>
   <Image/>
   <Borde/>
</Canvas>