UWP 隐藏 TabView 页脚

Posted 2023-04-12

【中文标题】UWP 隐藏 TabView 页脚

【英文标题】：UWP Hide TabView Footer

【发布时间】：2020-01-23 18:48:32

【问题描述】：

我的 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 徘徊并在底部留下一个空白区域，如下图所示。我如何也可以移动页脚？

【参考方案1】：

我检查了你的代码，我发现你已经为PlaylistFooter实现了TranslateTransform，如果你只是将PlaylistFooter向下移动而不将可见性设置为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>

【讨论】：

我不是在寻找淡入/淡出效果，而是在寻找元素翻译。我希望页脚及其内容同时向下移动。

是的，更好的方法是自定义 TabView 并为 footer 添加上面的 VisualState，然后在您的列表视图上下滚动时调用这两个视觉状态。很难设计

如果要我自定义，哪里可以找到TabView的源码样式？我认为将TabView.Footer 背景设置为透明可能更容易。

你也可以在上面的代码中添加翻译，但是当页脚隐藏时它会闪烁。 <DoubleAnimation Storyboard.TargetName="TranslateVertical" Storyboard.TargetProperty="Y" From="0.5" To="30" Duration="0:0:0.4" />

我已经分享了上面的TableView style。