syncfusion-wpf-smart-datagrid

Syncfusion WPF Smart DataGrid の実装

このスキルでは、自然言語による並べ替え、フィルタリング、グループ化、強調表示を可能にする AI 搭載のデータグリッドコントロール、Syncfusion WPF Smart DataGrid（SfSmartDataGrid）の実装方法を説明します。Smart DataGrid はユーザーのプロンプトを解釈し、状況に応じた操作を適用するため、複雑なデータ操作を直感的かつ効率的に行えます。

このスキルを使用する場面

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• AI 搭載のデータグリッドを実装する。自然言語コマンドに対応した WPF アプリケーションを構築します
• 自然言語による並べ替え、フィルタリング、グループ化、または強調表示を有効にする。手動での設定は不要です
• Azure OpenAI との統合を設定する。グリッドのインテリジェンス機能を利用します
• データ駆動型アプリケーションを作成する。ユーザーが会話形式のプロンプトでグリッドを操作します
• 複数列の操作を適用する。1 つのテキストコマンドで並べ替え、フィルタリング、グループ化を行います
• 直感的なデータ探索インターフェイスを構築する。AssistView と提案プロンプトを使用します
• AI の動作をカスタマイズする。強調表示の色、初期プロンプト、スマートアクションの有効化／無効化などを設定します

このスキルは、AI を活用して複雑なデータセットとのユーザーインタラクションを簡素化する、最新の WPF データアプリケーションに不可欠です。

コンポーネントの概要

SfSmartDataGrid は、次の機能によって従来のデータグリッドを強化します。

• AI による並べ替え – 自然言語でデータを並べ替えます（例：「都市を降順で並べ替える」）
• インテリジェントなフィルタリング – 平易な言葉で条件を指定してフィルターを適用します（例：「Country が Germany で、Revenue が 1000 より大きい行をフィルターする」）
• スマートなグループ化 – AI プロンプトでデータを整理します（例：「Country と ShipCity でグループ化する」）
• 行とセルの強調表示 – 条件を説明してデータを目立たせます（例：「Total が 1000 より大きい行を LightPink で強調表示する」）
• AssistView との統合 – プロンプトの入力と AI の応答の表示に使用する、チャット形式のインターフェイス
• カスタマイズ可能な提案 – よく使う操作へユーザーを導く定義済みプロンプト

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• Smart DataGrid 用の新しい WPF プロジェクトの作成
• 必要な NuGet パッケージ（Syncfusion.SfSmartComponents.WPF）のインストール
• アセンブリの依存関係（Syncfusion.Data.WPF、Syncfusion.SfGrid.WPF など）の理解
• デザイナー、XAML、または C# によるコントロールの追加
• グリッドの基本的な初期化とセットアップ

データモデルとバインディング

📄 参照: references/data-model-binding.md

• INotifyPropertyChanged を実装するデータモデルクラスの作成
• ObservableCollection を使用した ViewModel の構築
• ItemsSource とデータコレクションのバインディング
• 列（GridTextColumn、GridNumericColumn、GridDateTimeColumn）の設定
• AutoGenerateColumns と手動での列定義
• AssistView のメッセージを区別する CurrentUser の設定

AI サービスのセットアップ

📄 参照: references/ai-service-setup.md

• App.xaml.cs での Azure OpenAI サービスの登録
• API キーとエンドポイントを使用した AzureOpenAIClient の設定
• AI 統合のための IChatClient のセットアップ
• SyncfusionAIExtension を使用した AI サービスの設定
• AI サービス接続の問題のトラブルシューティング

AI による並べ替えとグループ化

📄 参照: references/ai-sorting-grouping.md

• 自然言語による単一列および複数列の並べ替え
• プロンプトによる昇順および降順の適用
• コマンドによる並べ替えの解除
• AI による単一レベルおよび複数レベルのグループ化
• 複数のグループ化操作の組み合わせ
• 解除コマンドによるグループ化の削除

AI によるフィルタリングとハイライト表示

📄 参照： references/ai-filtering-highlighting.md

