Page ノード間のトランジションを設定する

注釈

Page ノードと Page Host ノードは非推奨です。アプリケーションのナビゲーション可能な UI を構築するには、Activity ノードと Activity Host ノードを使用してください。アクティビティ を参照してください。

Kanzi はデフォルトで、Push トランジションを Page ノードと Page Host ノード間のトランジションに使用します。独自のトランジションを作成するには、次の方法を使用できます:

• Transition Presets を使用して、Page ノードと Page Host ノード間の遷移を設定します。

• Animations は Page ノードと Page Host ノード間の遷移を設定またはカスタマイズします。

Kanzi では、トランジションは再利用可能なリソースです。Kanzi Studio プロジェクトでは、Library > Page Transitions でトランジションを確認できます。

Page ノードと Page Host ノード間の遷移を設定する

Page ノードと Page Host ノード間の遷移を設定するには：

1. Page ノードと Page Host ノードを使用して、ユーザーインターフェース構造を作成します。Page ノードと Page Host ノードを使用する を参照してください。

2. Pages で Transitions をクリックして、Pages で Transitions エディタを表示します。

   

3. Pages で、任意の Page または Page Host ノードをクリックして選択し、Transitions エディターで をクリックしてトランジションを作成します。

   Transitions エディターは、Pages または Node Tree で選択した Page または Page Host ノードによって使用される遷移を表示します。遷移を作成すると、Kanzi Studio はデフォルトで Push 遷移を使用します。

   

4. Transitions エディターで Transition Presets からトランジションをドラッグし、Default トランジションの下にドロップします。

   その方法で、Default トランジションに、これと他の任意の Page または Page Host ノード間のトランジションを追加します。

   例えば、Transition Presets から Flip トランジションをドラッグし、Transitions エディター内の Default トランジションの下にドロップします。

   In the Preview when you start a transition either from or to the Page node for which you set the transition type, Kanzi uses the transition you set.

   
   

   Carousel

   

   Cube

   

   Fade

   

   Flip

   

   Hinge

   

   Push

   

   Rotate

   

   Scale

   

   Slide

   

   Swivel

5. 遷移を構成するには、Transitions エディターで をクリックし、ポップアップウィンドウで次の設定を行います。

   • Duration をミリ秒単位の遷移の長さにします。

   • この遷移を適用したいノードに移動する際に、From を Page または Page Host ノードにします。

   • この遷移を適用したいノードに移動する際に、To を Page または Page Host ノードにします。

   • Direction は、From プロパティで設定したノードから To プロパティで設定したノードへの遷移に適用されるか、または両方のノードからの遷移に適用されるかを示します。

     • Bidirectional は、From プロパティのノードから To プロパティのノードへの遷移、および To プロパティのノードから From プロパティのノードへの遷移に適用されます。

     • Unidirectional は、From プロパティのノードに対して、To プロパティのノードにのみトランジションを適用します。

   

トランジションアニメーションの作成

Page ノードと Page Host ノードの間の遷移を設定するため、または遷移をカスタマイズするために、トランジションアニメーションを使用します。

トランジションアニメーションを作成するには、以下のようにします。

1. Library > Page Transitions Alt を押しながら右クリック で、トランジションアニメーションを追加したいトランジションを選択し、Page Transition Animation を選択します。

   

2. Library で、前のステップで作成したトランジションアニメーションを選択し、Properties で設定します:

   • Animation Target へ：

     • Page または Page Host ノードに移動する際にアニメーションを使用する Page In

     • Page または Page Host ノードからセットをナビゲートする際にアニメーションを使用する Page Out

   • アニメーションさせたいプロパティに Transition Property を設定します。

   • 遷移アニメーションが開始されるときに、Start Value を Transition Property の値に設定します。

   • 遷移アニメーションが終了したときに、End Value を Transition Property の値にします。

   

3. 作成したトランジションアニメーションを使用するように Page または Page Host を設定するには、Node Tree でその Page または Page Host ノードを選択し、Properties で Transitions プロパティをアニメーションを使用するトランジションに設定します。

   

遷移にトランジションアニメーションを追加する

トランジションをカスタマイズするには、既存のトランジションにトランジションアニメーションを追加することができます。

トランジションにトランジションアニメーションを追加するには、

1. Pages で Transitions をクリックして、Pages で Transitions エディタを表示します。

   

2. Pages で、遷移アニメーションを追加したい Page または Page Host ノードを選択し、Transitions エディターで Animations からカスタマイズしたい遷移にアニメーションをドラッグします。

   例えば、Scale アニメーションを Default トランジションにドラッグして、Default トランジションにスケールアニメーションを追加します。

   

3. （オプション） トランジションアニメーションをカスタマイズするには、Library > Page Transitions でそのアニメーションを使用するトランジションを展開し、トランジションアニメーションを選択し、Properties で以下を設定します。

   • アニメーションが開始するときに、Start Value を Transition Property の値にします。

   • アニメーションが終了したときに、End Value を Transition Property の値にします。

   

アプリケーション内の Page ノード間でのトランジションを開始する

Pages で Page または Page Host ノードをクリックすると、Preview でトランジションが表示されます。ただし、アプリケーション内のノード間をトランジションするには、Navigate to アクションのいずれかを使用してトリガーを設定する必要があります。

アプリケーション内で Page ノード間のトランジションを開始するには：

1. Page ノードと Page Host ノードを使用して、ユーザーインターフェース構造を作成します。Page ノードと Page Host ノードを使用する を参照してください。

2. Node Tree で、Page ノードと Page Host ノードの間をナビゲートするために使用したいコントロールを作成します。

   例えば、Page Host ノード RootPage で Button 2D ノードを作成します。Button ノードを使用する を参照してください。

   

3. Node Tree で前のステップで作成したコントロールを選択し、Node Components > Triggers セクションでナビゲーションに使用したいトリガータイプ Alt を押しながら右クリック を選択し、アクションを選択します。

   • Page: Navigate to Page は、このアクションで設定したノードに移動します。

   • Page Host: Navigate to Next は、Pages に示されているように、現在のノードの右側にある兄弟ノードに移動します。

   • Page Host: Navigate to Previous は、Pages に示されているように、現在のノードの左側にある兄弟ノードに移動します。

   • Page: Navigate to Parent は、このアクションで選択するノードの親ノードであるノードに移動します。

   例えば、Page Host: Navigate to Next アクションを選択し、アクションを RootPage ノードに設定します。

4. アクション設定で、設定します:

   • アクションを実行したいノードに Target Item を設定します。プロパティでアクションのターゲットノードを設定するには、Define Target with Property プロパティを有効にして設定します。

     • ターゲットノードを設定するために使用したいプロパティを含むノードに Target Item します。

     • ターゲット Page Host ノードを設定するために使用したいプロパティに Property を設定します。カスタムプロパティタイプを使用する場合、そのプロパティタイプで次を設定します。

       • Data Type から Project Item へ

       • Editor から Page selector へ

       プロパティタイプを作成する を参照してください。

   • （オプション） トランジションアニメーションなしで遷移を行うには、Immediate プロパティを有効に設定します。

   

Preview で、Page ノードと Page Host ノードの間をナビゲートするために作成したコントロールをクリックします。コントロールをクリックするたびに、右に1ページ進みます: Home から Music、Music から Car、Car から Home、というように。

APIでページ遷移を使用する

詳細については、PageTransitionCollection クラスを参照してください。

関連項目

Page ノードと Page Host ノードを使用する

トリガー (Triggers)