Question

我在网格内有一个图像控件，显示一个16x16图标。但由于某种原因，即使我设置属性使它保持16x16，它看起来很紧张。

enter image description here

代码：

<UserControl x:Class="ChatControls.UserListItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" d:DesignHeight="28" d:DesignWidth="132">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="24" MinWidth="24" MaxWidth="24" />
            <ColumnDefinition Width="171*" />
        </Grid.ColumnDefinitions>
        <Image Name="imgIcon" Source="/ChatControls;component/Images/NormalUser.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" />
        <Label Content="Muhammad[A]" Grid.Column="1" Name="lblNick" VerticalContentAlignment="Center" Padding="8,5,5,5" />
    </Grid>
</UserControl>

这有什么理由吗？

更新1：

在运行时也是:(

enter image description here

非常感谢提前。

Answer 1

实际上，我经常看到PNG图像。似乎PNG的默认分辨率为72dpi，而WPF中的默认屏幕分辨率为96dpi。 WPF尝试通过将png位图缩放到其像素大小的133％来考虑这一点，这在技术上是正确的，但通常不是用户想要的。您可以使用gif或jpg代替，也可以将图像与LayoutTransform组合，将其缩放到其大小的0.75，或者只是明确地设置图像控件的大小。

Answer 2

首先，你的171 *的XAML定义有点奇怪。您最好的方法是：

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="24" />
  <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

您需要查看XAML layout passes以了解这是在做什么。

其次，因为您正在使用动态图像源（作为URI加载），所以它将进行流式传输，因此第一次布局过程中的宽度将为24，但是在图像流式传输后，控件将动态调整大小。如果要强制执行大小调整，最好的办法是在图像周围使用边框作为0宽度容器。喜欢这个

 <Border Grid.Column="0" Grid.Row="0" BorderThickness="0" BorderBrush="Black">
    <!-- UniformToFill: Scale to completely fill output area.
         Aspect ratio is preserved. Cropping may occur.-->
    <Image  
      Source="sampleImages/gecko.jpg" 
    Stretch="UniformToFill" />
  </Border>

在图像周围执行宽度和高度是这样做的一种缺点。您可能想要做的另一件事是明确定义源图像的加载方式，如下所示：

<Image Width="200">
 <Image.Source>
  <BitmapImage DecodePixelWidth="200"  
   UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
 </Image>

哪个不会加载完整图像但会在加载前调整大小而不是动态调整大小。如需进一步参考，请http://msdn.microsoft.com/en-us/library/ms748873.aspx

我同意接受的答案，但我不认为它解释了原因，只是解释说它有效。

Answer 3

我发现我经常需要明确指定Width和Height个Image控件才能使它们正确显示：

<Image 
  Name="imgIcon" 
  Source="/ChatControls;component/Images/NormalUser.png" 
  VerticalAlignment="Center" 
  HorizontalAlignment="Center" 
  Width="16" 
  Height="16" 
/>

Answer 4

这是因为图像像素取决于屏幕分辨率，它应该与设备无关，以便在任何屏幕分辨率上保持相同所以用这个来做。

<Image Width = "24" Height = "24" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" Stretch = "None"/>

将宽度和高度替换为图像的原始大小这会帮助你

当Stretch设置为None时，WPF中的图像控制拉伸图像

4 个答案: