Question

我创建水平滑动将在下一个和上一个项目之间移动。我有三个图像，但问题是当我轻弹一次它直接转到第三个图像所以剩下第二个图像。

请将我的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);


                    }


                }

Answer 1

我假设您展示的图片宽度相等，我建议您使用相当简单但不同的方法解决问题。

首先像这样定义你的网格

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

然后在C＃代码的OnFlick（）方法中使用以下两种方法：

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的宽度

在wp7中滑动图像

1 个答案: