UWP datagrid 入門

やりたいこと

Microsoftのこちらのページの通りにコードを書いて、
下図のようなdatagridが表示されるまでをやってみます。

「How to: Add a DataGrid control to a page」
https://learn.microsoft.com/ja-jp/windows/communitytoolkit/controls/datagrid_guidance/datagrid_basics

自分がよくわかっていないだけだと思うのですが、
Microsoftのページの記載だけだと、途中で一回行き詰りました。
つまずいたあたりを中心に忘れないように整理しておきます。

環境

Win11 23H2
Visual Studio 2022 community

Step1.プロジェクト作成

Visual Studioで「空白のアプリ(ユニバーサルWindows)」のプロジェクトを作成する。

プロジェクト名や、ターゲットバージョンは適当に設定します。

Step2.datagridのパッケージを追加

プロジェクトメニュー > NuGetパッケージの管理...を選択。
参照を選択
datagridで検索
「Microsoft.Toolkit.UWP.UI.Controls.DataGrid」をインストールする。

Step3.xamlの編集

MainPage.xamlに下記の行を追加します。

Step4.datagridに値を入れるクラスを準備する (ここでつまずいた)

ソリューションエクスプローラー > 追加 > 新しい項目 > クラス
MyViewModelというクラスを追加する。
MyViewModelの中で、参考にしたサイトにあるCustomerクラスを呼び出すようにします。
MyViewModelのクラスとCustomerクラスがこうなります。
Customerクラスは参考サイトのままです。

view plainprint?

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Text;  
5. using System.Threading.Tasks;  
6.   
7. namespace App11  
8. {  
9.     public class MyViewModel  
10.     {  
11.         private List<customer> _customers = new List<customer>();  
12.   
13.         public MyViewModel()  
14.         {  
15.             _customers = Customer.Customers();  
16.         }  
17.   
18.         public List<customer> customers  
19.         {  
20.             get { return _customers; }  
21.         }  
22.     }  
23.   
24.     public class Customer  
25.     {  
26.         public String FirstName { get; set; }  
27.         public String LastName { get; set; }  
28.         public String Address { get; set; }  
29.         public Boolean IsNew { get; set; }  
30.   
31.         public Customer(String firstName, String lastName,  
32.             String address, Boolean isNew)  
33.         {  
34.             this.FirstName = firstName;  
35.             this.LastName = lastName;  
36.             this.Address = address;  
37.             this.IsNew = isNew;  
38.         }  
39.   
40.         public static List<customer> Customers()  
41.         {  
42.             return new List<customer>(new Customer[4] {  
43.             new Customer("A.", "Zero",  
44.                 "12 North Third Street, Apartment 45",  
45.                 false),  
46.             new Customer("B.", "One",  
47.                 "34 West Fifth Street, Apartment 67",  
48.                 false),  
49.             new Customer("C.", "Two",  
50.                 "56 East Seventh Street, Apartment 89",  
51.                 true),  
52.             new Customer("D.", "Three",  
53.                 "78 South Ninth Street, Apartment 10",  
54.                 true)  
55.         });  
56.         }  
57.     }  
58. }  
59.   
60. </customer></customer></customer></customer></customer>  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App11
{
    public class MyViewModel
    {
        private List _customers = new List();

        public MyViewModel()
        {
            _customers = Customer.Customers();
        }

        public List customers
        {
            get { return _customers; }
        }
    }

    public class Customer
    {
        public String FirstName { get; set; }
        public String LastName { get; set; }
        public String Address { get; set; }
        public Boolean IsNew { get; set; }

        public Customer(String firstName, String lastName,
            String address, Boolean isNew)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Address = address;
            this.IsNew = isNew;
        }

        public static List Customers()
        {
            return new List(new Customer[4] {
            new Customer("A.", "Zero",
                "12 North Third Street, Apartment 45",
                false),
            new Customer("B.", "One",
                "34 West Fifth Street, Apartment 67",
                false),
            new Customer("C.", "Two",
                "56 East Seventh Street, Apartment 89",
                true),
            new Customer("D.", "Three",
                "78 South Ninth Street, Apartment 10",
                true)
        });
        }
    }
}

MainPage.xaml.cs側でMyviewModelをnewします。

view plainprint?

1. namespace App11  
2. {  
3.     /// <summary>  
4.     /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。  
5.     /// </summary>  
6.     public sealed partial class MainPage : Page  
7.     {  
8.         public MyViewModel mv = new MyViewModel();  
9.   
10.         public MainPage()  
11.         {  
12.             this.InitializeComponent();  
13.         }  
14.     }  
15. }  

namespace App11
{
    /// 

    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// 
    public sealed partial class MainPage : Page
    {
        public MyViewModel mv = new MyViewModel();

        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

Step5.xamlの編集(2)

MainPage.xamlに下記のように更新します

結果

実行するとデータグリッドビューが表示されます。
よかった。

苦労した点

msのサイトに記載のcustomerクラスをどうやってつかったらよいのかわからず。
途中で行き詰ってしまいました。

UWP データバインディングの勉強

 こちらのページで勉強する予定。

https://learn.microsoft.com/ja-jp/training/modules/implement-data-binding-in-windows-10-app/?source=recommendations

UWPでデータグリッドを使おうと思って↓のページを参考に進めてたのですが、Viewmodelがでてきたところで挫折してしまいました。

なので、まずは↑のページでデータバインディングを勉強しようと思ってます。

https://learn.microsoft.com/ja-jp/windows/communitytoolkit/controls/datagrid_guidance/datagrid_basics

MVVMよくわらかない...