SilverLight系列——Image控制項的BUG

      近日在做silverlight開發時，發現只要運行開發的程式，無論是否開啟調試狀態，IE進程佔用CPU始終在90%上下，然而在展示某些表單時又很正常，這可是個大件事啊，等交到客戶手裡看到這CPU使用率還不得被批死。經過多方排查後發現，造成CPU高佔用率的表單都有一個共同點：使用了Image控制項但都沒能展示出圖片（賦值了圖片地址給Image.Source屬性，但實際片不存在），難道這就是罪魁禍首？

      Google了一通，找到了一篇文章：

      Binding silverlight image control to an empty BitmapImage causes high cpu utilization

      這是文章中兩個人的描述：

      When a silverlight image control is bound to an empty BitmapImage, sustained high CPU utilization occurs (15 - 25% on my machine). When source is set to null or to a valid image, cpu use drops to idle.

      If this.ImageUrl.Value is null the SL app takes up close to 100% CPU on one core as long as it is visible on screen. Minimizing the window brings CPU down to 0%

      下面是Microsoft給的回複：

      Thank you for reporting this issue.
      We are routing this issue to the appropriate group within the Visual Studio Product Team for triage and resolution. These specialized experts will follow-up with your issue.

      還真是有問題啊！這微軟也是，如此常用的控制項還搞出這檔子事。埋怨無用，還是想怎麼解決吧。我想了一個辦法，不直接為Image.Source賦值，而是通過一些代碼，嘗試根據圖片路徑去請求檔案流，如果成功，則執行個體化一個BitmapImage賦值給Image.Source，否則，將Image.Source設為null。代碼：

    public static class Img    {        public static readonly DependencyProperty UriProperty;        static Img()        {            UriProperty = DependencyProperty.RegisterAttached("Uri", typeof(Uri), typeof(Img), 

                 new PropertyMetadata(null, UriPropertyChanged));        }        public static Uri GetUri(Image image)        {            return (Uri)image.GetValue(UriProperty);        }        public static void SetUri(Image image, Uri uri)        {            image.SetValue(UriProperty, uri);        }        static void UriPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)        {            Image image = sender as Image;            Uri uri = e.NewValue as Uri;            TrySetImageSourceByUri(image, uri);        }        static void TrySetImageSourceByUri(Image image, Uri uri)        {            if (string.IsNullOrEmpty(uri.OriginalString))            {                image.SetValue(Image.SourceProperty, null);                return;            }            WebClient client = new System.Net.WebClient();            client.OpenReadCompleted += (sender, e) =>            {                if (e.Error == null)                {                    BitmapImage bitImg = new BitmapImage();                    bitImg.SetSource(e.Result);                    image.Source = bitImg;                }                else                    image.SetValue(Image.SourceProperty, null);            };            client.OpenReadAsync(uri);        }    }

    類似以下的使用方式：

    <Image local:Img.Uri=”Images/TestPic.jpg” />

    需要注意的：

    1、上述的"Images/TestPic.jpg”，實際地址為：ClientBin/Images/TestPic.jpg，若直接設定到Source屬性，需寫成"/Images/TestPic.jpg”；

    2、上述方法不支援XAP包內地址，類似於："/VDP.SL.Controls;component/Images/TestPic.jpg”，個人也不推薦把圖片放到silverlight項目下，

       因為會把XAP包撐大，用於工具列上的小表徵圖可以視情形而定；

2011-9-19日，又發現了Image.Source可能引發的一種錯誤現象：

當我開啟一個silverlight表單時，瀏覽器提示以下指令碼錯誤：

訊息: Unhandled Error in Silverlight Application 
Code: 4009    
Category: ManagedRuntimeError       
Message: 元素已經是另一個元素的子項目。

這個錯誤沒辦法捕捉，因為根本不到VS的調試器裡，從指令碼錯誤中也完全無法得知發生錯誤的位置。後面只能用最笨的辦法，一個一個控制項注釋，一遍遍嘗試，終於發現是Image惹的禍，把Image中的

Source="{Binding Path=[PositiveImgRUL]}" 刪掉就和諧了。當然，我會換上：vdp:Img.Uri="{Binding Path=[PositiveImgRUL]}"