伸展和农作物的WPF图像

Question

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

这是我现在的图片XAML：

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

下面是我希望在图片中描述的行为(黑色边框是容器大小)：

​

​

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总是尽可能高。

接下来，我们有一个"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的父级上，并将ClipToBounds设置为True。有关此控件的更多信息(在我们讨论调整大小时非常有用)：

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