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

まず、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 に答える
4

コントロールを正しく表示するには、コントロールのWidthとを明示的に指定する必要があることがよくあります。HeightImage

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

これは、画面解像度に依存する画像ピクセルが原因で発生します。どの画面解像度でも同じままになるように、デバイスに依存しない必要があるため、これを使用してそうします。

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

幅と高さを画像の元のサイズに置き換えます

于 2013-06-07T06:22:36.123 に答える