Preventing a scaled image from overwriting other elements in the window

Question

I am displaying a scaled image in an Image element with other elements in a window. The image starts out displayed as I would expect, with other elements visible, but the moment the window is resized the image overwrites the other elements.

It happens with non zero values for CentreX and CentreY

How can I limit the scaled image to its own element?

<Grid>
    <Label>Testing</Label>
    <Image Name="TheImage">
        <Image.RenderTransform>
            <ScaleTransform x:Name="scale" ScaleX="2" ScaleY="2"
                        CenterX="10" CenterY="10" />
        </Image.RenderTransform>
    </Image>
</Grid>


    public Window1()
    {
        InitializeComponent();
        BitmapImage bi = new BitmapImage();
        bi.BeginInit();
        bi.CreateOptions = BitmapCreateOptions.IgnoreColorProfile;
        bi.UriSource = new Uri(@"Image.jpg");
        bi.EndInit();

        TheImage.Source = bi;
    }

Answer 1

StackPanel (or DockPanel) is required, but the key is to "place the image within a Border with it's ClipToBounds property set to True."

<StackPanel>
    <Label>Testing</Label>
    <Border ClipToBounds="True">
        <Image Name="TheImage">
            <Image.RenderTransform>
                <ScaleTransform x:Name="scale" ScaleX="2" ScaleY="2"
                    CenterX="10" CenterY="10" />
            </Image.RenderTransform>
        </Image>
    </Border>
</StackPanel>