文章/答案/技术大牛

发布

问UWP隐藏TabView页脚
EN

Stack Overflow用户

提问于 2019-09-23 16:45:14

回答 1查看 189关注 0票数 0

我的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中有一个ItemTemplate，它基本上是一个ListView。我想实现这样的效果:当你向下滚动时，页脚将向下转换，当你向上滚动时，页脚会迅速显示出来。

我能够做到这一点。但是，我只是移动PlaylistFooter，而不是TabView.Footer，这意味着Footer在底部留下一个空白，如下图所示。我怎么也能移动页脚呢？

xaml

uwp

win-universal-app

tabview

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-24 02:56:48

我检查了您的代码，我发现您已经为PlaylistFooter实现了PlaylistFooter，如果您只是向下移动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讨论后，我们找到了一个解决方案，当列表视图向下滚动时，将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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58066844

复制

相似问题

问UWP隐藏TabView页脚
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UWP隐藏TabView页脚EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UWP隐藏TabView页脚
EN