将单元格高度调整为 WPF DataGrid 中的图像单元格高度答案

【问题标题】：Adjust cell height to image cell height within WPF DataGrid将单元格高度调整为 WPF DataGrid 中的图像单元格高度
【发布时间】：2014-05-18 20:20:03
【问题描述】：

在 WPF 中使用 DataGrid 时，我有一个图像和各种文本字段。当我选择一行时，选择看起来很难看，因为文本单元格高度彼此大小相同，但与动态图像不同，这取决于图像网格列宽的宽度。

换句话说，您在选择时获得的蓝色背景颜色在图像单元格上非常大，如下图所示：

DataGrid 正在构建中，因此非常简单。我只是不确定最简单、最干净、最少的代码方法（如果 WPF 有这样的东西！）。到目前为止，这是它的 xaml：

<DataGrid Margin="10,52,10,10" IsReadOnly="True" AutoGenerateColumns="False" Name="MainGrid" ItemsSource="{Binding CurrentData}" GridLinesVisibility="Horizontal" HorizontalGridLinesBrush="#FFBFBFBF" VerticalGridLinesBrush="White" >
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Picture}" RenderOptions.BitmapScalingMode="HighQuality" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="SKU" Binding="{Binding SKU}" />
        ...
        ...
        <DataGridTextColumn Header="Product Name" Binding="{Binding Label}" />
    </DataGrid.Columns>
</DataGrid>

那么，交给 WPF 专家吧。我到处打猎，但没有找到似乎可以做到这一点的东西。

【问题讨论】：

标签： wpf datagrid

【解决方案1】：

看来我找到了解决方案。这真的很简单，因为我只是为每个文本字段使用了 DataGridTemplateColumn 并在里面放了一个 TextBlock。由于 TextBlock 填充可用空间的方式，这解决了选择问题，并且选择效果填充了整个单元格。我使用 VerticalAlignment 使文本居中，然后看起来好多了，如下所示：

为了完成，这里是 xaml：

<DataGrid Margin="10,52,10,10" IsReadOnly="True" AutoGenerateColumns="False" Name="MainGrid" ItemsSource="{Binding CurrentData}" GridLinesVisibility="Horizontal" HorizontalGridLinesBrush="#FFBFBFBF" VerticalGridLinesBrush="White">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Picture}" RenderOptions.BitmapScalingMode="HighQuality" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="SKU" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding SKU}" VerticalAlignment="Center"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        ...
        ...
        <DataGridTemplateColumn Header="Label" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Label}" VerticalAlignment="Center"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

使用样式可能有更好的方法，但没有任何代码，但效果很好。简单！？

【讨论】：