UWP隐藏TabView页脚

时间:2019-09-23 16:45:14

标签: c# xaml uwp win-universal-app tabview

我的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>

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

我能够实现这种效果。但是,我仅移动PlaylistFooter而不移动TabView.Footer,这意味着Footer徘徊并在底部留有空白,如下图所示。我如何也可以移动页脚?

Hidden

1 个答案:

答案 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>