具有类似FlipView效果的操作手势
具有类似FlipView效果的操作手势
提问于 2015-10-06 14:59:33
我有一个与内容细节的页面。目前只有一个页面，但我的朋友希望细节页面可以像flipview控件一样左右滚动。我目前在将视图模型更改为FlipView时遇到了一些困难。因此，我想在我的内容详细信息页面中使用手势。如何使用手势操作实现flipview动画？我说的flipview动画是指当向左或向右滚动时，我可以看到上一项或下一项。
回答 1
Stack Overflow用户
发布于 2015-10-10 11:39:28
通过将控件的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="<"/>
</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部分是切换项目的动画。您应该将其粘贴到您的项目中，以查看发生了什么:-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32963640
复制相关文章
相似问题
腾讯云开发者
