Silverlight – 如何在WP7上实现相机应用程序样式照片条？

概述我遇到了许多问题,造成与Camera应用程序中相片非常相似的效果. 我想做的是显示一个网格,每个网格具有与屏幕相同的尺寸(无论是纵向还是横向).已经,我不得不做一些黑客和create dependency properties that the grids width and height properties bind to维持长宽比. 这工作正常.但是当我为我的条形图创建一个StackPane 我遇到了许多问题,造成与Camera应用程序中相片非常相似的效果.

我想做的是显示一个网格,每个网格具有与屏幕相同的尺寸(无论是纵向还是横向).已经,我不得不做一些黑客和create dependency properties that the grids width and height properties bind to维持长宽比.

这工作正常.但是当我为我的条形图创建一个StackPanel并实现我的导航(或者只是使用z-index变换缩放),我看到我的StackPanel不能显示大于屏幕尺寸(它被裁剪成只有一个网格的大小) .我以为我找到一个描述这个问题的帖子,但是现在找不到 – 如果你知道我正在考虑哪个帖子,或者如果你更多地了解这个限制,请发贴.

我发现唯一的解决方法是使用ScrollVIEwer,这绝对不是我想要的行为,但它允许StackPanel比屏幕更宽.

我的真正问题是ScrollVIEwer的行为 – 因为我需要从网格跳转到网格(就像照片条)而不是自由滚动,只要我能告诉Horizo​​ntalOffset不是一个动画的属性.我可以通过每15毫秒调用ScrollToHorizo​​ntalOffset强制它来动画,基本上是手动实现我自己的缓动效果.这似乎是一个巨大的黑客,而且这个行为是非常诡异的(或者我每次看到它都不会得到ManipulationCompleted事件) – 在每次刷卡动作结束时 – 或者内置的ScrollVIEwer惯性物理干扰我的效果).

有没有人知道我遇到的问题的更好的解决方法,或者完全不同的方式来获取Silverlight中相机照片条的体验？

我已经考虑过使用数据透视控件,但是它不是我想要的(如果我想让每个项目在下一个进入之前完全动画化,而不是显示为全部附加到一个条上,那么应该有更少的约束实现方式).更重要的是,该条只是我想要动态执行的许多效果之一.我想要一个Cooliris般的3D倾斜,或FlipPad风格的页面转动.我相信如果我可以让我目前的设置工作很好,这将很容易实现这些其他的效果(作为可选的转换).承诺像Pivot这样的控制不会让我更接近这个愿景.

这是我的XAML：

<GrID x:name="LayoutRoot" Background="transparent" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" HorizontalAlignment="left" VerticalAlignment="top">        <ScrollVIEwer x:name="SlIDeScroller" VerticalScrollbarVisibility="Disabled" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" margin="0,-31" ScrollVIEwer.HorizontalScrollbarVisibility="auto" HorizontalAlignment="left" VerticalAlignment="top">            <StackPanel x:name="SlIDePanel" OrIEntation="Horizontal" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" VerticalAlignment="top" HorizontalAlignment="left">                    <GrID x:name="SlIDe0" margin="0" VerticalAlignment="top" HorizontalAlignment="left" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" Background="#FFCCCCCC">                    <Image x:name="Photo0" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" VerticalAlignment="top" HorizontalAlignment="left" Stretch="UniformToFill"/>                </GrID>                <GrID x:name="SlIDe1" margin="0" VerticalAlignment="top" HorizontalAlignment="left" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" Background="#FFCCCCCC">                    <Image x:name="Photo1" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" VerticalAlignment="top" HorizontalAlignment="left" Stretch="UniformToFill"/>                </GrID>                <GrID x:name="SlIDe2" margin="0" VerticalAlignment="top" HorizontalAlignment="left" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" Background="#FFCCCCCC">                    <Image x:name="Photo2" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" VerticalAlignment="top" HorizontalAlignment="left" Stretch="UniformToFill"/>                </GrID>            </StackPanel>            </ScrollVIEwer>    </GrID>

解决方法 事实证明,如果我只是阻止ScrollVIEwer被用户直接 *** 纵并手动定位,我所描述的设置很好.这消除了我提到的造成大部分毛刺的物理效应.

XAML

<ScrollVIEwer x:name="SlIDeScroller" VerticalScrollbarVisibility="Disabled" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" ScrollVIEwer.HorizontalScrollbarVisibility="auto" HorizontalScrollbarVisibility="Visible" HorizontalAlignment="left" VerticalAlignment="top">            <StackPanel x:name="SlIDePanel" OrIEntation="Horizontal" Height="{Binding RealHeight,Elementname=phoneApplicationPage}" VerticalAlignment="top" HorizontalAlignment="left">            </StackPanel>        </ScrollVIEwer><Rectangle x:name="ScrollinterceptRect" margin="0,-31" WIDth="{Binding RealWIDth,Elementname=phoneApplicationPage}" HorizontalAlignment="left" VerticalAlignment="top">

代码隐藏

public MainPage()    {        InitializeComponent();        ScrollinterceptRect.MouseleftbuttonUp += new MousebuttonEventHandler(ScrollinterceptRect_MouseleftbuttonUp);        ScrollinterceptRect.MouseleftbuttonDown += new MousebuttonEventHandler(ScrollinterceptRect_MouseleftbuttonDown);        ScrollinterceptRect.MouseMove += new MouseEventHandler(ScrollinterceptRect_MouseMove);    }    //...    NavigationIndices navigationIndices = new NavigationIndices();    Readonly double swipeThreshold = 80.0;    SwipeDirection swipeDirection;    bool tapCancelled;    Point swipeDelta;    Point swipestartposition;    double startScrollOffsetX;    voID SlIDeScroller_MouseleftbuttonDown(object sender,MousebuttonEventArgs e)    {        swipestartposition = e.Getposition(this);        startScrollOffsetX = SlIDeScroller.HorizontalOffset;    }    voID ScrollinterceptRect_MouseMove(object sender,MouseEventArgs e)    {        Point touchposition = e.Getposition(this);        swipeDelta = new Point() { X = swipestartposition.X - touchposition.X,Y = swipestartposition.Y - touchposition.Y };        SlIDeScroller.ScrollToHorizontalOffset(startScrollOffsetX + swipeDelta.X);        // swipe right        if (swipeDelta.X > swipeThreshold)        {            swipeDirection = SwipeDirection.left;            tapCancelled = true;        }        // swipe left        else if (swipeDelta.X < -swipeThreshold)        {            swipeDirection = SwipeDirection.Right;            tapCancelled = true;        }    }    voID ScrollinterceptRect_MouseleftbuttonUp(object sender,MousebuttonEventArgs e)    {        if (swipeDirection == SwipeDirection.left && navigationIndices.X < photos.Count - 1 && photos[navigationIndices.X] != null)        {            navigationIndices.X++;        }        // only go back when you aren't already at the beginning        else if (swipeDirection == SwipeDirection.Right && navigationIndices.X > 0)        {            navigationIndices.X--;        }        if (!tapCancelled)        {            // handle tap        }        else        {            animateScrollVIEwerToCurrentPhoto();        }    }

这简化了一点清晰度(我也使用垂直滑动在我的应用程序中的东西,我省略了我如何动画的ScrollVIEwer – 可能值得自己的帖子).

我很乐意听到您可以提供的任何改进,或建议更好的方法来实现它.也许扩展面板类或作为自定义行为.思考？

总结

以上是内存溢出为你收集整理的Silverlight – 如何在WP7上实现相机应用程序样式照片条？全部内容，希望文章能够帮你解决Silverlight – 如何在WP7上实现相机应用程序样式照片条？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。