WPF Diagram - 強力で機能豊富なコントロール
- 組織図、階層ツリー、放射状ツリー、フローチャートの自動レイアウトアルゴリズム。
- フローチャートメーカー、BPMNエディター、フロアプランナーアプリ、外部データソースとの図の視覚化が簡単。
- シームレスなインタラクションと編集機能
.NET 10 support now available
Trusted by the world’s leading companies
概要
WPF Diagramコントロールを使用すると、ユーザーはアプリケーション内でフローチャート、組織図、UML図、スイムレーンチャート、マインドマップ、フロアプランなどをすばやく作成および編集できます。
フローチャート
WPF Diagramコントロールは、フローチャートを構築するためのすべての標準的なフローチャート形状を既製のオブジェクトとして提供しており、単一の呼び出しでダイアグラムサーフェスに簡単に追加できます。フローチャート用に特別に作成された組み込みの自動レイアウトアルゴリズムは、座標を指定することなく、各フローチャートの形状を自動的に配置します。
マインドマップ
アイデアや概念を表す中心ノードと、その周囲に配置される他のノードを定義するための組み込みの自動レイアウトアルゴリズムを使用して、マインドマップ図を作成します。
ダイアグラムリボン
- ダイアグラム リボン コントロールには、エンドユーザーがダイアグラムの読み込みと保存、キャンバスへのダイアグラム アイテムの追加、ダイアグラム アイテム内のテキストの書式設定、形状の並べ替えと色の変更、キャンバス サイズと方向の変更、クリップボード操作の実行を可能にする UI 要素が含まれています。
- リボンは、新しいリボン アイテム/タブを追加したり、既存のリボン アイテム/タブを削除したりするように簡単にカスタマイズできます。
高性能
UI仮想化技術を使用して大きな図を素早く読み込み、ビューポート領域内にあるオブジェクトを選択的に読み込みます。要素の位置に基づいてインデックスを構築する組み込みの空間検索アルゴリズムにより、スムーズなスクロール性能が実現されます。
テンプレート
テキスト、画像、コントロール、パネル、または任意のUIElementやテンプレートを使用してノードを視覚化できます。また、ビジネスオブジェクトにバインドすることもできます。
矢印
矢印 (デコレータ) を使用して、フローチャートや状態図のフロー方向を示します。また、図の種類に基づいてカスタム矢印を作成することもできます。
ルーティング
直交コネクタは、隣接するノードとの重複を避けるために、最短で最もスマートなパスを取ります。
ブリッジング (ラインジャンプ)
ブリッジング (ラインジャンプ) は、コネクタの経路を明確に示し、密度の高い図でコネクタが重なる場所を読みやすくします。
外観
コネクタのルックアンドフィールをカスタマイズします。色、太さ、ダッシュドット、角丸、デコレータをカスタマイズするための豊富なプロパティセットが利用可能です。
ダイナミックポート
ブロック図の側面の任意の場所に接続して、並列接続を行います。それらは自動的に作成または破棄されます。
編集
実行時にテキストを追加および編集します。また、編集できない場合は読み取り専用にマークします。
配置
WPF Diagramには、注釈を配置できる洗練された配置オプションがあります。
- ノードの内側または外側。
- コネクタのソースまたはターゲット端。
- ノードまたはコネクタが移動すると自動的に。
インタラクティブ機能
インタラクティブ機能を使用して、実行時における図の編集体験を向上させます。さらに、マウス、タッチスクリーン、またはキーボードインターフェースを使用して図を簡単に編集できます。
選択とドラッグ
1つ以上のノード、コネクタ、または注釈を選択し、サムまたはハンドラを使用してそれらを編集します。
サイズ変更
ノードを8方向にサイズ変更します。サイズ変更後も形状を維持するために、アスペクト比をロックします。複数のオブジェクトを同時にサイズ変更します。
回転
選択したノードを360度回転させます。
クイックコマンド
削除、接続、複製などの頻繁に使用されるコマンドは、セレクターの近くにボタンとして表示できます。これにより、ツールボックスでボタンを探す代わりに、迅速な操作が可能になります。
整列
WPF Diagramコントロールには、選択したオブジェクトのノードとコネクタを選択境界に整列するための事前定義された整列コマンドがあります。
自動レイアウトアルゴリズム
WPF Diagramコントロールは、事前定義されたレイアウトロジックに基づいてノードを自動的に配置するための自動レイアウトアルゴリズムを提供します。組織図レイアウト、階層ツリーレイアウト、フローチャートレイアウト、マインドマップレイアウト、放射状ツリーレイアウトが組み込まれています。
ステンシル
ステンシルコントロールは、再利用可能なシンボルとノードのギャラリーです。これらのシンボルをダイアグラムの表面に何度でもドラッグ＆ドロップできます。
ズーム、パン、ページに合わせる
図が大きい場合は、図をズームイン/ズームアウトして、より近くまたはより広く表示します。また、図をパンして、ある領域から別の領域に移動します。
概要コントロール
概要コントロールを使用して大規模な図を探索する際のナビゲーションエクスペリエンスを向上させます。これは、完全な図ページの小さなプレビューを表示します。また、その中でズームやパンなどの操作を実行することもできます。
ルーラーと測定単位
ルーラーを使用して、ノードとコネクタのページ原点からの距離を測定します。さらに、ピクセル、インチ、センチメートルなどの異なる単位でオブジェクトのサイズと位置を指定します。
データソース
データソースからのデータに基づいて、ノードとコネクタで図を埋めます。任意の形式のデータを簡単に変換、マッピング、図で利用することができ、コードを記述することなく、いくつかのプロパティを設定するだけです。
その他
さらに、ダイアグラム作成体験を向上させるためのいくつかの機能が利用可能です。
印刷
WPF Diagram コントロールは、印刷プレビューオプション付きの印刷をサポートしています。ページのサイズ、向き、余白、単一ページへの収まりをカスタマイズできます。
MVVMフレンドリー
WPF DiagramコントロールはMVVMフレンドリーで、PrismやMVVM Lightなどの人気のあるMVVMフレームワークとシームレスに連携します。
WPF Diagram コード例
以下のXAMLまたはC#コード例で示されているように、数行のシンプルなコードでWPF Diagramを簡単に開始できます。また、WPFでダイアグラムをレンダリングおよび構成する方法を示すWPF Diagram Exampleもご覧ください。
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DataTemplate x:Key="NodeContentTemplate">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
</DataTemplate>
</ResourceDictionary>
</Window.Resources>
<Grid>
<!--Initializing the SfDiagram control-->
<syncfusion:SfDiagram x:Name="diagram">
<syncfusion:SfDiagram.Theme>
<syncfusion:OfficeTheme/>
</syncfusion:SfDiagram.Theme>
<!--Initializing the Nodes collection-->
<syncfusion:SfDiagram.Nodes>
<syncfusion:NodeCollection>
<syncfusion:NodeViewModel ID="Start" OffsetX="300" OffsetY="100" UnitWidth="100" UnitHeight="40"
Shape="{StaticResource Terminator}"
Content="Start" ContentTemplate="{StaticResource NodeContentTemplate}"/>
<syncfusion:NodeViewModel ID="Input" OffsetX="300" OffsetY="180" UnitWidth="100" UnitHeight="40"
Shape="{StaticResource Process}"
Content="Get Input" ContentTemplate="{StaticResource NodeContentTemplate}"/>
<syncfusion:NodeViewModel ID="Decision" OffsetX="300" OffsetY="280" UnitWidth="100" UnitHeight="80"
Shape="{StaticResource Decision}"
Content="Make Decision" ContentTemplate="{StaticResource NodeContentTemplate}">
<syncfusion:NodeViewModel.Ports>
<syncfusion:PortCollection>
<syncfusion:NodePortViewModel ID="Decision_YesPort" NodeOffsetX="0" NodeOffsetY="0.5" />
<syncfusion:NodePortViewModel ID="Decision_NoPort" NodeOffsetX="1" NodeOffsetY="0.5" />
</syncfusion:PortCollection>
</syncfusion:NodeViewModel.Ports>
</syncfusion:NodeViewModel>
<syncfusion:NodeViewModel ID="Output1" OffsetX="210" OffsetY="360" UnitWidth="100" UnitHeight="40"
Shape="{StaticResource Process}"
Content="Output 1" ContentTemplate="{StaticResource NodeContentTemplate}"/>
<syncfusion:NodeViewModel ID="Output2" OffsetX="390" OffsetY="360" UnitWidth="100" UnitHeight="40"
Shape="{StaticResource Process}"
Content="Output 2" ContentTemplate="{StaticResource NodeContentTemplate}"/>
<syncfusion:NodeViewModel ID="End" OffsetX="300" OffsetY="440" UnitWidth="100" UnitHeight="40"
Shape="{StaticResource Terminator}"
Content="End" ContentTemplate="{StaticResource NodeContentTemplate}"/>
</syncfusion:NodeCollection>
</syncfusion:SfDiagram.Nodes>
<!--Initializing the Connectors collection-->
<syncfusion:SfDiagram.Connectors>
<syncfusion:ConnectorCollection>
<syncfusion:ConnectorViewModel SourceNodeID="Start" TargetNodeID="Input"/>
<syncfusion:ConnectorViewModel SourceNodeID="Input" TargetNodeID="Decision"/>
<syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output1" SourcePortID="Decision_YesPort">
<syncfusion:ConnectorViewModel.Annotations>
<syncfusion:AnnotationCollection>
<syncfusion:AnnotationEditorViewModel Content="Yes" RotationReference="Page"/>
</syncfusion:AnnotationCollection>
</syncfusion:ConnectorViewModel.Annotations>
</syncfusion:ConnectorViewModel>
<syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output2" SourcePortID="Decision_NoPort">
<syncfusion:ConnectorViewModel.Annotations>
<syncfusion:AnnotationCollection>
<syncfusion:AnnotationEditorViewModel Content="No" RotationReference="Page"/>
</syncfusion:AnnotationCollection>
</syncfusion:ConnectorViewModel.Annotations>
</syncfusion:ConnectorViewModel>
<syncfusion:ConnectorViewModel SourceNodeID="Output1" TargetNodeID="End"/>
<syncfusion:ConnectorViewModel SourceNodeID="Output2" TargetNodeID="End"/>
</syncfusion:ConnectorCollection>
</syncfusion:SfDiagram.Connectors>
</syncfusion:SfDiagram>
</Grid>using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Theming;
using System.Windows;
namespace SyncfusionWpfApp1
{
public partial class MainWindow : Window
{
SfDiagram diagram;
public MainWindow()
{
InitializeComponent();
// Create a diagram instance
diagram = new SfDiagram();
// Initializing the Nodes collection
diagram.Nodes = new NodeCollection();
CreateNode("Start", 300, 100, 40, "Terminator", "Start");
CreateNode("Input", 300, 180, 40, "Process", "Get Input");
CreateNode("Decision", 300, 280, 80, "Decision", "Make Decision");
CreateNode("Output1", 210, 360, 40, "Process", "Output 1");
CreateNode("Output2", 390, 360, 40, "Process", "Output 2");
CreateNode("End", 300, 440, 40, "Terminator", "End");
// Initializing the Connectors collection
diagram.Connectors = new ConnectorCollection();
CreateConnector("Start", "Input");
CreateConnector("Input", "Decision");
CreateConnector("Decision", "Output1", "Decision_YesPort", "Yes");
CreateConnector("Decision", "Output2", "Decision_NoPort", "No");
CreateConnector("Output1", "End");
CreateConnector("Output2", "End");
diagram.Theme = new OfficeTheme();
// Add the Diagram control to the Window
this.Content = diagram;
}
private void CreateNode(string id, double offsetX, double offsetY, double height, string shape, string content)
{
NodeViewModel node = new NodeViewModel()
{
ID = id,
OffsetX = offsetX,
OffsetY = offsetY,
UnitWidth = 100,
UnitHeight = height,
Shape = App.Current.MainWindow.Resources[shape] as string,
};
node.Annotations = new AnnotationCollection()
{
new AnnotationEditorViewModel() { Content = content }
};
if (shape == "Decision")
{
node.Ports = new PortCollection()
{
new NodePortViewModel() { ID="Decision_YesPort", NodeOffsetX=0, NodeOffsetY=0.5 },
new NodePortViewModel() { ID="Decision_NoPort", NodeOffsetX=1, NodeOffsetY=0.5 },
};
}
(diagram.Nodes as NodeCollection).Add(node);
}
private void CreateConnector(string sourceId, string targetId, string sourcePortID = default(string), string content = default(string))
{
ConnectorViewModel connector = new ConnectorViewModel()
{
SourceNodeID = sourceId,
TargetNodeID = targetId,
};
if (!string.IsNullOrEmpty(sourcePortID))
{
connector.SourcePortID = sourcePortID;
}
if (!string.IsNullOrEmpty(content))
{
connector.Annotations = new AnnotationCollection()
{
new AnnotationEditorViewModel() { Content = content, RotationReference = RotationReference.Page }
};
}
(diagram.Connectors as ConnectorCollection).Add(connector);
}
}
}最初のWPF 図の作成方法がわからない場合は、弊社のドキュメントが役立ちます。
今すぐ読みたい145+ 以上のWPFコントロール
すべてのコントロール
データビジュアライゼーション
レイアウト
ナビゲーション
入力コントロール
ビジネスインテリジェンス
データサイエンス
リスト&ドロップダウン
ファイルの閲覧者と編集者
よくある質問
なぜSyncfusion WPF Diagramを選ぶべきですか？
- インタラクティブな図を視覚化、作成、編集できます。
最適なパフォーマンスで幅広いノードを読み込みます。
フローチャート図のサポート、多数の組み込みシェイプ、柔軟なデータバインディング。
- ソフトウェアと対話するための機能豊富なUIを提供する市場で最高のWPF Diagramの1つ。
- シンプルな構成とAPI。
Syncfusion WPF Diagramの価格はいくらですか？
WPF Diagramコントロールは単体では販売しておりません。Diagramを含む145個以上のWPFコントロールを含むSyncfusion WPFスイートの一部としてのみ購入できます。Syncfusion Essential Studio for WPFスイートのシングル開発者ライセンスは995.00 USDで、1年間のサポートとアップデートが含まれます。これに加えて、現在有効なプロモーションに基づいて追加割引を提供できる場合があります。追加割引の対象となるかどうか、今すぐ営業チームにお問い合わせください。
Syncfusion WPF Diagram Controlを個別に購入することはできますか？
いいえ、Diagramを含む145個のWPFコントロールは個別に販売しておらず、パッケージとしてのみ販売しております。しかし、他のベンダーがDiagram単体で請求するよりも少しだけ高い価格で提供しています。また、弊社の経験から、お客様は通常、最初はその製品の1つを使用し始め、すぐに複数の製品に拡大するため、145個のWPFコントロールすべてを開発者1人あたり$995の定額料金で提供するのが最善であると判断しました。これに加えて、現在有効なプロモーションに基づいて追加割引を提供できる場合があります。追加割引の対象となるかどうか、今すぐ営業チームにお問い合わせください。
Syncfusion WPF Diagramを無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収益が100万米ドル未満で、開発者が5人以下の企業や個人向けには、無料のコミュニティライセンスもご利用いただけます。
Syncfusion Diagramの始め方について教えてください。
まずは、包括的な利用開始ドキュメントをご覧になることをお勧めします。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
It has more tools and support than its competitors
Syncfusion essential studio samples are really helpfull. Docking Manager, Diagram, Undo-Redo, Mapping, Themes
HALİT A,
Software Developer
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion WPF Diagram リソース
学習
ドキュメント
ドキュメント
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
