MauiとSQliteでdbにデータが保存できなかったListView編

前回(ここの記事の続きです)

neattanaka.hatenablog.com

原因

画像がListViewに表示されなかった原因

  • ListViewはXaml側でItemSourceを指定するだけではなく、BindingContextのMainViewModelに表示用のListが必要だった

解決法

 MainViewModelに該当部分を追加し、ItemSourceをバインドした。

 ちなみに、[ObserverProperty]側はgazouBytesでItemSouceはGazouBytesでバインドする。どうやらCommunityToolkit側で自動にフィールド表記を大文字になおしてくれているっぽい。

  • namespace WorkReview.ViewModels;

    public partial class MainViewModel : ObservableObject
    {


        [ObservableProperty] 
        private string? statusMessage;

        [ObservableProperty] 
        private List<GazouByte>? gazouBytes; //MainPageのListView用のリスト。ListViewにはC#側にリストを作る必要がある。 ↑の部分

        [ObservableProperty] 
        private ImageSource? userPreview; //MainPageのプレビュー用


        private string? gazouName; //ファイル名

        private byte[]? gazouBinary; //画像のバイナリデータ

        private string? gazouExtension; //拡張子情報

     


        public MainViewModel()
        { }

        [RelayCommand]
        private void OnGetAllGazou() //画像リストの取得ボタン
        {
            GazouBytes = App.GazouByteRepo.GetAllGazouBytes();
            StatusMessage = "got all file list"; StatusMessage = "got all file list";

        }

        [RelayCommand]
        private void OnFileSave()
        {
            if (gazouName == null) return;

            var gazouByte = new GazouByte
            {
                GazouName = gazouName!,
                GazouBinary = gazouBinary!, //!はNull出ないことを宣言

                GazouExtension = gazouExtension!,
            };

            App.GazouByteRepo.AddNewGazouByte(gazouByte);

            StatusMessage = "file saved";

        }

        [RelayCommand]
        private async Task OnFileSelect() //非同期でTaskとして結果を返す

        {

            try

            {

                var result = await FilePicker.PickAsync();

                if (result == null) return;


                var fileName = result.FileName;

                if (fileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||

                    fileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))

                {

                    using (var stream = await result.OpenReadAsync())

                    using (var memoryStream = new MemoryStream())

                    {

                        await stream.CopyToAsync(memoryStream);

                        gazouName = fileName;

                        gazouBinary = memoryStream.ToArray();

                        gazouExtension = result.ContentType;


                        var previewStream = new MemoryStream(memoryStream.ToArray());

                        UserPreview = ImageSource.FromStream(() => previewStream);

                    }

                }

                else

                {

                    StatusMessage = "Unsupported file type.";

                }

            }

            catch (Exception ex)

            {

                StatusMessage = $"Error selecting file: {ex.Message}";

            }

        }

    }

あとがき(読まなくても大丈夫です)

 質問ページを見ていただければ分かる通り、かなり質問法でご迷惑をおかけしている。次回以降質問する機会があれば、その辺に気をつけたい。

 まだまだMVVMとXamlに対する理解が足りないと痛感した。
 けれども、個人で1週間ほど悩んだが回答をしてくださった方々はあっさり解決してくださったので、私もいつかそうなりたいと思った。

 質問しただけだがたくさん学べたので良かった。