Question

我发现了一个奇怪的行为，我在列表中加载了图像。以下是itemTemplate的简化片段，它会产生此问题：

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="180"/>
   </Grid.ColumnDefinitions>

<Image x:Name="Art" Grid.Row="1" Grid.Column="1" Source="{Binding Url}" Stretch="UniformToFill" />
</Grid>

图片加载的文件大小为360w，240h .png当我第一次打开加载上述xaml的页面时，该列表为网格尺寸给出的全尺寸可用的每个图像呈现180w，180h的空间：180宽度和自动高度。然后，一旦图像被加载，图像区域被缩小到网格的宽度限制（180）并且其高度按比例缩放（120）。因此效果是列表项目以180 x 180平方绘制，然后在图像加载后缩小到180 x 120。

我希望在下载图像源之前，图像元素的尺寸为0,0。我希望在加载图像之前，每个项目的内容都不会占用任何高度;该区域不应该使用180h开始。

这是设计问题吗？是否有任何已知的解决方法来处理它？我的实际代码在本地加载的同一网格位置中有一个默认图像，而最终图像的下载没有完成。它的尺寸与加载的图像源相同，因此当图像加载时，占位符图像的顶部和底部之间存在间隙，然后网格空间缩小到应该一直存在的范围。这非常糟糕。

Answer 1

显然，当Image的Stretch属性设置为除None以外的任何其他属性时，ListBoxItem（包含Grid和Image）会以某种方式强加一个最初为方形尺寸的布局。最后加载Source时，会将布局重新计算为真实尺寸。 ItemsControl（而不是ListBox）中的相同DataTemplate不会显示此行为。

幸运的是，Image控件还具有StretchDirection属性，您可以将其设置为DownOnly以防止最初的方形布局。缺点是只有当您的图像不必拉伸时，这种方法才有效，宽度小于180.

<Image Source="{Binding Url}" Stretch="Uniform" StretchDirection="DownOnly"/>

加载前WPF图像初始大小

1 个答案: