CODEWITHSUNDEEP
c#.netwpf
David Sykes
David Sykes

Reputation: 49832

Preventing a scaled image from overwriting other elements in the window

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

Upvotes: 0

Views: 39

Answers (1)

David Sykes
David Sykes

Reputation: 49832

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>

Upvotes: 1

Related Questions