数据绑定到ActualHeight / Width失败，出现LayoutTransform [英] Data binding to ActualHeight/Width fails with LayoutTransform

问题描述

考虑以下简单的XAML：

Consider the following simple XAML:

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
    <Rectangle Stroke="Red" Width="{Binding ActualWidth, ElementName=dataImage}" Height="{Binding ActualHeight, ElementName=dataImage}">
        <Rectangle.Fill>
            <VisualBrush Stretch="Uniform">
                <VisualBrush.Visual>
                    <Image x:Name="dataImage" ClipToBounds="True" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform" Source="c:\Moray.png"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollViewer>

这将产生以下输出：

现在，我将布局转换添加到上面的XAML：

Now, I add a layout transform to the above XAML to get:

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
    <Rectangle Stroke="Red" Width="{Binding ActualWidth, ElementName=dataImage}" Height="{Binding ActualHeight, ElementName=dataImage}">
        <Rectangle.Fill>
            <VisualBrush Stretch="Uniform">
                <VisualBrush.Visual>
                    <Image x:Name="dataImage" ClipToBounds="True" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform" Source="c:\Moray.png">
                        <Image.LayoutTransform>
                            <ScaleTransform ScaleX="6"/>
                        </Image.LayoutTransform>
                    </Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>
</ScrollViewer>

结果是：

似乎矩形高度/宽度属性是由于绑定到图像的LayoutTransform的结果，绑定到图像的数据的Actualheight / ActualWidth属性并未更改以尊重新图像的宽高比。矩形仍表示预转换的宽高比。为什么会这样，以及如何实现行为，使Rectangle根据绑定所需的图像变换尺寸调整自身？

It seems like the Rectangle Height/Width properties which are data bound to the image Actualheight/ActualWidth properties are not altering to respect the new image aspect ratio as a result of the LayoutTransform applied to the image. The Rectangle is still expressing the pre-transformed aspect ratio. Why is this and how can I achieve behavior such that the Rectangle adjusts itself according to the images transformed dimensions as I intended with the binding?

推荐答案

使用画笔无法立即使用布局。

Layout doesn't work out of the box with Brushes.

在VisualBrush中为Visual分配LayoutTransform时，它不会影响布局用Brush填充的元素。相反，如果是Image，则必须将LayoutTransform分配给Rectange。

When you assign a LayoutTransform to the Visual in a VisualBrush it doesn't impact the layout of the element that's filled with the Brush. You would instead have to assign the LayoutTransform to the Rectange instead if the Image. However, that would also stretch the Rectangle's Stroke.

最好根本不使用VisualBrush，而只在适当的父元素中使用Image，例如边框。这样也可以避免绑定到图像的ActualWidth和ActualHeight。

Better don't use a VisualBrush at all, but just an Image in an appropriate parent element, e.g. a Border. This would also avoid the need for binding to the Image's ActualWidth and ActualHeight.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Border BorderBrush="Red" BorderThickness="1">
        <Image Stretch="None" Source="C:\Moray.png">
            <Image.LayoutTransform>
                <ScaleTransform ScaleX="6"/>
            </Image.LayoutTransform>
        </Image>
    </Border>
</ScrollViewer>

这篇关于数据绑定到ActualHeight / Width失败，出现LayoutTransform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！