次の方法で共有

アプリケーション フローの作成

  • [アーティクル]

　[SketchFlow マップ] パネルはグラフ エディターで、アプリケーションの構造、フロー、ナビゲーション、およびコンポジションの定義に使用できます。

[SketchFlow マップ] パネルを使用してアプリケーションの構造に注目したり、アートボードを使用して各画面のコンテンツに注目することができます。

ナビゲーション画面

プロトタイプのすべての画面は、[SketchFlow マップ] パネルのノードで表されます。ナビゲーション接続を使用して画面間のナビゲーションを示すことにより、1 つの画面を他の画面に接続することができます。SketchFlow プレーヤーでプロトタイプを実行する場合、ナビゲーション ノード間の接続は [ナビゲーション] パネルの画面間のナビゲーションをシミュレートします。

コンポーネント画面も [SketchFlow マップ] パネルに表示されます。詳細については、このトピックで後に説明する「コンポーネント画面」を参照してください。

SketchFlow の画面間のナビゲーションを定義するには、いくつかの方法があります。[SketchFlow マップ] パネルの既存の画面から、新しい接続画面を作成することができます。[SketchFlow マップ] パネルの 2 つの未接続の画面を接続できます。または、画面のオブジェクトを右クリックし、ショートカット メニューの [移動先] コマンドを使用してナビゲーションを定義できます。

新しい接続されたナビゲーション画面をアプリケーション フローに追加するには

  1. 新しい SketchFlow プロジェクトを作成すると、画面 1.xaml という名前の新しいファイルが作成されます。このファイルは [SketchFlow マップ] パネルにノードとして、[プロジェクト] パネルに UserControl として表示されます。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    新しい SketchFlow プロジェクトを開くには、｢プロトタイプ プロジェクトの作成｣を参照してください。

    ポインターを [SketchFlow マップ] パネルの左上隅にある一番目のノード (画面 1) の上に移動します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(JA-JP,Expression.30).png

  2. ポインターをビジュアル メニューの左アイコンの上に移動します。アイコンのドラッグを開始します。ポインターにしたがって、新しい"非実体化"ノードが表示されます。

  3. 新しい画面を移動する場所までナビゲーション画面をドラッグします。新しいノードが表示され、既定で "Screen 2" の名前が設定されます。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    ノードを右クリックし、[名前の変更] をクリックすると名前を変更できます。または、ノードをクリックし、Shift キーを押しながら F2 キーを押すと、ノードに直接新しい名前を入力できます。

  4. 新しい画面に描画するには、[SketchFlow マップ] パネルのノードをダブルクリックし、関連付けられているドキュメント タブを選択します。

ノード間の接続は、これらのノード間のナビゲーションを示します。ナビゲーション接続が定義されていないナビゲーション ノードを作成することもできます。

新しい接続されていないナビゲーション画面をアプリケーション フローに追加するには

  1. [SketchFlow マップ] パネル内を右クリックし、[ナビゲーション画面の追加] をクリックします。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。
    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    ノードを右クリックし、[名前の変更] をクリックすると名前を変更できます。または、ノードをクリックし、Shift キーを押しながら F2 キーを押すと、ノードに直接新しい名前を入力できます。

  2. 新しい画面に描画するには、[SketchFlow マップ] パネルのノードをダブルクリックし、関連付けられているドキュメント タブを選択します。

    Ee341405.alert_tip(JA-JP,Expression.30).gifヒント :

    または、[SketchFlow マップ] ツール バーで [画面の作成] Ee341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(JA-JP,Expression.30).pngをクリックします。

2 つの接続されていないナビゲーション画面を接続するには

  1. [SketchFlow マップ] パネルで、接続元のノードの上にマウスを移動します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(JA-JP,Expression.30).png

  2. ビジュアル メニューの左から 2 番目の [既存画面の接続] Ee341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(JA-JP,Expression.30).png アイコンにポインターを移動します。アイコンのドラッグを開始し、新しいナビゲーション接続を作成します。マウス ポインターにしたがって、矢印が表示されます。

  3. 接続先の画面まで矢印をドラッグします。接続を削除するには、矢印の上で右クリックし [削除] をクリックします。

    Ee341405.alert_tip(JA-JP,Expression.30).gifヒント :

    または、接続元のノードをクリックし接続先のノードへドラッグします。

