在视图下方显示 ListView 项

Question

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

Answer 1

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

那么这里的重点就是设置内容Margin和ScrollViewer中的VerticalScrollBar。 VerticalScrollBar 在 ScrollViewer 的模板中。要修改ScrollViewer的模板，我们可以select“文档大纲”中的“[ScrollViewer]”和右键单击，然后 select“编辑模板”→“编辑副本...”。然后在模板中，我们可以为 VerticalScrollBar 设置 Margin，例如：

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

看起来像

在视图下方显示 ListView 项

Show ListView items below the View

uwp

uwp-xaml