与 LayoutTransform 绑定到 ActualHeight/Width 的数据失败答案

【问题标题】：Data binding to ActualHeight/Width fails with LayoutTransform与 LayoutTransform 绑定到 ActualHeight/Width 的数据失败
【发布时间】：2018-09-07 19:35:31
【问题描述】：

考虑以下简单的 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 以获取：

<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 Height/Width 属性似乎没有改变以尊重新的图像纵横比。 Rectangle 仍然表示预先转换的纵横比。为什么会这样？我怎样才能实现这样的行为，即 Rectangle 会根据我在绑定中预期的图像转换尺寸进行自我调整？

【问题讨论】：

标签： wpf data-binding

【解决方案1】：

布局不适用于画笔。

当您在 VisualBrush 中将 LayoutTransform 分配给 Visual 时，它不会影响使用 Brush 填充的元素的布局。相反，您必须将 LayoutTransform 分配给 Rectange，而不是 Image。但是，这也会拉伸 Rectangle 的 Stroke。

最好不要使用 VisualBrush，而只使用适当父元素中的图像，例如边框。这也可以避免绑定到 Image 的 ActualWidth 和 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>

【讨论】：