在WPF DataGrid中将单元格高度调整为图像单元格高度

Question

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

换句话说，您在选择时获得的蓝色背景颜色在图像单元格上非常大，就像我在下面的图像中显示的那样：

现在正在构建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大师。我追求高低，并没有找到似乎做到的东西。

Answer 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>

使用样式可能有更好的方法，但是如果没有任何代码，这可以很好地工作。 Simples！？