WP TIPS に戻る

分離ストレージの画像を表示する

サンプルプロジェクト ImageSource_from_IsolatedStorage.zip

プロジェクトに追加した画像をプログラム中で読み書きを行う場合、一度リソースに含まれているデータを分離ストレージに読み込む必要があります。

では逆に分離ストレージにある画像を Image コントロールで読み込む場合はどうすればよいのでしょうか？
分離ストレージにある Image/miho.jpg というファイルを、Image コントロールで読み込む場合、

<Image Source="Image\miho.jpg"/>

としても表示されません。

というのも Source に指定することが出来るのは、http URI やリソースやコンテンツの URI であって、分離ストレージのパスではないのです。

こういう場合は、BitmapImage に画像を読み込んで Image.Source に渡してやる必要があります。
以下は、直接 Image.Source に BitmapSource を渡す場合と、ImageSource から Source プロパティにバインドしている場合の読み込みコードです。

string filename = "miho.jpg";

// コンストラクター
public MainPage()
{
   InitializeComponent();
   
   // まずはリソースを分離ストレージにコピー
    // 「リソース/コンテンツを分離ストレージに保存する」を参照。
   FileHelper.ResourceToFile(@"Image/miho.JPG", filename);
}

// 分離ストレージの画像を読み込むメソッド
public BitmapImage GetImage(string filename)
{
   using (IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication())
   {
       using (IsolatedStorageFileStream stream = iso.OpenFile(filename, FileMode.Open))
       {
           BitmapImage image = new BitmapImage();
           image.SetSource(stream);
           return image;
       }
   }
}

// Image.Source にバインドするプロパティ
public BitmapImage Source
{
   get
   {
       return this.GetImage(filename);
   }
}

// ボタンがクリックされたら、image1.Source に画像を設定する。
// また image2.Source に Source がバインドしてあるので、その更新を通知する。
private void View_Button_Click(object sender, System.EventArgs e)
{
   this.image1.Source = this.GetImage(filename);
   this.OnPropertyChanged("Source");
}