コンポーネント画面

コンポーネント ノードはナビゲーション ノードと同様に、[SketchFlow マップ] パネルに表示されます。コンポーネント ノードとナビゲーション ノードの重要な相違点は、コンポーネント ノードにはナビゲーション ノードと異なり受信接続がないということです。コンポーネント ノードには送信接続のみがあります。アプリケーション フローのノード間のリンクを示す矢印、つまり接続は、コンポーネント画面が表示される画面を示します。

コンポーネント ノードには、複数の画面で再使用可能なコンテンツが含まれています。たとえば、背景を含むコンポーネント ノードとメニューを含むコンポーネント ノードを作成し、これらのコンポーネントをプロトタイプ全体にわたり複数の画面上で使用することができます。

新しいコンポーネント ノードを作成するには、いくつかの方法があります。新しいコンポーネント ノードを直接 [SketchFlow マップ] パネルに追加するか、画面上でコンテンツを選択して SketchFlow マップのコンポーネント ノードとして表示する画面を作成することができます。

新しい接続されていないコンポーネント画面をアプリケーション フローに追加するには

  • [SketchFlow マップ] パネル内の任意の場所を右クリックし、[コンポーネント画面の追加] をクリックします。

新しい接続されたコンポーネント画面をアプリケーション フローに追加するには

  1. [SketchFlow マップ] パネルで、追加するコンポーネント画面の接続元のノードの上へポインターを移動します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(JA-JP,Expression.30).png

  2. ビジュアル メニューの右から 2 番目の [コンポーネント画面を作成して挿入] Ee341405.91c06759-86fc-4dbf-a8b7-061300304308(JA-JP,Expression.30).png アイコンの上にポインターを移動します。アイコンのドラッグを開始し、新しいコンポーネント接続を作成します。マウス ポインターにしたがって、矢印が表示されます。

  3. 接続先の画面に矢印をドラッグし、マウスを離します。

UserControl をコンポーネント画面にするには

  1. UserControl に変換したいオブジェクトまたはオブジェクトのグループを選択します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    オブジェクトのグループを選択するには、含めたいオブジェクト グループの周りに境界アウトラインをドラッグします。

  2. 選択範囲を右クリックし、[コンポーネント画面の作成] をクリックします。

  3. [コンポーネント画面の作成] ダイアログ ボックスの [名前] ボックスに、UserContorl の名前を入力します。

  4. オプション:コンポーネント画面をアプリケーション フローに追加するには、[SketchFlow マップに追加] を選択します。

  5. [OK] をクリックします。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    コンポーネント画面がナビゲーション画面に表示される前に、プロジェクトを再構築 (F5) する必要がある場合があります。

ビジュアル タグ

ビジュアル タグを利用すると、SketchFlow マップの画面および接続の種類に合わせて異なる色を適用し、画面および接続の種類を識別しやすくなります。

ビジュアル タグをノードに追加するには

  1. [SketchFlow マップ] パネルのタグ付けしたいノードの上にポインターを移動します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

  2. ノードが反転表示され、その関連する XAML ファイル名がヒントに表示されます。ビジュアル メニューもノードの下部に表示されます。

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(JA-JP,Expression.30).png

  3. 右側のアイコンの上にポインターを移動します。アイコンをクリックし、そのノードに使用したい色をクリックします。

ビジュアル タグを接続に追加するには

  1. [SketchFlow マップ] パネルのタグ付けしたい接続の上にポインターを移動します。

    Ee341405.alert_note(JA-JP,Expression.30).gifメモ :

    [SketchFlow マップ] パネルが表示されていない場合は、[ウィンドウ] メニューで [SketchFlow マップ] をクリック、または Shift キーを押しながら F12 キーを押します。

    接続が反転表示されます。

  2. [ビジュアル タグ] をクリックし、その接続に使用したい色をクリックします。

SketchFlow プロジェクト設定を変更して、プロジェクト全体のビジュアル タグ設定を変更することもできます。

詳細については、「SketchFlow プロジェクトの設定の変更」を参照してください。