具有类似 FlipView 效果的操作手势

Question

我有一个包含内容详细信息的页面。 目前只针对单页，但我的朋友希望详情页可以像翻转视图控件一样左右滚动。 我目前在将 View Model 更改为 FlipView 时遇到一些困难。所以我想在我的内容详细信息页面中使用手势。 如何使用手势操作实现翻转视图动画？ Flipview 动画的意思是当向左或向右滚动时，我可以看到上一个或下一个项目。

Answer 1

您可以通过设置它们的TranslateX 或TraslateTransform 来将控件放置在可见项目之前或之后，并使用可见项目的Clip 属性。

我已经构建了一个类似于 FlipView 的控件，其作用类似于 FlipView，但它可以循环。这是xaml代码：

<Style TargetType="local:LoopingBannerControl">  
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:LoopingBannerControl">
                    <Grid x:Name="RootGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#FFF0F0F0" d:DesignWidth="199.667" d:DesignHeight="215.222">
                        <Grid.Resources>
                            <Storyboard x:Name="NextStory">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="NextImageBtn">
                                    <EasingDoubleKeyFrame x:Name="NextRightOriTranslateXFrame" KeyTime="0" Value="200"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="CurrentImageBtn">
                                    <EasingDoubleKeyFrame x:Name="NextMiddleOriTranslateXFrame" KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame x:Name="NextMiddleTargetTranslateXFrame" KeyTime="0:0:0.3" Value="-200"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Name="PreviousStory">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="CurrentImageBtn">
                                    <EasingDoubleKeyFrame x:Name="PreviousMiddleOriTranslateXFrame" KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame x:Name="PreviousMiddleTargetTranslateXFrame" KeyTime="0:0:0.3" Value="200"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="PreviousImageBtn">
                                    <EasingDoubleKeyFrame x:Name="PreviousLeftOriTranslateXFrame" KeyTime="0" Value="-200"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Name="ShowBtnStory">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PreviousBtn">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NextBtn">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousBtn">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NextBtn">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Name="HideBtnStory">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PreviousBtn">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NextBtn">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PreviousBtn">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="NextBtn">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                    <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </Grid.Resources>
                        <Grid.Clip>
                            <RectangleGeometry Rect="0 0 200 200"/>
                        </Grid.Clip>
                        <Button x:Name="PreviousImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
                            <Button.RenderTransform>
                                <CompositeTransform TranslateX="-200"/>
                            </Button.RenderTransform>
                            <Image x:Name="PreviousImage" Stretch="UniformToFill"/>
                        </Button>
                        <Button x:Name="NextImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
                            <Button.RenderTransform>
                                <CompositeTransform TranslateX="200"/>
                            </Button.RenderTransform>
                            <Image x:Name="NextImage" Stretch="UniformToFill"/>
                        </Button>
                        <Button x:Name="CurrentImageBtn" Background="{x:Null}" Padding="0" BorderThickness="0">
                            <Button.RenderTransform>
                                <CompositeTransform/>
                            </Button.RenderTransform>
                            <Image x:Name="CurrentImage" Stretch="UniformToFill" RenderTransformOrigin="0.5,0.5"/>
                        </Button>

                        <Button x:Name="PreviousBtn" Background="#FFEAEAEA" BorderThickness="0" VerticalAlignment="Stretch" Width="25" Opacity="0" Padding="0" Visibility="Collapsed">
                            <TextBlock Text="&lt;"/>
                        </Button>
                        <Button x:Name="NextBtn" Background="#FFEAEAEA" BorderThickness="0"  HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="25" Padding="0" Opacity="0" Visibility="Collapsed">
                            <TextBlock Text="&gt;"/>
                        </Button>
                        <StackPanel x:Name="IndexIndicatorSP" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">

                        </StackPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Storyboard部分是切换物品的动画。你应该把它粘贴到你的项目中看看会发生什么:-)