我有一个包含内容详细信息的页面。目前只针对单页，但我的朋友希望详情页可以像翻转视图控件一样左右滚动。我目前在将 View Model 更改为 FlipView 时遇到一些困难。所以我想在我的内容详细信息页面中使用手势。如何使用手势操作实现翻转视图动画？我对翻转视图动画的意思是当向左或向右滚动时，我可以看到上一个或下一个项目。
问问题
56 次
1 回答
0
您可以通过设置控件来将控件放置在可见项目之前或之后TranslateX，TraslateTransform并使用Clip可见项目的属性。
我已经构建了一个类似于 FlipView 的控件，它的作用类似于 aFlipView但它可以循环。这是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="<"/>
</Button>
<Button x:Name="NextBtn" Background="#FFEAEAEA" BorderThickness="0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="25" Padding="0" Opacity="0" Visibility="Collapsed">
<TextBlock Text=">"/>
</Button>
<StackPanel x:Name="IndexIndicatorSP" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center">
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
该Storyboard部分是切换项目的动画。你应该把它粘贴到你的项目中看看会发生什么:-)
于 2015-10-10T03:39:27.663 回答