Image Local

Local Folder に画像を格納して、描画する方法を説明します。

前田稔の超初心者のプログラム入門

Local Folder を作成

  1. このプロジェクトは Windows10 & Visual Studio Professional 2019 16.1.2 の環境で開発します。
    アプリをインストールすると Local Folder が作成され、アンインストールすると完全に削除されます。
    最初に私のホームページから Uniform Resource Identifier(URI) を指定して画像を描画するプログラムを実行して Local Folder を作成します。
  2. Visual Studio で新規プロジェクトから[空白アプリ(ユニバーサル Windows)]を生成します。
    MainPage.xaml のデザイン画面を表示して、ツールから Image を貼り付けて下さい。
    Image Box の名前を image に設定して下さい。
    プロジェクトの作成とツールの貼り付けは C# Store Application を参照して下さい。
        <Grid>
            <Image x:Name="image" HorizontalAlignment="Center" Height="90"
            VerticalAlignment="Center" Width="270" />
        </Grid>
    
  3. MainPage.xaml.cs を修正して私のホームページの画像を描画します。
    BitmapImage bi; を定義してイメージを入力します。
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi;
        public MainPage()
        {
            this.InitializeComponent();
            bi = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
               new Uri("http://www.eonet.ne.jp/~maeda/image/cs.jpg"));
            image.Source = bi;
        }
    
  4. 右三角アイコンをクリック(または F5 キーで)実行を確認して下さい。
    "cs.jpg" の画像が描画されます。

Local Folder に画像を格納して描画

  1. 私のホームページから画像を描画するプログラムを実行すると Local Folder が作成されます。
    Local Folder は「C:\Users\<ユーザ名>\AppData\Local\Packages\<アプリID>\LocalState\」になります。
    今回は下記の Local Folder が作成されていました。
      C:\Users\maeda\AppData\Local\Packages\2155fe6b-6759-491b-bc17-c80e1717f4fd_m3b2cat7fbs4m\LocalState\
    
  2. ウインドウ・エクスプローラで、ここに画像ファイル(ffx2s.jpg) を格納します。
  3. MainPage.xaml.cs を修正して Local Folder から画像を入力して表示します。
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi;
        public MainPage()
        {
            this.InitializeComponent();
            bi = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
                new Uri("ms-appdata:///local/ffx2s.jpg"));
            image.Source = bi;
        }
    
  4. 右三角アイコンをクリック(または F5 キーで)実行を確認して下さい。
    "ffx2s.jpg" の画像が描画されます。
  5. アプリをアンインストールすると Local Folder は完全に削除されます。

Version UP


  1. 2019/08/24 VS Professional 2019 16.2.3 にアップしたのですが VS Professional 16.1.2 のプロジェクトが起動できません。 (^_^;)
    そこで改めて Professional 2019 16.2.3 で作成することにします。
    プロジェクトの作成方法は変わりませんが、ちょっとだけ面倒なところもあります。
  2. Visual Studio で新規プロジェクトから[空白アプリ(ユニバーサル Windows)]を生成します。
  3. デザイン画面を表示すると次のメッセージが表示されました。
    Visual Studio でこのコンテンツを表示するには、新しいバージョンの Windows が必要です。
    Windows 10, version 1903(10.0.18362.0) 以降に更新してください。
    
  4. 当面は MainPage.xaml のソースコードを直接編集します。
        <Grid>
            <Image x:Name="image" HorizontalAlignment="Center" Height="90"
            VerticalAlignment="Center" Width="270" />
        </Grid>
    
  5. MainPage.xaml.cs のソースコードを修正して "cs.jpg" を表示します。
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi;
        public MainPage()
        {
            this.InitializeComponent();
            bi = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
               new Uri("http://www.eonet.ne.jp/~maeda/image/cs.jpg"));
            image.Source = bi;
        }
    
  6. 初めてプログラムを実行すると DialogBox が表示されます。
    DialogBox から開発者モードに設定して下さい。
  7. プログラムを実行すると Local Folder が作成されます。
    Local Folder に "ffx2s.jpg" を格納して下さい。
  8. Local Folder から画像を取得して描画します。
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi;
        public MainPage()
        {
            this.InitializeComponent();
            bi = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
                new Uri("ms-appdata:///local/ffx2s.jpg"));
            image.Source = bi;
        }
    

超初心者のプログラム入門(C# Frame Work)