やりたいこと
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 23H2Visual 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クラスをどうやってつかったらよいのかわからず。途中で行き詰ってしまいました。
