我的TabView基本上是这样的:
<controls:TabView
x:Name="PlaylistTabView">
<controls:TabView.ItemHeaderTemplate>
<DataTemplate x:DataType="data:Playlist">
// Something
</DataTemplate>
</controls:TabView.ItemHeaderTemplate>
<controls:TabView.ItemTemplate>
<DataTemplate x:DataType="data:Playlist">
<local:HeaderedPlaylistControl IsPlaylist="True" Loaded="HeaderedPlaylistControl_Loaded" />
</DataTemplate>
</controls:TabView.ItemTemplate>
<controls:TabView.TabStartHeader>
// Something
</controls:TabView.TabStartHeader>
<controls:TabView.TabEndHeader>
// Something
</controls:TabView.TabEndHeader>
<controls:TabView.Footer>
<RelativePanel
x:Name="PlaylistFooter"
Height="{StaticResource PlaylistTabFooterHeight}"
RenderTransformOrigin="0,0">
<RelativePanel.RenderTransform>
<TranslateTransform />
</RelativePanel.RenderTransform>
<local:IconTextButton
x:Name="ShowAllPlaylistButton"
Padding="10,5"
IconTextMargin="0,0,10,0"
LabelPosition="Left"
RelativePanel.AlignRightWithPanel="True"
Style="{StaticResource PlaylistIconTextButtonStyle}"
ToolTipService.ToolTip="Show All Playlists">
<local:IconTextButton.Icon>
<FontIcon
x:Name="UpArrowIcon"
FontFamily="Segoe MDL2 Assets"
FontWeight="{x:Bind ShowAllPlaylistButton.FontWeight}"
Glyph=""
RenderTransformOrigin=".5,.5">
<FontIcon.RenderTransform>
<RotateTransform />
</FontIcon.RenderTransform>
</FontIcon>
</local:IconTextButton.Icon>
<local:IconTextButton.Flyout>
<MenuFlyout Closed="ClosePlaylistsFlyout" Opening="OpenPlaylistsFlyout" />
</local:IconTextButton.Flyout>
</local:IconTextButton>
<local:IconTextButton
x:Name="SortByButton"
Padding="10,5"
HorizontalAlignment="Right"
Icon="Sort"
IconTextMargin="10,0,0,0"
Label="Sort By Title"
LabelPosition="Right"
RelativePanel.AlignLeftWithPanel="True"
Style="{StaticResource PlaylistIconTextButtonStyle}"
Tapped="SortByButton_Tapped"
ToolTipService.ToolTip="Sort Playlists" />
</RelativePanel>
</controls:TabView.Footer>
</controls:TabView>
我在local:HeaderedPlaylistControl
中有一个ItemTemplate
,基本上是ListView
。我想实现这样的效果,当您向下滚动页脚时,它会向下平移,而当您向上滚动页脚时,它会快速显示。
我能够实现这种效果。但是,我仅移动PlaylistFooter
而不移动TabView.Footer
,这意味着Footer
徘徊并在底部留有空白,如下图所示。我如何也可以移动页脚?
答案 0 :(得分:1)
我检查了您的代码,发现您已经为TranslateTransform
实现了PlaylistFooter
,如果仅向下移动PlaylistFooter
而不将Visibility设置为Collapsed
,则页脚仍会显示,因此更好的方法是将“可见性”设置为Collapsed
。
<VisualStateGroup x:Name="FooterVisibilityStates">
<VisualState x:Name="FooterFadeIn">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlaylistFooter" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaylistFooter" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="Visibility" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FooterFadeOut">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlaylistFooter" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaylistFooter" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaylistFooter" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0" Value="False" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
更新
与Seaky Luo讨论后,我们找到了一个解决方案,当列表视图向下滚动时,将PlaylistFooter
的高度设置为0。有关更多信息,请参考以下代码。
<Storyboard x:Name="HideFooterAnimation">
<DoubleAnimation
Storyboard.TargetName="PlaylistFooter"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
To="0"
Duration="0:0:0.1" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PlaylistFooter"
Storyboard.TargetProperty="Height"
Duration="0:0:0.1">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PlaylistTabFooterHeight}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="ShowFooterAnimation">
<DoubleAnimation
Storyboard.TargetName="PlaylistFooter"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
To="{StaticResource PlaylistTabFooterHeight}"
Duration="0" />
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PlaylistFooter"
Storyboard.TargetProperty="Height"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>