バージョン

xamDiagram コマンドを使用した UI 要素の構成

トピックの概要

目的

このトピックでは、 xamDiagram™ が提供するコマンドを、メニューやボタンなどの UI 要素で使用する方法を説明します。基本的なコマンドに関連付けられた事前構成済みのキーボード ショートカットのリストについては、 キーボード ショートカットの構成を参照してください。

前提条件

このトピックをより理解するために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、 xamDiagram コントロールおよびその主要機能の概念的な概要を説明します。

このトピックでは、 xamDiagram コントロールで使用できるコマンドの動作ロジックを説明します。

このトピックでは、 xamDiagram コントロールを WPF アプリケーションに追加する方法を説明します。

概要

xamDiagram コマンドを使用した UI 要素の構成

xamDiagram コントロールは、コピー / 貼り付け、すべて選択など、一般的なユーザー操作を実行するコマンド、および項目を編集するコマンドやその項目オプション ペインの表示 / 非表示をサポートします。これらのコマンドの多くは、デフォルトでキーボード ショートカットと関連付けられています (詳細は、 キーボード ショートカットの構成を参照してください)。コマンドは、 MenuButton などの他のコントロールを使用したユーザー インタラクションにより呼び出されるように構成することもできます。

コマンドの呼び出しは、アプリケーションで設定された他の UI 要素の動作と共通している場合があるため、基本的なダイアグラム操作 (コピー、貼り付け、削除、切り取り、すべて選択、元に戻す、やり直し) は、ApplicationCommands として API で実装されます。ダイアグラム固有のロジックを持ち、 DiagramCommands クラスのメンバーとして実装された、 ShowOptionsPaneEnterEditModeCloseOptionsPane などのコマンドもあります。この区別は、2 つのグループからコマンドにアクセスする方法の違いにも表れています。

コントロールがフォーカスを持ち、そのコマンドを呼び出すインタラクションが発生すると、さまざまなコマンドと関連付けられた操作が、ダイアグラムまたはそのいずれかの項目に適用されます。

コマンドの概要表

以下の表は、 xamDiagram コントロールがサポートするコマンドを簡単に説明し、これらのコマンドを事前構成済みのキーボード ショートカットにマップします。

コマンドのプロパティ 詳細 キー

ダイアグラム項目は、現在、その上にある項目の前に移動できます。

ダイアグラム項目は、すべての項目の前に移動できます。

Ctrl+Shift+F

ダイアグラムの項目が選択され、コマンドがキーボード ショートカット (または組み合わせ) に適用されている場合、ダイアグラムの項目をコピーできます。

Ctrl+C

現在選択されているダイアグラムの項目 (複数可) を切り取ることができます。

Ctrl+X

現在選択されているダイアグラムの項目 (複数可) を削除することができます。

Del

選択されている単一の項目は、このコマンドの実行時に編集モードに入ります。

現在、編集中の項目は、このコマンドの実行時に編集モードを終了します。

オプション ペインがフォーカスされている場合にEsc キーを押すと、オプション ペインを非表示にできます。

Esc

コピーしたダイアグラムの項目 (複数可) をダイアグラムに貼り付けることができます。

Ctrl+V

「元に戻す」コマンドを使用してこの操作を元に戻して、操作をやり直すと、ダイアグラムの項目に対する最後の操作が再適用されます。

Ctrl+Y

「すべて選択」コマンドを適用するには、ダイアグラムにフォーカスが設定されている必要があります。

Ctrl+A

ダイアグラム項目は、現在、その背後にある項目の背後に移動できます。

ダイアグラム項目は、すべての項目の背後に移動できます。

Ctrl+Shift+B

オプション ペインの表示が有効になっている場合に、ダイアグラムの項目を選択すると表示されるギア アイコンをクリックすると、オプション ペインを表示することができます。

ダイアグラムに編集された項目があるかどうかに応じて、EnterEditMode コマンドまたは ExitEditMode コマンドを実行します。

F2

元に戻す コマンドを適用すると、最後の操作が取り消され、この操作に関わるすべてのオブジェクトは元の状態に戻ります。

Ctrl+Z

xamDiagram コマンドを使用した UI 要素の構成 - 手順

概要

この手順は、一部の xamDiagram コマンドを使用して UI 要素を構成するプロセスを説明します。ここでは例として、 Menu コントロールの 3 つの MenuItem を、 xamDiagram の項目の Copy コマンド、Paste コマンドおよび EnterEditMode コマンドをトリガーするように構成します。

プレビュー

以下のスクリーンショットは、手順を実行した結果、「コピー」、「貼り付け」、「編集」オプションがダイアグラムに追加されたメニューを示しています。

xamDiagram Configuring UIElements with xamDiagram Commands 1.png

前提条件

この手順を実行するには、以下が必要です。

  • ページを持つ Microsoft® Visual Studio® WPF アプリケーション

  • プロジェクトに追加した必要なアセンブリ参照および名前空間 (詳細は、 xamDiagram をページに追加を参照)

  • ページに追加された xamDiagram コントロール(詳細は、 xamDiagram をページに追加を参照してください。)

