【備忘録】XAMLのListViewにbyte[]型のイメージを展開する

現在WPFを勉强しているのですが、このようにListViewにイメージをアイコン状に展開させようとしたのですが難渋しました。

解ってしまえばなんともないことなのですが、そこは英語力が乏しい悲しさ。

日本語の参考記事がなかなか見当たらず、悩みに悩んだので日本語で備忘録です。

 

 

【ListViewとバインドするためのクラス】

 public class Photo
 {
     public string Title { get; set; }   // 表題用
     public string Url { get; set; }    // ファイルの場合用
     public byte[] ByteImage { get; set; }  // byte[]の場合用
 }

 

【jpegファイルから直接イメージを展開するコード】

 

private void addImagesToListView()
{
    // アプリ実行ディレクトリ取得
    string exeDir = AppDomain.CurrentDomain.BaseDirectory;
    // ファイルの場所pathを文字列として代入
    string imageU1 = (exeDir + @"Images\IMG1.jpeg");
    string imageU2 = (exeDir + @"Images\IMG2.jpeg");
    string imageU3 = (exeDir + @"Images\IMG3.jpeg");
    this.ListView1.ItemsSource = new Photo[]
    {
        // ファイルからイメージを表示させる場合
        new Photo{Title="Phot11",Url =imageU1},
        new Photo{Title="Phot22",Url=imageU2},
        new Photo{Title="Phot33",Url=imageU3}
    };
}

 

【jpegファイルから直接展開する場合のxamlの記述】

<!-- ListViewの配置 -->
<ListView x:Name="ListView1" SelectionMode="Extended"                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
      <!-- 画像をグリッド状に並べる -->
       <ListView.ItemsPanel>
           <ItemsPanelTemplate>
                <WrapPanel/>
           </ItemsPanelTemplate>
       </ListView.ItemsPanel>
       <!-- 子要素にUIを割り当てる -->
       <ListView.ItemTemplate>
           <DataTemplate>
                <Grid Width="150" Height="200">
                   <Image Source="{Binding Url}"></Image>
                   <TextBlock Text="{Binding Title}"></TextBlock>
               </Grid>
           </DataTemplate>
       </ListView.ItemTemplate>

 </ListView>

Sourceにバインドするのは、jpegファイルの場所の「文字列」を引き当てます。

 

【byte[]のイメージを展開するコード】

private void addImagesToListView()
{
    // アプリ実行ディレクトリ取得
    string exeDir = AppDomain.CurrentDomain.BaseDirectory;
    // byte[]からイメージを表示させる場合(故意にjpegをImage型を介してbyte[]に変換している）
    ImageConverter imageComverter = new();
    Image image1 = Image.FromFile(@"Images\IMG1.jpeg");
    byte[] imageByte1 = (byte[])imageComverter.ConvertTo(image1, typeof(byte[]))!;
    Image image2 = Image.FromFile(@"Images\IMG2.jpeg");
    byte[] imageByte2 = (byte[])imageComverter.ConvertTo(image2, typeof(byte[]))!;
    Image image3 = Image.FromFile(@"Images\IMG3.jpeg");
    byte[] imageByte3 = (byte[])imageComverter.ConvertTo(image3, typeof(byte[]))!;
    this.ListView1.ItemsSource = new Photo[]
    {
    	// byte[]からイメージを表示させる場合
    	new Photo{Title="Phot11",ByteImage =imageByte1},
        new Photo{Title="Phot22",ByteImage=imageByte2},
        new Photo{Title="Phot33",ByteImage=imageByte3}
     };
}

【byte[]のイメージを展開する場合のxamlの記述】

<!-- ListViewの配置 -->
<ListView x:Name="ListView1" SelectionMode="Extended"                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
      <!-- 画像をグリッド状に並べる -->
       <ListView.ItemsPanel>
           <ItemsPanelTemplate>
                <WrapPanel/>
           </ItemsPanelTemplate>
       </ListView.ItemsPanel>
       <!-- 子要素にUIを割り当てる -->
       <ListView.ItemTemplate>
           <DataTemplate>
                <Grid Width="150" Height="200">
                   <Image Source="{Binding ByteImage}"></Image>
                   <TextBlock Text="{Binding Title}"></TextBlock>
               </Grid>
           </DataTemplate>
       </ListView.ItemTemplate>

 </ListView>

Sourceにバインドするのはbyteデータですが、xamlの記述からだけでは、前述のファイル場所の文字列を引き当てる場合と区別がつきません。

そういうわけで、あえてByte型であることが伝わるような変数名にしました。

 

ちなみに、最初はImageクラスをそのままバインドすることを試みましたが、うまくいきませんでした。

 

現在、以前VBでつくった連用日記アプリを、WPFで作り直そうとしています。

ExcelのVBAからVisual Basicを通じて、ずっとWindowsFormに慣れ親しんできたのでXAMLは難しい～～。えーんえーんえーん