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属性，由于对图像应用了LayoutTransform，因此不会改变以尊重新图像的宽高比。矩形仍表示预转换的宽高比。为什么会这样？如何实现行为，使Rectangle根据绑定所要的图像变换后的尺寸调整自身？

Answer 1

“布局”不适用于“笔刷”。

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

最好根本不使用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>

数据与ActualHeight / Width的绑定因LayoutTransform

1 个答案: