Question

我希望将图像作为网格的背景。默认情况下，图像应该是右对齐和底对齐的。图像也应均匀地拉伸到容器的高度。但是，如果容器调整大小使得宽度比图像的大小更薄，则图像开始调整大小以变小。而不是发生这种情况，我想剪辑图像，使右边的部分开始隐藏。

现在是我的图像XAML：

<Image Source="blahblah.png"
       HorizontalAlignment="Right" 
       VerticalAlignment="Bottom" 
       Stretch="Uniform" />

以下是我想在图片中描述的行为（黑色边框是容器大小）：

Cropping behavior

Answer 1

尝试混合使用不同的面板，如下所示：

<Grid x:Name="mainGrid" >

    <Grid x:Name="backgroundSpacer" HorizontalAlignment="Stretch" 
          MinWidth="{Binding ElementName=backgroundImage, Path=ActualWidth}" >
        <StackPanel x:Name="backgroundPanel" 
                    HorizontalAlignment="Right" Orientation="Horizontal" >
            <Image x:Name="backgroundImage" Stretch="Fill" 
                   Source="http://programming.enthuses.me/1.png" />
        </StackPanel>
    </Grid>

    ... 

</Grid>

在这里，我们将图像放在水平（和右对齐）StackPanel中。默认情况下，StackPanel会垂直拉伸，StackPanel的一个功能是告诉它的子项目它们具有无限宽度。因此，Image始终呈现为 tall 。

接下来，我们有一个“backgroundSpacer”，它通常会延伸到整个容器网格，但是通过MinWidth绑定，我们确保它总是足够宽以包含整个图像。如果“mainGrid”变得太薄，“backgroundSpacer”会被剪裁，而WPF的默认剪切行为会从右侧剪切掉。

Answer 2

我没有看到一种方法，只是设置一些“魔术”属性。我将实现一个托管您的图像并管理所需行为（缩放和定位）的面板。这就是小组的样子：

    public class ImagePanel : Panel
{
    public ImagePanel ()
    {
    }

    protected override Size MeasureOverride (Size availableSize)
    {
        if (InternalChildren.Count > 0)
        {
            FrameworkElement child = (FrameworkElement)InternalChildren[0];

            var childMaxSize = new Size (double.PositiveInfinity, availableSize.Height);
            child.Measure (childMaxSize);
        }

        return availableSize;
    }

    protected override Size ArrangeOverride (Size finalSize)
    {

        if (InternalChildren.Count > 0)
        {
            FrameworkElement child = (FrameworkElement)InternalChildren[0];

            double x = finalSize.Width - child.DesiredSize.Width;

            if (x < 0)
            {
                x = 0;
            }

            child.Arrange (new Rect (new Point (x, 0), child.DesiredSize));
        }

        return finalSize; // Returns the final Arranged size
    }
}

以这种方式使用：

    <local:ImagePanel>
      <Image Source="Image.jpg" Fill="Uniform"/>
    </local:ImagePanel>

Answer 3

你有没有尝试使用ViewBox元素？将它放在仅定义了MaxWidth / Width的Parent上，并将ClipToBounds设置为True。有关此控件的更多信息（当我们谈论调整大小时，这有很多帮助）：

http://msdn.microsoft.com/pt-br/library/system.windows.controls.viewbox(v=vs.110).aspx

WPF图像，拉伸和作物

3 个答案: