Canvas + VisualBrush不会将图像渲染为均匀填充 [英] Canvas + VisualBrush not rendering image as uniform fill

问题描述

我有一个Canvas，我将Background属性设置为一个由Image组成的VisualBrush。我是将画布的宽度和高度绑定到图像的宽度和高度的数据。这是XAML：

I've got a Canvas that I'm setting the Background property to a VisualBrush consisting of an Image. I'm data binding the Canvas' Width and Height to the Images' Width and Height. Here's the XAML:

<Canvas x:Name="imageCanvas" ClipToBounds="True" Width="{Binding ActualWidth, ElementName=dataImage}" Height="{Binding ActualHeight, ElementName=dataImage}"
                Loaded="imageCanvas_Loaded" MouseMove="imageCanvas_MouseMove">
    <Canvas.Background>
        <VisualBrush Stretch="Uniform">
            <VisualBrush.Visual>
                <Image x:Name="dataImage" ClipToBounds="True" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform" Source="{Binding DataImage, Mode=OneWay}" LayoutTransform="{Binding DataImageLayoutTransform, Mode=OneWay}"/> 
            </VisualBrush.Visual>
        </VisualBrush>
    </Canvas.Background>
</Canvas>

请注意，Image正在使用LayoutTransform。我用它来拉伸图像的宽度。如果我禁用LayoutTransform绑定并运行我得到以下（正确）渲染输出：

Note that Image is using a LayoutTransform. I'm using this to stretch the width of the image. If I disable the LayoutTransform binding and run I get the following (properly) rendered output:

然而，当我添加LayoutTransform以将图像的宽度拉伸6倍时，图像看起来正确拉伸但是它太小了，即它没有统一填充Canvas：

However, when I add the LayoutTransform to stretch the width of the image by a factor of 6, the image looks stretched correctly but it is too small i.e. it is not filling the Canvas uniformly:

我怀疑这可能与将画布高度/宽度绑定到图像高度宽度有关，但目前尚不清楚确切的问题是什么。谁能提供一些见解？提前谢谢。

I suspect this may have something to do with binding the Canvas Height/Width to the image height width, but it's not clear what the exact problem is. Can anyone provide some insight? Thank you in advance.

推荐答案

Canvas有点棘手！尝试将其扩展为AutoSizeCanvas，您可以搜索"autosizecanvas wpf"或只是前往   https://stackoverflow.com/questions/855334/wpf-how-to-make-canvas-auto-resize 功能
并获取代码。我试图尽可能多地停留在Canvas上，因为它的行为与其他行为不同（对于这些情况，我只使用了一个Rectangle和Fill属性。

Canvas is a bit tricky! Try extending it as a AutoSizeCanvas, you can do a search for 'autosizecanvas wpf' or just head to  https://stackoverflow.com/questions/855334/wpf-how-to-make-canvas-auto-resize  and grab the code. I try to stay from Canvas as much as possible since it has it's own behavior different from others (for these situations, I just use a Rectangle and Fill property.

这篇关于Canvas + VisualBrush不会将图像渲染为均匀填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！