UWP 隐藏 TabView 页脚

Question

我的 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="&#xE70E;"
                            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>

我在 ItemTemplate 中有一个 local:HeaderedPlaylistControl，它基本上是一个 ListView。我想实现这样的效果，当你向下滚动时，页脚会向下平移，当你向上滚动时，页脚会快速显示。

我可以实现这样的效果。但是，我只移动 PlaylistFooter 而不是 TabView.Footer，这意味着 Footer 会在底部留下空白 space，如下图所示。我怎样才能同时移动页脚？

Answer 1

我检查了你的代码，我发现你已经为PlaylistFooter实现了TranslateTransform，如果你只是将PlaylistFooter向下移动而不是将Visibility设置为Collapsed，页脚仍然会显示，所以更好的方法是将 Visibility 设置为 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>

UWP 隐藏 TabView 页脚

UWP Hide TabView Footer

c#

xaml

tabview

win-universal-app

uwp