• 自然言語の条件を使ったフィルターの適用
• フィルター演算子（equals、contains、greaterThan、lessThan、between）の使用
• AND／OR ロジックによるフィルターの組み合わせ
• 適用済みフィルターの解除
• 条件に基づいた行とセルのハイライト表示
• ハイライトに使用するカスタムカラー（名前、16 進数、RGB）の指定
• デフォルトのハイライトブラシの使用
• ハイライトの選択的な解除（すべて、行のみ、セルのみ）

AI によるエクスポート

📄 参照： references/ai-exporting.md

• 自然言語のコマンドを使ったグリッドデータの Excel 形式へのエクスポート
• 自然言語のコマンドを使ったグリッドデータの PDF 形式へのエクスポート
• Excel と PDF の両方の形式への同時エクスポート
• エクスポートに含まれるデータ（フィルター、並べ替え、表示されている行）の把握
• エクスポートコマンドの自然言語構文パターン
• ユースケースに応じた適切な形式の選択（分析には Excel、長期保存には PDF）
• 現在の状態を維持した、フィルター適用済みおよび並べ替え済みデータのエクスポート

カスタマイズとイベント

📄 参照： references/customization-events.md

• メッセージを区別するための CurrentUser の設定
• 定義済みプロンプトの Suggestions の設定
• 初期コマンドを自動実行する Prompt プロパティの使用
• EnableSmartActions によるスマートアクションの有効化または無効化
• 視覚的な強調のための HighlightBrush のカスタマイズ
• ExecutePrompt メソッドによるプロンプトのプログラムからの実行
• リクエストを割り込んで処理またはキャンセルする AssistViewRequest イベントの処理

クイックスタートの例

AI 搭載 Smart DataGrid をセットアップする最小限の例を紹介します。

XAML：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        xmlns:local="clr-namespace:WpfApplication1"
        Title="Smart DataGrid Demo" Height="600" Width="900">
    
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>

    <Grid>
        <syncfusion:SfSmartDataGrid x:Name="SmartGrid" 
                                    ItemsSource="{Binding OrderInfoCollection}" 
                                    CurrentUser="{Binding CurrentUser}" 
                                    Suggestions="{Binding AiSuggestions}" 
                                    EnableSmartActions="True"
                                    ColumnSizer="Star">
            <syncfusion:SfSmartDataGrid.Columns>
                <syncfusion:GridNumericColumn MappingName="OrderID" HeaderText="Order ID"/>
                <syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Customer"/>
                <syncfusion:GridTextColumn MappingName="ProductName" HeaderText="Product"/>
                <syncfusion:GridNumericColumn MappingName="Quantity"/>
                <syncfusion:GridNumericColumn MappingName="Freight"/>
            </syncfusion:SfSmartDataGrid.Columns>
        </syncfusion:SfSmartDataGrid>
    </Grid>
</Window>

App.xaml.cs（AI サービスの登録）：

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.UI.Xaml.SmartComponents;
using System.ClientModel;
using System.Windows;

public partial class App : Application
{
    public App()
    {
        string azureApiKey = "<YOUR-API-KEY>";
        Uri azureEndpoint = new Uri("<YOUR-ENDPOINT>");
        string deploymentName = "<YOUR-DEPLOYMENT>";

        AzureOpenAIClient azureClient = new AzureOpenAIClient(
            azureEndpoint,
            new ApiKeyCredential(azureApiKey)
        );

        IChatClient chatClient = azureClient
            .GetChatClient(deploymentName)
            .AsIChatClient();

        SyncfusionAIExtension.Services.AddSingleton<IChatClient>(chatClient);
        SyncfusionAIExtension.ConfigureSyncfusionAIServices();
    }
}

よくあるパターン

パターン 1：自然言語による並べ替え

ユーザーのニーズ： 手動で設定せずに、複数の列でデータを並べ替える。

プロンプトの例：

• "sort by city in descending"
• "sort by city column in descending and Revenue ascending"
• "clear sorting"

使用する場面： テキストコマンドを使って、素早く直感的に並べ替えたい場合。

パターン 2：条件によるインテリジェントなフィルタリング

ユーザーのニーズ： 平易な言葉で複雑なフィルターを適用する。

プロンプトの例：

• "filter Country equals Germany"
• "filter Country equals Germany AND Revenue greaterThan 1000"
• "filter OrderID between 20251001 and 20251020"
• "clear filters"

使用する場面： 述語を手動で作成せずに、条件付きでデータをフィルタリングしたい場合。

