5

Metro Style Appでスライド スタイルを使用したページ遷移を実装したいと考えています。

効果は次のようになります

    state 1                     state 2                   state 3
 ____________              _______________             ____________  
|            |            |       |       |           |            |
|   page A   |    ====>   |page A |page B |   ====>   |   page B   |
|            |            |partial|partial|           |            |
|____________|            |_______|_______|           |____________|

これは、右から左へのパン ジェスチャ スワイプによってトリガーされます (トリガー システム ツールバーがないため、それらを分離する方法がわかりません)。

exitPage / enterPageでプレイしましたが、うまくいきませんでした:ページB が入る前にページ A が消えてしまったようです。現在のページと新しいページを div ラッパーに配置し、呼び出しなしで div にスライドさせます。しかし、それは CSS の位​​置を壊す可能性があり、いつ新しいページの JS を安全に呼び出すことができるかわかりません...
navigate()

update 1おそらくFlipViewでこれができるでしょうか？

にローカルページをロードする方法を見つけるための更新2FlipView 、役立つリンクの把握を見つけましたが、まだ混乱しています...

更新 3 ではFlipView、ページを完全に定義し、内部の FlipView.itemTemplatePageControlの 1 つをレンダリングすることで、原始的なバージョンの使用方法を考え出しましたが、それは適切ですか?PageControl

それで、それに適した解決策や素晴らしいアイデアはありますか？ありがとう！

4

2 に答える 2

2

これには FlipView を絶対に使用できますが、正直なところ、これが HTML 側でどのように機能するかはわかりません。Xaml 側では、「ページ」を実際のページではなくユーザー コントロールとして実装し、FlipView でホストします。多くの「ページ」とそれらの「ページ」に関連付けられたデータがある場合、これはかなりリソースを集中的に使用する可能性があります。

Xaml 側では、実際の各ページ (Page から継承) が Frame に表示されます。Frame は一度に 1 ページしか表示できません。アニメーションが完了する前に最初のページが消えてしまうのはそのためです。

ユーザーが複数の仮想ページをフリックできないようにする場合や、リソースが集中しすぎる場合は、FlipView を使用しないことをお勧めします。代わりに、2 つの ContentPresenter を使用してアニメーションを作成できます。ContentPresenterA と ContentPresenterB は並んでいます。アニメーションがスライドし、最後に ContentPresenterA を ContentPresenterB のコンテンツに設定し、アニメーションの先頭に戻ります。ユーザーがジャンプに気付かないほど迅速に発生する必要があります。

同僚であり友人でもある Ryan Joy に、ここに飛び乗って、HTML 側でこれらのことを行う方法について話してもらえるかどうか聞いてみるつもりです。

于 2012-09-18T21:49:30.157 に答える
0

これに使っFlipViewてきました。内のコードは、効果に関するすべてWinJS.UIをbase.js説明しています (Dominic Hopton によって言及されています)。これFlipViewは私の現在の使用には十分です (ただし、将来的に追加のフリップ動作をカスタマイズする必要があるかもしれません)。

オーバーFlipViewロードを減らすために、開始時にすべてのページを一度にロードします。

  1. div最初の代わりに単純なプレースホルダーを遅延ロードし、次に のin イベントをPageControlロード/アンロードします。これにより、ページがビューポート内に表示される (またはビューポートから非表示になる) ときにトリガーされる副作用がもたらされ、非常に便利です。PageControlonpagecompleted/onpagechangedvisibilityFlipViewPageControl.ready/unload
  2. 余分なページを段階的にロードしますitemDataSource（おそらく動的にアンロードしますか？）

また、余分なs は、ラップされたFlipView内部で使用できますが、MSDN はこれについて言及していません。PageControlFlipView

于 2012-10-05T14:11:49.947 に答える