在视图下方显示 ListView 项答案

【问题标题】：Show ListView items below the View在视图下方显示 ListView 项
【发布时间】：2018-04-03 18:34:53
【问题描述】：

我想在 Groove 音乐应用程序的控制栏中创建一个透明效果，如图所示。滚动条似乎在蓝色条上方结束，因此实际的 ListView 似乎没有低于该条。那么如何让隐藏在下方的ListView/ScrollViewer的不可见内容再次可见呢？

【问题讨论】：

在网格中添加 ListView 和 Blue Bar 视图。使蓝条垂直对齐到底部。使其不透明度为 0.50。这应该小心。
不，这就是重点，我不想把ListView放在后面，我想显示被滚动到底部的Items，否则ListViews ScrollBar也会在蓝条后面并且列表的最后一项将无法点击。
我刚刚注意到，当最后一个元素向上滚动时，windows phone 上的 UI 有一个小跳跃。这肯定与某些触发器有关。

【解决方案1】：

正如@AVK所说，要实现如图所示的UI，我们可以先将ScrollViewer和Blue Bar放在一个Grid中，然后将Blue Bar的VerticalAlignment设置为Bottom并给它一个Opacity .蓝条应该有一个固定的Height。

那么这里的重点是为内容设置Margin，在ScrollViewer中设置VerticalScrollBar。 VerticalScrollBar 在ScrollViewer 的模板中。要修改ScrollViewer的模板，我们可以在“Document Outline”中选择“[ScrollViewer]”并右键，然后选择“Edit Templates" → "编辑副本..."。然后在模板中，我们可以为VerticalScrollBar设置Margin like：

 <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="0,0,0,64" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>

以下是一个完整的示例演示了这一点：

<Page x:Class="UWPApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:UWPApp"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
            <Setter Property="HorizontalScrollMode" Value="Auto"/>
            <Setter Property="VerticalScrollMode" Value="Auto"/>
            <Setter Property="IsHorizontalRailEnabled" Value="True"/>
            <Setter Property="IsVerticalRailEnabled" Value="True"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="ZoomMode" Value="Disabled"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="MouseIndicator" To="NoIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation BeginTime="0:0:3" TargetName="ScrollBarSeparator"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                        <VisualTransition From="TouchIndicator" To="NoIndicator">
                                            <Storyboard>
                                                <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="NoIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="TouchIndicator">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ScrollBarSeparator"/>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseIndicator">
                                        <Storyboard>
                                            <FadeInThemeAnimation TargetName="ScrollBarSeparator"/>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="VerticalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IndicatorMode" Storyboard.TargetName="HorizontalScrollBar">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
                                <Grid Grid.ColumnSpan="2" Grid.RowSpan="2"/>
                                <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="0,0,0,64" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                <ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                                <Border x:Name="ScrollBarSeparator" Background="{ThemeResource ScrollViewerScrollBarSeparatorBackground}" Grid.Column="1" Grid.Row="1"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer Style="{StaticResource ScrollViewerStyle1}">
            <StackPanel Margin="0,0,0,64">
                <StackPanel.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="15" />
                        <Setter Property="Margin" Value="15" />
                    </Style>
                </StackPanel.Resources>
                <TextBlock>Test 1</TextBlock>
                <TextBlock>Test 2</TextBlock>
                <TextBlock>Test 3</TextBlock>
                <TextBlock>Test 4</TextBlock>
                <TextBlock>Test 5</TextBlock>
                <TextBlock>Test 6</TextBlock>
                <TextBlock>Test 7</TextBlock>
                <TextBlock>Test 8</TextBlock>
                <TextBlock>Test 9</TextBlock>
                <TextBlock>Test 10</TextBlock>
                <TextBlock>Test 11</TextBlock>
                <TextBlock>Test 12</TextBlock>
            </StackPanel>
        </ScrollViewer>
        <Rectangle Height="64" VerticalAlignment="Bottom" Fill="#FF0085FF" Opacity="0.8" />
    </Grid>
</Page>

它看起来像

【讨论】：

感谢您的想法我解决了类似的问题，但 UWP 中有一条重要规则：永远不要将 ListView 放入 ScrollViewer，因为它在移动设备上的触摸交互上非常有问题。所以我所做的是创建一个 ListView 样式模板。 ListView 样式包含一个 ScrollViewer 和一个 ItemsPresenter 。在 ScrollViewer 我添加了属性 Style="{StaticResource ScrollViewerStyle1}"> 并将 Margin 设置为 ItemsPresenter
P.S.如果您可以更新您的解决方案，那就太好了，没有其他人会想到将 ListView 放入 ScrollViewer，因为作为 W10M 用户，这真的很烦人。商店中仍有许多应用程序做错了。
这里使用的ListView 只是为了方便，因为我没有限制ListView 的高度，所以它不能滚动。但你是对的，将ListView 放入ScrollViewer 不是一个好习惯。对于模板中已经有ScrollViewer 的控件，我们可以直接编辑它们的模板。我会更新我的答案。感谢您指出。