locked
初めは逆方向にスライドしないパノラマ / ピボット RRS feed

  • 質問

  • 4コマ漫画のプラットフォームにパノラマかピボットを使ってみたい。

    移動処理の実装が不要なので便利かな、と。

    しかし初めのページで右にスライドされると、最後のコマがいきなり見えてしまう。さてどうしたらいいかな?

    • 移動 Mike Wang (MSCS) 2012年10月2日 10:56 (移動元:Windows Phone 7 How-to)
    2011年5月9日 17:20

回答

  • PanoramaItemでManipulationDeltaとManipulationCompletedをHandleすればできそうです。
    public MainPage()
    {
     InitializeComponent();
    
     page1.ManipulationCompleted += new EventHandler<ManipulationStartedEventArgs>(page1_ManipulationCompleted);
     page1.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(page1_ManipulationDelta);
    }
    
    void page1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
    {
     if (panorama1.SelectedIndex == 0 && e.TotalManipulation.Translation.X > 0)
     e.Handled = true;
    }
    
    void page1_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
     if (panorama1.SelectedIndex == 0 && e.DeltaManipulation.Translation.X > 0)
     e.Handled = true;
    }
    
    ManipulationDeltaを常にHandledにしてしまえば、ドラッグ中は動かなくなるようです。
    また、ページ内でのフリックを抑制してしまうだけなら、ManipulationStartedで
    void page1_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
     panorama1.IsHitTestVisible = false;
    }
    
    という感じでしょうか...。


    • 編集済み kaorun 2011年5月10日 5:36 一部訂正
    • 回答としてマーク Shinobu Takahashi 2011年5月10日 17:56
    2011年5月10日 3:24

すべての返信

  • パノラマ/ピボットの上になにかを置いて物理的にジェスチャーを横取りするとか、エレガントな解決方法があるのかもしれませんが……。

    4コマを読み進めるとき、水平方向のどちらにスクロールするのかは微妙な問題だと思います。日本と欧米では逆かもしれません。そこで、どちらにスクロールしても順番通りに表示できるように実装するというのはどうでしょうか。

    それぞれのコマを Item1 Item2 Item3 Item4 に配置する場合、スクロールの方向に関わらず、Item1 には1コマ目が、Item3 には3コマ目が入ります。問題は Item2 と Item4 ですが、

    ・もしユーザが Item1 から Item2 にスクロールしたら、Item2 を2コマ目、Item 4 を4コマ目とする
    ・もしユーザが Item1 から Item4 にスクロールしたら、Item4 を2コマ目、Item 2 を4コマ目とする

    ようにして、Item1 から最初にどちら向きにスクロールしたかで方向を決定するようにします。

    ひとつ前の Item と現在の Item は、ページ切り替え時に発生する SelectionChanged イベントの SelectionChangedEventArgs や PivotItemEventArgs から取得できます。
    2011年5月10日 0:49
  • PanoramaItemでManipulationDeltaとManipulationCompletedをHandleすればできそうです。
    public MainPage()
    {
     InitializeComponent();
    
     page1.ManipulationCompleted += new EventHandler<ManipulationStartedEventArgs>(page1_ManipulationCompleted);
     page1.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(page1_ManipulationDelta);
    }
    
    void page1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
    {
     if (panorama1.SelectedIndex == 0 && e.TotalManipulation.Translation.X > 0)
     e.Handled = true;
    }
    
    void page1_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
     if (panorama1.SelectedIndex == 0 && e.DeltaManipulation.Translation.X > 0)
     e.Handled = true;
    }
    
    ManipulationDeltaを常にHandledにしてしまえば、ドラッグ中は動かなくなるようです。
    また、ページ内でのフリックを抑制してしまうだけなら、ManipulationStartedで
    void page1_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
    {
     panorama1.IsHitTestVisible = false;
    }
    
    という感じでしょうか...。


    • 編集済み kaorun 2011年5月10日 5:36 一部訂正
    • 回答としてマーク Shinobu Takahashi 2011年5月10日 17:56
    2011年5月10日 3:24
  • あ、SelectedIndex == 0はいらないかも。
    2011年5月10日 3:31
  • 最近WP7の開発を始めました。
    今後もこのフォーラムを利用させていただきたいと思いますので、どうぞよろしくお願い致します。

    パノラマやピボットを4コマ漫画に活かすという発想は全然思いつきませんでした!特にパノラマコントロールは4コマ漫画に最適かもしれませんね。

    個人的には、パノラマの右端に次のページが見えるのはすごくオシャレですし、初期表示時のトランジション(初めのページで右にスライドされるアレ)も
    すごくクールだと思います。ですので、なるべく既定の動作を活かしつつ何とかすることができれば、ラクしてカッコイイ感じになるのではないでしょうか?
    上記を踏まえて、パノラマのビヘイビアなどを作成して以下の要件を満たせれば、4コマ漫画のプラットフォームとして十分利用できるのではないかと思います。

    1. 初期表示時に4コマ目が表示されないようにするため、4コマ目を徐々に表示
    2. 1コマ目から4コマ目への遷移を防止するため、1コマ目において左フリックを無効化

    なお、個人的にも興味がありましたので、自分なりにサンプルプログラムを作成しました。
    データバインドや横向きの場合などを全く考慮していないので実用には耐えませんが、討論の一助となりましたら幸いです。
    http://www.moto-square.com/wp/wp-content/uploads/2011/05/FourFrameComicSample.zip
    2011年5月10日 3:41
  • tezawary さん

     

    方向の問題は別問題として、(出題にはないので)

    SelectionChanged イベントは拾えます。あとは拾ってどう処理をするかが問題ですね。

    というか、拾ったあとではもう遅かったりします。というのも拾った時点でページの移動は発生してしまうので、「最終頁を見せない」 ことにはならないのです。まぁ、5ページ目を追加して「1ページ目から見てね」とする方法もありますが、そのあとどうさせるかが、今度は問題となりますね。


    2011年5月10日 17:47
  • kaorunさん

    ほぼほぼ、私も同じ結論です。下にもいただきましたがpage1のイベントを拾っているので、SelectedIndexの判定はいりませんね。出題の要件は完璧に見たいしています。Perfect !

    さらに、4コマ漫画の特性を考え、「1回でも全部読んだら戻れるようにする」 って追加すると親切かもしれませんね。

     bool bReadAll = false;

     public MainPage()
     {
        InitializeComponent();
        page1.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(page1_ManipulationCompleted);
        page1.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(page1_ManipulationDelta);
      }


      void page1_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
      {
        if ((e.DeltaManipulation.Translation.X > 0)&&(!bReadAll))
            e.Handled = true;
      }


      void page1_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
      {
        if ((e.TotalManipulation.Translation.X > 0) && (!bReadAll))
            e.Handled = true;
      }


      private void panorama_SelectionChanged(object sender, SelectionChangedEventArgs e)
      {
        if (panorama.SelectedIndex == panorama.Items.Count - 1)
            bReadAll = true;
      }


    2011年5月10日 17:51
  • MOTO SQUAREさん

    サンプルまでありがとうございます。

    試してみるとわかりますが、やっぱりスライドに対して微妙に反応するけど動かない、というのはユーザーにはストレスになりますね。

    4コマ目の処理をされていらっしゃいますが、多分、パノラマのスライドの動きを抑制するために、ManipulationDelta で処理してみたものの、どうしてもスライドの動きが発生してしまう、ということがあって対処されているのかと思います。kaorunさんのサンプルにもありますが、ManipulationCompleted もハンドルしてしまえば、しっかりと動きを抑制することができます。こうすれば4コマ目に対する処理もいらなくなりますね。

    ご回答ありがとうございました。


    2011年5月10日 17:55