Привязка данных к ActualHeight / Width завершается неудачно с LayoutTransform

Question

Рассмотрим следующий простой 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>

Результат:

Похоже, что свойства Rectangle Height / Width, являющиеся данными, привязанными к изображению, свойства Actualheight / ActualWidth не изменяются для соответствия новому соотношению сторон изображения в результате преобразования LayoutTransform, примененного к изображению. Прямоугольник все еще выражает предварительно преобразованное соотношение сторон. Почему это так и как я могу добиться такого поведения, чтобы прямоугольник настраивался в соответствии с размерами, преобразованными изображениями, как я предполагал с помощью привязки?

Answer 1

Макет не работает из коробки с кистями.

Когда вы назначаете LayoutTransform для Visual в VisualBrush, это не влияет на макет элемента, который заполнен Brush. Вместо этого вам придется назначить LayoutTransform Rectange вместо этого, если изображение. Однако это также растянет обводку прямоугольника.

Лучше вообще не использовать VisualBrush, а просто изображение в соответствующем родительском элементе, например граница. Это также позволило бы избежать необходимости привязки к изображениям 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>