解決WPF圖片模糊最佳方法（綁定PixelWidth與PixelHeight）

     從事WPF開發一年有余，對於圖片顯示模糊相信很多人都遇到過。網絡上查找能得到一堆解決方法，但都是會帶來其他負面影響得不到最佳效果。其實，有些圖片會因為垂直分辨率/水平分辨率不同而造成在WPF界面上顯示出現模糊。WPF默認是96Dpi，但有些圖片可能是72DPI甚至更低或更高，這樣就會出現圖片顯示后被放大或縮小。解決的方法是通過綁定圖片的Source.PixelHeight與Source.PixelWidth並結合Stretch="Fill"或UseLayoutRounding="True"來限制圖片大小達到最佳效果。

 

1.先看本人制作的兩張演示圖片（注意是不同分辨率的圖片）：

        (分辨率96DPI  寬高67*71）       (分辨率72DPI  寬高：50*53)

2.編寫一個簡單的WPF應用程序用來顯示圖片

    2.1 前端代碼MainWindow.xaml：

<Window x:Class="ImgDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="圖片顯示模糊示例" Height="539.818" Width="671.169">
    <Window.Resources>
        <BitmapImage x:Key="vs1" UriSource="/ImgDemo;component/Images/vs1.png"></BitmapImage>
        <BitmapImage x:Key="vs2" UriSource="/ImgDemo;component/Images/vs2.png"></BitmapImage>       
    </Window.Resources>
    <Grid>
        <Image HorizontalAlignment="Left"  Source="{StaticResource vs1}" Stretch="None"  VerticalAlignment="Top" Margin="77,75,0,0" />
        <Image HorizontalAlignment="Left"  Source="{StaticResource vs2}" Stretch="None"  VerticalAlignment="Top" Margin="486,75,0,0" />
        <TextBlock Name="txt1" HorizontalAlignment="Left" Margin="77,151,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="91" Width="167"/>
        <TextBlock Name="txt2" HorizontalAlignment="Left" Margin="486,151,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="82" Width="167"/>

    </Grid>
</Window>

 

     2.2 后端代碼MainWindow.xaml.cs

namespace ImgDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += (s, e) =>
            {
                BitmapImage vs1 = this.FindResource("vs1") as BitmapImage;
                BitmapImage vs2 = this.FindResource("vs2") as BitmapImage;
                txt1.Text = string.Format("Source.PixelWidth：{0}\r\nSource.PixelHeight：{1}", vs1.PixelWidth, vs1.PixelHeight);
                txt2.Text = string.Format("Source.PixelWidth：{0}\r\nSource.PixelHeight：{1}", vs2.PixelWidth, vs2.PixelHeight);

            };
        }
    }
}

 

   2.3 運行結果：（注意右邊的圖片因為分辨率原因明顯模糊且與實際大小不符合）

  

3.解決方法修改MainWindow.xaml.cs代碼如下：

<Window x:Class="ImgDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="圖片顯示模糊示例" Height="539.818" Width="671.169">
    <Window.Resources>
        <BitmapImage x:Key="vs1" UriSource="/ImgDemo;component/Images/vs1.png"></BitmapImage>
        <BitmapImage x:Key="vs2" UriSource="/ImgDemo;component/Images/vs2.png"></BitmapImage>       
    </Window.Resources>
    <Grid>
        <Image HorizontalAlignment="Left"  Source="{StaticResource vs1}" Stretch="None"  VerticalAlignment="Top" Margin="77,75,0,0" />
        <Image HorizontalAlignment="Left"  Source="{StaticResource vs2}" Stretch="Fill"  VerticalAlignment="Top" Margin="486,75,0,0" 
               Width="{Binding Source.PixelWidth, Mode=OneWay, RelativeSource={RelativeSource Self}}" 
               Height="{Binding Source.PixelHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        <TextBlock Name="txt1" HorizontalAlignment="Left" Margin="77,151,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="91" Width="167"/>
        <TextBlock Name="txt2" HorizontalAlignment="Left" Margin="486,151,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Height="82" Width="167"/>

    </Grid>
</Window>

4.最終目標運行效果

   

5.總結

 對於不同分辨率的圖片如果在Winform顯示是不會出現放大模糊的情況，但WPF就是讓人糾結搞到程序員不停的繞圈找方法。其實，本來這可以避免的，只要要求美工制作標准分辨率的圖片96DPI，但作為程序員還是要預防一下，確保界面顯示的完美。由於語文水平有限，表達不明確之處請多包涵。