在 WPF Datagrid 行中仅显示图像的一部分？答案

【问题标题】：Show only a section of an image in WPF Datagrid rows?在 WPF Datagrid 行中仅显示图像的一部分？
【发布时间】：2015-07-18 03:24:24
【问题描述】：

我有尺寸为 200x275 的图像（在本地驱动器上），我正在使用以下代码在我的数据网格中填充一行：

XAML：DataGrid.Columns

<DataGridTemplateColumn Header="IMG" Width="SizeToCells">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Image Width="200" Height="275" Margin="0,0,0,-100" Source="{Binding Path=IMG}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

在我的 xaml.cs 文件中，我将 IMG 作为 BitmapImage 类型的属性（将 uri 存储为 BitmapImage），并使用 CollectionViewSource 来更新它，其中包含这些图像的列。

显示它们很好，但我只想将每个图像的一部分显示为一种预览（相同宽度为 200 像素，距顶部 10 像素，高度仅 50 像素 - 稍后我将显示完整图像当点击它的小预览时）。

从上面的代码中，您可以看到我尝试更改边距值（-100 到底部） - 这有点工作，但列表中的最后一个图像完整显示并超出了列表的底部。

有没有更好的方法从顶部裁剪 10px，然后将高度设置为 50px，而不缩小图像？

我能想到的唯一方法是从位图图像创建一个新位图，但我很确定这对于数百个图像来说效率非常低。

【问题讨论】：

标签： c# wpf image datagrid bitmapimage

【解决方案1】：

我会尝试使用 ClipToBounds=true 将您的 Image 控件包装在 Grid 中。那应该解决它。只需确保网格的大小适合item（50px 高），而不是根据图像自动调整大小，否则剪辑将无法按预期工作。

【讨论】：

啊，非常感谢，我在顶部的 10px 中使用了 Margin。我之前确实摆弄过 ClipToBounds，但不知道我需要将图像包含在网格中，我认为边界将是行容器。