图像不占用DataGridCell中的整个空间
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图像不占用DataGridCell中的整个空间相关的知识,希望对你有一定的参考价值。
我有一个Datagrid,它显示一些图像文件的缩略图以及其他数据。我正在使用转换器裁剪图像的一部分,然后在Datagrid中显示裁剪的图像。这是网格的屏幕截图:图像显示正常,但它非常小。如果我使用鼠标更改列的宽度,则图像的宽度会发生变化。但是图像没有占用单元格中的完整空间。下面是我正在使用的代码:
<DataGrid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1" RowHeight="30" x:Name="dgFileDetails" CanUserAddRows="False" AutoGenerateColumns="False" SelectionMode="Single" CellEditEnding="dgFileDetails_CellEditEnding" SelectionChanged="dgFileDetails_SelectionChanged" MouseDoubleClick="dgFileDetails_MouseDoubleClick" AlternatingRowBackground="{StaticResource LightGrayColorBrush}" GridLinesVisibility="None" CurrentCellChanged="dgFileDetails_CurrentCellChanged" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridCell}" x:Key="TextCellStyle">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type DataGridCell}" x:Key="ImageCellStyle">
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn IsReadOnly="False" Width="2*" Header="Sheet Name" Binding="{Binding NewFileName}" />
<DataGridTextColumn IsReadOnly="False" Width="1*" Header="Label" Binding="{Binding FileId}" />
<DataGridTextColumn IsReadOnly="False" Width="1*" Header="Trade" Binding="{Binding Trade}" />
<DataGridTextColumn IsReadOnly="False" Width="1*" Header="Sub-Trade" Binding="{Binding SubTrade}" />
<DataGridTextColumn IsReadOnly="False" Width="1*" Header="Version" Binding="{Binding VersionName}" />
<DataGridTextColumn IsReadOnly="False" Width="0.5*" Header="Revision" Binding="{Binding RevisionNo}" />
<DataGridTemplateColumn Header="Sheet Title" Width="1*" IsReadOnly="True" CellStyle="{StaticResource ImageCellStyle}">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding TitleImage,Converter={StaticResource ConverterTupleToImage}}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Sheet Label" Width="1*" IsReadOnly="True" CellStyle="{StaticResource ImageCellStyle}">
<DataGridTemplateColumn.CellTemplate >
<DataTemplate>
<Image Source="{Binding IdImage,Converter={StaticResource ConverterTupleToImage}}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
可以看出,我已将单元格的所有对齐属性设置为拉伸,但它没有帮助。因此,如何使Image元素占用整个DataGridCell的空间。
编辑:这是转换器的代码:
public object Convert(object value,Type targetType,object parameter,CultureInfo cultureInfo)
{
try
{
if (value is Tuple<Tuple<int, int, int, int>, string>)
{
Tuple<Tuple<int, int, int, int>, string> tuple = value as Tuple<Tuple<int, int, int, int>, string>;
Tuple<int, int, int, int> rectDims = tuple.Item1;
string filePath = tuple.Item2;
using (MyDocument doc = MyDocument.Load(filePath))
{
var size = doc.Size;
int width = (int)(size.Width);
int height = (int)(size.Height);
Rectangle cropSection = new Rectangle(rectDims.Item1, rectDims.Item3, Math.Abs(rectDims.Item1 - rectDims.Item2), Math.Abs(rectDims.Item3 - rectDims.Item4));
using (Image image = doc.Render(0, width, height, 300, 300, false))
{
Bitmap targetRect = new Bitmap(cropSection.Width, cropSection.Height);
using (Graphics g = Graphics.FromImage(targetRect))
{
g.DrawImage(image, 0, 0, cropSection, GraphicsUnit.Pixel);
}
return BitmapConverter.ToImageSource(targetRect);
}
}
}
else
{
return null;
}
}
catch (Exception ex)
{
return null;
}
}
答案
通过使用CroppedBitmap类(由评论中的Clemens建议)解决了该问题。我不知道原因,但下面是我使用的代码:
public object Convert(object value,Type targetType,object parameter,CultureInfo cultureInfo)
{
try
{
if (value is Tuple<Tuple<int, int, int, int>, string>)
{
Tuple<Tuple<int, int, int, int>, string> tuple = value as Tuple<Tuple<int, int, int, int>, string>;
Tuple<int, int, int, int> rectDims = tuple.Item1;
string filePath = tuple.Item2;
using (MyDocument doc = MyDocument.Load(filePath))
{
var size = doc.Size;
int width = (int)(size.Width);
int height = (int)(size.Height);
Rectangle cropSection = new Rectangle(rectDims.Item1, rectDims.Item3, Math.Abs(rectDims.Item1 - rectDims.Item2), Math.Abs(rectDims.Item3 - rectDims.Item4));
using (Image image = doc.Render(0, width, height, 300, 300, false))
{
BitmapSource sourceImage = BitmapHelper.ToBitmapSource(image);
CroppedBitmap croppedImage = new CroppedBitmap(sourceImage,new System.Windows.Int32Rect(cropSection.X,cropSection.Y,cropSection.Width,cropSection.Height));
return croppedImage;
}
}
}
else
{
return null;
}
}
catch (Exception ex)
{
return null;
}
}
以上是关于图像不占用DataGridCell中的整个空间的主要内容,如果未能解决你的问题,请参考以下文章
UIButton ImageView 在 iCarousel 中占用更多空间并且不响应触摸事件