Question

我在一个Image元素中显示一个缩放图像，其中包含窗口中的其他元素。图像开始按照我的预期显示，其他元素可见，但是当窗口调整大小时，图像会覆盖其他元素。

对于CentreX和CentreY

，非零值发生

如何将缩放后的图像限制为自己的元素？

<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（或DockPanel）是必需的，但关键是"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>

防止缩放图像覆盖窗口中的其他元素

1 个答案: