QA@IT

Windows Phone 7でスワイプショートカットを実装することは可能でしょうか

2876 PV

iOSのTwitter公式アプリでは、ツイートリスト上で左から右へスワイプさせることで、ショートカットを表示することが可能です。(スワイプショートカットについての紹介記事: http://www.appbank.net/2012/02/22/iphone-application/373834.php )

これをWindows Phone 7でも実装したいと考えております。ListBoxコントロールを使った場合、どうしたらよいでしょうか。

回答

かなり強引なやり方ですので、もっと良い方法がありそうですが…

WindowsPhoneデータバインドアプリケーションのテンプレートプロジェクトを作成し、
SilverLight ToolKit for WindowsPhoneを導入した状態、

初期状態で登録されているItemTemplateに下記のような状態でストーリーボードを定義

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Height="78"
              Width="432">
            <Grid.Resources>
                <Storyboard x:Name="Storyboard1">
                ・・・・・

メイン画面のGrid直下に

<toolkit:GestureService.GestureListener>
    <toolkit:GestureListener Flick="GestureListener_Flick" />
</toolkit:GestureService.GestureListener>

で、フリックのリスナーをセットし、ハンドラは以下のものをコードビハインドに追加。

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
    //角度から方向を計算
    int deg = (int)((e.Angle + 45) / 90);

    switch (deg)
    {
        case 0: // 0~45
        case 4: // 315~0
            {
                // ListBoxに対して、フリックイベントの発生した位置を取得
                var pos = e.GetPosition(MainListBox);
                for (int i = 0; i < MainListBox.Items.Count; ++i)
                {
                    // ListBoxItemを取得
                    var item = MainListBox.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
                    var inPos = e.GetPosition(item);
                    // アイテムに対してフリックイベントの発生した位置がマイナスになったら、ひとつ前がターゲットのアイテム
                    if (inPos.Y < 0)
                    {
                        var target = MainListBox.ItemContainerGenerator.ContainerFromIndex(i - 1) as ListBoxItem;
                        // Gridが出てくるまで子要素を取得する
                        var child = VisualTreeHelper.GetChild(target, 0);
                        child = VisualTreeHelper.GetChild(child, 0);
                        child = VisualTreeHelper.GetChild(child, 0);
                        child = VisualTreeHelper.GetChild(child, 0);

                        // Storyboardをリソースから取得して再生
                        var story = ((Grid)child).Resources["Storyboard1"] as Storyboard;
                        story.Begin();
                        break;
                    }
                }
            }
            break;
    }
}

これで、アイテム上で右方向にフリックした時、Storyboard1が再生されるはずです。
例外処理などは入っていません。

フリックして出したい物の上に、通常表示するレイアウトを重ねておき、Storyboard1で通常表示するレイアウトを右にスライドするようにしておけば目的は達成できそうですが、かなり力技です…。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。