1

水平にスワイプすると、次のアイテムと前のアイテムの間で移動します.3つの画像がありますが、1回フリックすると3番目の画像に直接移動するため、2番目の画像が残ります。

以下のように私のC＃コードを参照してください：

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


 private void OnFlick(object sender, FlickGestureEventArgs e)
        {
            try
            {

                    double ScreenWidth = ScrollGrid.Width;
                    // User flicked towards left
                    if (e.HorizontalVelocity < 0)
                    {

                        //Load Next Page                
                        double nextPage = (ScrollActivePage + 1) * ScreenWidth;
                        if (nextPage - ScrollGrid.ScrollableWidth <= ScreenWidth)
                        {
                            ScrollGrid.ScrollToHorizontalOffset(nextPage);
                            ScrollActivePage++;
                        }
                        else
                        {
                        ScrollGrid.ScrollToHorizontalOffset(ScrollGrid.ScrollableWidth);

                         }     
                    }


                    // User flicked towards right
                    if (e.HorizontalVelocity > 0)
                    {
                        //Load Previous Page;                
                        ScrollActivePage = (ScrollActivePage > 0) ? ScrollActivePage - 1 : 0;
                        ScrollGrid.ScrollToHorizontalOffset(ScrollActivePage * ScrollGrid.Width);


                    }


                }
4

1 に答える 1

2

表示される画像はすべて同じ幅であると想定しています。問題に対して、かなり単純ですが異なるアプローチをお勧めします。

最初にこのようにグリッドを定義します

<Grid x:Name="ScrollGrid" Width="1500">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="gridTransform"/>
    </Grid.RenderTransform>
    <!-- grid components or images -->
</Grid>

次に、C# コードの OnFlick() メソッドで次の 2 つのメソッドを使用します。

private void OnFlick(object sender, FlickGestureEventArgs e)
{
        try
        {
            // User flicked towards left
            if (e.HorizontalVelocity < 0)
            {
                //Load Next Page
                swipeLeft();
            }

            // User flicked towards right
            if (e.HorizontalVelocity > 0)
            {
                //Load Previous Page;                
                swipeRight();
            }
}

private void swipeLeft()
    {
        //Animate the Grid to the left side
        DoubleAnimation da = new DoubleAnimation();
        da.From = gridTransform.X;
        da.To = gridTransform.X - 360; //You can customize this 360 to your image width by passing it as an argument to swipeLeft method
        da.Duration = new Duration(TimeSpan.FromSeconds(0.5));
        Storyboard.SetTarget(da, gridTransform);
        Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.XProperty));

        Storyboard sb1 = new Storyboard();
        sb1.Children.Add(da);
        sb1.Begin();
    }

    private void swipeRight()
    {
        //Animate the Grid to the right side
        DoubleAnimation da = new DoubleAnimation();
        da.From = gridTransform.X;
        da.To = gridTransform.X + 360;
        da.Duration = new Duration(TimeSpan.FromSeconds(0.5));
        Storyboard.SetTarget(da, gridTransform);
        Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.XProperty));

        Storyboard sb1 = new Storyboard();
        sb1.Children.Add(da);
        sb1.Begin();
    }

私は自分のプロジェクト用にこれらのメソッドを作成しましたが、要件に合わせてカスタマイズが必要になる場合があります。しかし、試してみる価値があり、簡単に変更できるコードです。

//また、ScrollGrid の親が ScrollGrid の幅をオーバーライドまたは制限していないことを確認してください

于 2012-08-21T13:20:08.923 に答える