概要

以下はプロセスの概要です。

1.Menu コントロールの追加

2.MenuItem オブジェクトを操作するコマンドの構成

3. (オプション) 手順の結果の検証

手順

以下の手順では、 コマンドを呼び出すために、 Menu コントロールの MenuItems を構成する方法を説明します。

1.Menu コントロールの追加

Menu コントロールのインスタンスを作成し、ページに追加します。

XAML の場合:

<Menu VerticalAlignment="Top">
</Menu>

2.MenuItem オブジェクトを操作するコマンドの構成

1.メニュー項目の Copy および Paste を構成します。

ダイアグラムの Copy コマンドおよび Paste コマンドは、ApplicationCommands であるため、 各 MenuItemCommand パラメータを構成し、コピー操作または貼り付け操作を実行します。 この操作は、フォーカスを持つダイアグラムの項目 (およびページに存在し、フォーカスを持つ他の UI 要素) に適用されます。

XAML の場合:

<MenuItem Command=" ApplicationCommands.Copy" />
<MenuItem Command=" ApplicationCommands.Paste"/>

2.編集メニューの項目を構成します。

EnterEditMode コマンドは、DiagramCommands クラスに属するため、このコマンドを特定の MenuItem にバインドするには、MenuItem Command プロパティおよび CommandTarget プロパティを設定します。 CommandTarget プロパティの設定は、コマンドのバインド対象がダイアグラムのオブジェクトであることを指定するために使用します。

XAML の場合:

<MenuItem Header="編集"
        Command="{x:Static ig:DiagramCommands.EnterEditMode}"
        CommandTarget="{Binding ElementName=diagram}"/>

3.メニュー項目をメニューに追加します。

XAML の場合:

<Menu VerticalAlignment="Top">
<MenuItem Command=" ApplicationCommands.Copy" />
<MenuItem Command=" ApplicationCommands.Paste" />
<MenuItem Header="編集"
        Command="{x:Static ig:DiagramCommands.EnterEditMode}"
          CommandTarget="{Binding ElementName=diagram}"/>
</Menu>

3.(オプション) 手順の結果の検証

この手順を実行すると、プレビューに示すような機能メニューが設定されます。

メニュー項目の機能をテストするには、ノードなどを選択し、メニューの Copy をクリックし、Paste を使用して、ダイアグラムの任意の場所に貼り付けます。

全コード

以下は、この手順の完全なコードです。

XAML の場合:

<Grid.RowDefinitions>
      <RowDefinition Height="auto"/>
      <RowDefinition Height="5*"/>
            </Grid.RowDefinitions>
      <Menu VerticalAlignment="Top">
            <MenuItem Command="ApplicationCommands.Copy"/>
                <MenuItem Command="ApplicationCommands.Paste"/>
                <MenuItem Header="編集"
                          Command="{x:Static ig:DiagramCommands.EnterEditMode}"
                          CommandTarget="{Binding ElementName=diagram}"/>
        </Menu>
      <ig:XamDiagram x:Name="diagram"
                   Width="300"
                       Height="500"
                       >
            <ig:DiagramNode Name="node1"
                            Content="Start"
                            Height="100"
                            Width="150"
                            Position="200,20"/>
            <ig:DiagramNode Name="node2"
                            Content="Condition"
                            Height="100"
                            Width="150"
                            NodeType="Rhombus"
                            Position="200,200"/>
            <ig:DiagramNode Name="node3"
                            Content="End"
                            Height="100"
                            Width="150"
                            NodeType="Ellipse"
                            Position="200,380"/>
            <ig:DiagramConnection Name="conn12"
                                  StartNodeKey="node1"
                                  EndNodeKey="node2"
                                  ConnectionType="Straight"/>
            <ig:DiagramConnection Name="conn23"
                                  StartNodeKey="node2"
                                  EndNodeKey="node3"
                                  ConnectionType="Straight"
                                  Content="Yes"/>
            <ig:DiagramConnection Name="conn21"
                                  StartNodeKey="node2"
                                  EndNodeKey="node1"
                                  StartNodeConnectionPointName="Right"
                                  EndNodeConnectionPointName="Top"
                                  Content="No"/>
            <ig:DiagramConnection Name="connStart"
                                  StartPoint="175,70"
                                  EndPoint="195,70"/>
        </ig:XamDiagram>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、 xamDiagram コントロールで実行されるユーザー インタラクションのすべてのタスクの概要を説明します。

このトピックでは、 xamDiagram で元に戻す / やり直し操作を構成する方法を説明します。このトピックでは、 xamDiagram コントロール専用の元に戻す / やり直しマネージャーの構成を説明します。

このトピックでは、 xamDiagram コマンドに関連付けられたキーボード ショートカットを変更する方法について説明します。