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;
    }

have you tried putting the image and the other controls in a ``? — XAMlMAX, May 13 '14 at 13:58
I would have sworn I had, but clearly I hadn't. That resolves the problem in my test app, It also changes things for the actual app this is for, if not quite fixes it, so that gives me hope. Thanks! — David Sykes, May 13 '14 at 14:19
@XAMlMAX Actually it only works when the Centre values are 0, any positive values and the bitmap overwrites the label again. — David Sykes, May 13 '14 at 14:31
Should you have a look at this [MSDN-WPF-transform](http://msdn.microsoft.com/en-us/library/system.windows.media.scaletransform.centerx(v=vs.110).aspx) — XAMlMAX, May 13 '14 at 14:36
@XAMlMAX That's what I think I am doing, setting CentreX/Y to the centre of the image, but the image displays over everything else in the window — David Sykes, May 13 '14 at 14:47
This might be a little weird but could you put the image in a StackPanel and the rest of controls outside of it i.e. `` but this is a pure guess. — XAMlMAX, May 13 '14 at 14:54

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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>

Preventing a scaled image from overwriting other elements in the window

1 Answers1