フローチャート、組織図などの作図に特化したダイアグラムコントロール : XamDiagram の紹介 - WPF アプリケーション

こんにちは！

本記事では、フローチャート、組織図などの作図に特化したダイアグラムコントロール「XamDiagram」について紹介します！


## はじめに

Infragistisc の <a href="https://jp.infragistics.com/products/wpf" target="_blank">Ultimate UI for WPF</a> は、100 を超える WPF コントロールを提供しています。

その中でも、特に人気なのが「XamDataGrid」です。汎用性が高く、どんなアプリケーションに組み込んでも、どんなデータもグリッド形式で可視化でき、グループ化、サマリー、レイアウトの変更、およびレイアウトの保存、読込などの様々な機能、かつ、パフォーマンスの面でも仮想化によるハイパフォーマンスが魅力な WPF コントロールです。

ただし、「XamDataGrid」以外にも 100 を超える WPF コントロールの中で、お客様から「これが欲しかった！」「探し求めていたコントロール、開発要件にマッチしている！」と、非常に評価が高く、コントロール単体で <a href="https://jp.infragistics.com/products/wpf" target="_blank">Ultimate UI for WPF</a> の採用を決めて頂けるほど魅力があるコントロールもあります。

その 1 つが、本記事で紹介する作図に特化した「XamDiagram」コントロールです。

本記事では「XamDiagram」の魅力を紹介したいと思います。

## XamDiagram で作図できること

XamDiagram は非常にカスタマイズ性が高く、ほとんどの作図を実現することができます。

幾つかのサンプルを紹介します。

### 例) フローチャート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/13e52ea8-6b49-2ce3-ff2e-41df54cd657e.png)

### 例) 組織図

![diagram-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/8c247ba6-22f3-dccc-1641-d91ecad0d3b7.gif)


### 例) エンティティ図
![diagram-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3450d1fa-2db1-dab7-80d7-274fe439d3e4.gif)

### 例) タスク管理

![diagram-3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/aa4e9c7d-3aa9-29ca-1982-015d626ec86e.gif)


## XamDiagram の基本操作

XamDiagram は、ダイアグラムを表示部(下記の左) と、ツールボックス (下記図の右) の構成です。

ツールボックスからドラッグアンドドロップすることで作図することが出来ます。

![diagram-4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/772b7d80-28d0-44f3-886a-e96485e92b0a.gif)


## どんなカスタマイズできるか

### オリジナルノードや、フローを作成できる

XamDiagram はオリジナルのノードや、フローを自由に作成できます。

様々な形のノードや、色付けされた線など様々な見た目を実現できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/da13dbf7-67eb-e2e5-6f1f-3cf825f1a52c.png)


### 各ノードの配置構成 も自由にカスタマイズできる

また、整列される配置情報 (レイアウト) をカスタマイズすることもできます。

デフォルトでは、ツリーレイアウト、グリッドレイアウトを提供していますが、カスタムレイアウトを作成することができます。

例えば、サンプルとして、右下方向にダイアグラムのノードを順次配置するカスタムレイアウトの作成方法について、下記のページにて紹介しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/0de84073-778f-02fc-4df8-ef83e169d38f.png)


https://jp.infragistics.com/help/wpf/xamdiagram-configuring-the-layout


## 図形をデータ化し、データベースに格納。他システムとの連携

### データバインディング (MVVM) のサポート

XamDiagram は WPF アプリケーションのデータバインディング機能をサポートしています。

XamDiagram で変更した内容は、ViewModel に通知され、リアルタイムにデータを取り扱う事ができます。

(例えば、下記の動画は、タスク管理のサンプルですが、ツールボックスからタスクをドラッグ＆ドロップすることで新規タスクの追加、それがデータバインディング機能により、グリッドにもリアルタイムで反映されていることが分かります)

<b>XamDiagram でタスクの追加</b>

![diagram-6-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/fabc7b78-654e-6260-12e7-fb9c5af57bb3.gif)

<b>XamDataGrid で追加されたタスクの確認、および変更</b>

![diagram-6-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/1143c7d0-aaf1-8a00-ea88-c09083348540.gif)


また、データバインディングしたデータは、WebAPI 等を経由してデータベースに保存する事もできますので、他システムとの連携も非常に簡単に実現できます。

## まとめ

XamDiagram は非常にカスタマイズ性が高く、プロジェクト要件に適したカスタマイズが可能です。

作図に特化したコントロールなので、全ての開発案件に推奨できるコントロールではありませんが、開発要件にマッチすれば、自前で作成するよりも大幅に開発コストの軽減が見込めます。類似の要件があれば是非試してみて下さい！

## UItimate UI for WPF トライアル版を利用するには

.NET 5対応の <a href="https://jp.infragistics.com/products/wpf" target="_blank">Ultimate UI for WPF</a> は、Microsoft® Officeライクで高パフォーマンスなデスクトップおよびタッチデバイス向けアプリケーションの開発効率化を支援します。高速なグリッドやチャート、動的なデータ視覚化といったWPFコントロールを100種類以上収録しています。

[https://jp.infragistics.com/products/wpf:embed:cite]


UItimate UI for WPF は<a href="https://jp.infragistics.com/products/wpf/download" target="_blank">トライアル版</a>での試用が可能です。<br>

製品に関する技術的な問い合わせは <a href="https://iam.infragistics.com/Account/Register" target="_blank">こちらのページ</a> よりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。<br>

また、製品をご購入をご検討のお客様は <a href="https://jp.infragistics.com/how-to-buy" target="_blank">こちらのページ</a> より


## 開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各開発プラットフォームの技術トレーニング、コンサルテーションの提供、開発全般のご支援を行っています。

https://jp.infragistics.com/service-and-support/professional-service


「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せは<a href="https://jp.infragistics.com/about-us/contact-us#contactform" target="_blank">こちら</a>からお気軽にご相談ください。