level 13
sscs
楼主
设计了一个滑动页面,用Manipulation获取鼠标移动量并赋值给RenderTransform的TranslateX。
在ManipulationCompleted时开始播放相应动画,使滑动页面自动靠向右侧或左侧。
第一次正常,数字是TranslateX的值,如图

放开鼠标后sb2动画开始,滑动页面移向右侧,再将页面拖回左侧(会触发sb1),进行第二次向右拖动时,发现TranslationX的值会变化,放开鼠标后会自动靠边,但是放开前页面不会跟着鼠标移动了。如图

代码:
Public SwitchRecBack As Boolean = False
Private Sub RecGoBack_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles RecGoBack.ManipulationDelta
Dim del As Double = e.Cumulative.Translation.X
If del > 100 Then
SwitchRecBack = True
End If
If SwitchRecBack AndAlso del >= 0 Then
pg2Trans.TranslateX = del
tbout.Text = pg2Trans.TranslateX
End If
End Sub
Private Sub RecGoBack_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles RecGoBack.ManipulationCompleted
Dim del As Double = e.Cumulative.Translation.X
If del > 100 Then
sb2.Begin()
Else
sb1.Begin()
End If
SwitchRecBack = False
End Sub
XAML:
<Grid Background="White" >
<Grid.Resources >
<Storyboard x:Name="sb1" >
<DoubleAnimation To="0" EnableDependentAnimation="True" Duration="0:0:0.2" Storyboard.TargetName="pg2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" />
</Storyboard>
<Storyboard x:Name="sb2" >
<DoubleAnimation To="450" EnableDependentAnimation="True" Duration="0:0:0.2" Storyboard.TargetName="pg2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" />
</Storyboard>
</Grid.Resources>
<Grid x:Name="pg1" Backgound="DarkBlue" />
<Grid x:Name="pg2" Background="White" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform x:Name="pg2Trans" TranslateX="0"/>
</Grid.RenderTransform>
<TextBlock x:Name="tbout" Text="" FontSize="24" />
<Rectangle x:Name="RecGoBack" Fill="#7F6495ED" Width="24" HorizontalAlignment="Left" ManipulationMode="All" />
</Grid>
2017年01月15日 16点01分
1
在ManipulationCompleted时开始播放相应动画,使滑动页面自动靠向右侧或左侧。
第一次正常,数字是TranslateX的值,如图

放开鼠标后sb2动画开始,滑动页面移向右侧,再将页面拖回左侧(会触发sb1),进行第二次向右拖动时,发现TranslationX的值会变化,放开鼠标后会自动靠边,但是放开前页面不会跟着鼠标移动了。如图
代码:Public SwitchRecBack As Boolean = False
Private Sub RecGoBack_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles RecGoBack.ManipulationDelta
Dim del As Double = e.Cumulative.Translation.X
If del > 100 Then
SwitchRecBack = True
End If
If SwitchRecBack AndAlso del >= 0 Then
pg2Trans.TranslateX = del
tbout.Text = pg2Trans.TranslateX
End If
End Sub
Private Sub RecGoBack_ManipulationCompleted(sender As Object, e As ManipulationCompletedRoutedEventArgs) Handles RecGoBack.ManipulationCompleted
Dim del As Double = e.Cumulative.Translation.X
If del > 100 Then
sb2.Begin()
Else
sb1.Begin()
End If
SwitchRecBack = False
End Sub
XAML:
<Grid Background="White" >
<Grid.Resources >
<Storyboard x:Name="sb1" >
<DoubleAnimation To="0" EnableDependentAnimation="True" Duration="0:0:0.2" Storyboard.TargetName="pg2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" />
</Storyboard>
<Storyboard x:Name="sb2" >
<DoubleAnimation To="450" EnableDependentAnimation="True" Duration="0:0:0.2" Storyboard.TargetName="pg2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" />
</Storyboard>
</Grid.Resources>
<Grid x:Name="pg1" Backgound="DarkBlue" />
<Grid x:Name="pg2" Background="White" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform x:Name="pg2Trans" TranslateX="0"/>
</Grid.RenderTransform>
<TextBlock x:Name="tbout" Text="" FontSize="24" />
<Rectangle x:Name="RecGoBack" Fill="#7F6495ED" Width="24" HorizontalAlignment="Left" ManipulationMode="All" />
</Grid>