趣味のプログラム: 3月 2024

2024年3月30日土曜日

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クラスは参考サイトのままです。

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します。

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

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

Step5.xamlの編集(2)

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

結果

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

苦労した点

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

趣味のプログラム