WinUI 3のデータグリッドを試してみる(1)

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はWinUI 3アプリケーションにデータグリッドを実装する方法ついてお届けします。

本記事ではWinUI 3アプリケーション開発向けのライブラリ「Windows Community Toolkit」に含まれるデータグリッドコントロール「DataGrid」の実装方法を確認してみます。

WinUI 3とは?

「WinUI 3」はWindowsデスクトップアプリケーション開発向けの最新のネイティブUIフレームワーク「Windows UI Library(WinUI)」の最新バージョンです。Windows 10や11で採用されているFluentデザイン(Fluent Design System)に対応しており、直観的で使いやすい機能とスタイルを備えたコントロールを利用できます。

WinUI 3で利用できるコントロールは?

WinUI 3で利用可能なコントロールは以下のページにリストアップされています。

単純なボタンから、グリッド ビューのような強力なデータ コントロールまで、ユーザーが使用できる 45 種類以上のコントロールが用意されています。 これらのコントロールは Fluent Design System の一部です。すべでのデバイスやあらゆる画面サイズで見栄えがよく、力強い、スケーラブルな UI を作成できます。

https://docs.microsoft.com/ja-jp/windows/apps/design/controls/

WinUI 3で利用できるコントロールのサンプルは?

「WinUI 3 Controls Gallery」というデモアプリケーションがWindows Storeから提供されています。

WinUI 3 Controls Gallery

WinUI 3 Controls Gallery

同じような見た目のアプリケーションで「XAML Controls Gallery」がありますが、こちらはUWP用のWinUI 2向けのデモアプリケーションになるので注意してください。

XAML Controls Gallery

なお、WinUI 3 Controls GalleryからリンクしているMicrosoftやGitHubのコンテンツですが、現時点では未だにUWP用のWinUI 2向けのコンテンツを参照している箇所が多数あります。この辺は今後の更新が待たれるところですが、現時点では注意して内容を把握する必要があります。

Windows Community Toolkitとは?

WinUI 3アプリケーション向けのヘルパー、拡張、カスタムコントロールを収録しているライブラリです。

The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer task for building UWP and .NET apps for Windows 10, and now for WinUI 3 as well! 

https://devblogs.microsoft.com/ifdef-windows/windows-community-toolkit-for-project-reunion-0-5/

Windows Community Toolkit 💗 WinUI 3

https://github.com/CommunityToolkit/WindowsCommunityToolkit

Windows Community Toolkitで利用できるコントロールのサンプルは?

「Windows Community Toolkit Sample App」 というデモアプリケーションがWindows Storeから提供されています。

Windows Community Toolkit Sample App

Windows Community Toolkit Sample App

このWindows Community Toolkit Sample AppにはDataGridのサンプルも含まれていて動作を確認することができます。

Windows Community Toolkit Sample App

WinUI 3アプリケーションにDataGridを実装してみる

では実際にWinUI 3アプリケーションにWindows Community ToolkitのDataGridを追加してみます。

WinUI 3アプリケーションの作成

まず、Visual Studio 2022を起動してプロジェクトテンプレート「空のアプリ、パッケージ化 (デスクトップの WinUI 3 )」を選択し、WinUI 3アプリケーションを作成します。

WinUI 3アプリケーションにDataGridを実装してみる
WinUI 3アプリケーションにDataGridを実装してみる

NuGetパッケージの追加

作成したプロジェクト「WinUI3App1」にWindows Community Toolkitのパッケージを追加します。ここでの注意点ですが、パッケージの名称が「Microsoft.Toolkit.***」となっているのは UWP用のWinUI 2向けのパッケージになります。WinUI 3用のパッケージは「CommunityToolkit.***」という名前になっています。詳しくは以下のコンテンツを参考にしてください。

NuGet Packages

今回は「CommunityToolkit.WinUI.UI.Controls」を追加します。

NuGetパッケージの追加

DataGridの追加

DataGridを追加するために「CommunityToolkit.WinUI.UI.Controls」への参照をMainWindow.xamlに設定します。

<Window
    x:Class="WinUI3App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

これでDataGridを追加できるようになりました。StackPanelに追加されているButtonコントロールを削除してDataGridを追加します。

<Window
    x:Class="WinUI3App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <controls:DataGrid x:Name="WinUI3DataGrid" />
    </StackPanel>
</Window>
現時点では、WinUI 3アプリケーション開発においてWPFやUWPのXAMLデザイナのようなGUIベースでコントロールを追加することはできない状況です。そのため、上記のように直接XAMLでコントロールを追加する必要があります。

データソースの追加

プロジェクトにDataSource.csを追加して、そこに新しいデータソース用のクラスCustomerを追加します。

public class Customer
{
    public int Id { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string Address { get; set; }
    public string PostalCode { get; set; }

    public Customer(int id, string firstName, string lastName, string address, string postalcode)
    {
        this.Id = id;
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Address = address;
        this.PostalCode = postalcode;
    }

    public static List<Customer> Customers()
    {
        return new List<Customer>()
        {
            new Customer(1, "紫山", "太郎", "仙台市泉区紫山", "981-3205"),
            new Customer(2, "寺岡", "次郎", "仙台市泉区寺岡", "981-3204"),
            new Customer(3, "高森", "三郎", "仙台市泉区高森", "981-3203" ),
            new Customer(4, "桂", "四郎", "仙台市泉区桂", "981-3134" )
        };
    }
}

MainWindow.xaml.csでDataGridに上記のデータソースを設定します。データソースの設定方法はWPFやUWP、Xamarinなどと同じ感覚で設定できます。

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();

        WinUI3DataGrid.ItemsSource = Customer.Customers();
    }
}

上記はコードビハインドでItemSourceにデータを追加していますが、以下のコードのようにXAMLでItemSourceにデータを追加することもできます。

<Window
    x:Class="WinUI3App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <controls:DataGrid x:Name="WinUI3DataGrid" ItemsSource="{x:Bind local:Customer.Customers() }" />
    </StackPanel>
</Window>

ビルドして実行してみる

ここまででDataGridを追加したWinUI 3アプリケーションを作成できたので、ビルドして実行してみます。以下のようにDataGridにデータソースから追加したデータが表示されれば完成です。

NuGetパッケージの追加

さいごに

今回は初回ということでDataGridの追加方法を紹介しましたが、WPFやUWPでDataGridを使用していた方は特に違和感なくWinUI3のDataGridも実装できそうだと思いました。

WinUI 3のDataGridの機能については、引き続き次回以降の記事で紹介しています。