パターン 3：複数階層でのグループ化

ユーザーのニーズ： データを階層的に整理する。

プロンプトの例：

• "group by Country"
• "group by Country and ShipCity"
• "clear grouping"

使用する場面： 整理された入れ子状のグループでデータを分析したい場合。

パターン 4：条件付きハイライト表示

ユーザーのニーズ： 重要なデータを視覚的に強調する。

プロンプトの例：

• "highlight rows where Total > 1000 color LightPink"
• "highlight cells in OrderID lessThan 1005 color Red"
• "highlight rows where Total > 1000 color LightPink AND highlight cells in OrderID lessThan 1005 color Red"
• "clear highlight" / "clear row highlight" / "clear cell highlight"

使用する場面： 重要なデータポイントを視覚的に示したい場合。

パターン 5：プログラムによるプロンプトの実行

ユーザーのニーズ： AssistView を開かずに AI アクションを実行する。

実装：

// Execute prompt directly from code
SmartGrid.ExecutePrompt("Sort the OrderID by Descending");
SmartGrid.ExecutePrompt("filter PaymentStatus equals Not Paid");

使用する場面： アプリケーションのロジックによって AI アクションを実行するプログラムによるワークフロー。

パターン 6：リクエストの割り込みと検証

ユーザーのニーズ： AI リクエストを実行前に制御または検証する。

実装：

SmartGrid.AssistViewRequest += (sender, e) =>
{
    // Access the prompt
    string userPrompt = e.Prompt;
    
    // Optionally cancel the request
    if (userPrompt.Contains("forbidden"))
    {
        e.Cancel = true;
    }
};

使用する場面： 特定の AI 操作を検証、記録、または防止する必要がある場合。

主なプロパティ

プロパティ	型	用途
ItemsSource	IEnumerable	グリッドのデータソース
CurrentUser	Author	AssistView のメッセージ配置に使用するユーザーを識別します（必須）
Suggestions	ObservableCollection<string>	AssistView に表示する定義済みのプロンプト
Prompt	string	AssistView を開いたときに自動実行される初期プロンプト
EnableSmartActions	bool	AI を活用したアクションを有効または無効にします（既定値：false）。自然言語による並べ替え、フィルタリング、グループ化、ハイライトなどの Smart/AI 機能に必要です。Syncfusion.SfSmartComponents.WPF アセンブリの機能の一部です（アセンブリの詳細は docs/getting-started.md を参照）。
HighlightBrush	SolidColorBrush	色が指定されていない場合のハイライト用の既定のブラシ
AutoGenerateColumns	bool	データモデルのプロパティから列を自動生成します
ColumnSizer	GridLengthUnitType	列のサイズ変更モード（Star、Auto、None）

主なメソッド

メソッド	用途
ExecutePrompt(string prompt)	AssistView を使わずに AI アクションをプログラムから実行します

主なイベント

イベント	用途
AssistViewRequest	ユーザーがリクエストを送信したときに発生します。キャンセルすることもできます

一般的なユースケース

1. ビジネスインテリジェンスダッシュボード – アナリストが自然言語クエリでデータを探索できるようにします
2. 注文管理システム – 会話形式のコマンドで注文のフィルタリング、並べ替え、ハイライトを行えるようにします
3. 財務レポート – 財務データの分析に複雑なフィルターやグループ化を適用します
4. 顧客関係管理（CRM） – 直感的なプロンプトで顧客データをクエリします
5. 在庫管理 – ハイライトを使って重要な在庫レベルをすばやく特定します
6. 売上分析 – 地域、製品、期間ごとに売上データをグループ化して並べ替えます
7. ログビューアー – 自然言語の条件でログをフィルタリングします
8. データエクスポートツール – AI コマンドを使ってエクスポート前にデータを事前にフィルタリングします

次のステップ

Smart DataGrid を実装した後は、次の手順に進みます。

1. 一般的な操作へユーザーを誘導するため、推奨プロンプトを設定します
2. AI サービスの接続と応答の正確性をテストします
3. アプリケーションのテーマに合わせてハイライトの色をカスタマイズします
4. AssistViewRequest イベントを介してユーザープロンプトの検証を追加します
5. 自動化されたワークフロー向けに、プログラムからプロンプトを実行する方法を検討します