4

我在显示 16x16 图标的网格中有一个图像控件。但由于某种原因，即使我设置了属性，它仍然是 16x16，它看起来被拉伸了。

在此处输入图像描述

代码 ：

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

是的，在运行时也是:(

在此处输入图像描述

提前谢谢了。

4

4 回答 4

19

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

于 2012-05-14T18:48:15.987 回答
4

我发现我经常必须明确指定控件的andWidth才能让它们正确显示：HeightImage

<Image 
  Name="imgIcon" 
  Source="/ChatControls;component/Images/NormalUser.png" 
  VerticalAlignment="Center" 
  HorizontalAlignment="Center" 
  Width="16" 
  Height="16" 
/>
于 2012-05-14T15:29:58.470 回答
4

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

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

您需要查看XAML 布局传递以了解它在做什么。

其次，因为您使用的是动态图像源（作为 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

我同意接受的答案，但我不认为它解释了原因，它只是解释了它的工作原理。

于 2012-05-14T16:05:52.543 回答
1

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

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

用图像的原始大小替换 Width 和 Height 这将对您有所帮助

于 2013-06-07T06:22:36.123 回答