Show ListView items below the View

Question

I would like to create a transparency effect like in the Groove Music App's control bar as shown in the picture. The scroll bar seems to end above the blue bar so it seems that the actual ListView doesn't go below the bar. So how is it possible to make the invisible content of the ListView/ScrollViewer which is hidden below visible again?

Answer 1

As @AVK said, to implement the UI as shown in the picture, we can put the ScrollViewer and Blue Bar in a Grid first, then set the Blue Bar's VerticalAlignment to Bottom and give it a Opacity. The Blue Bar should have a fixed Height.

Then the key point here is setting Margin for the content and VerticalScrollBar in the ScrollViewer. The VerticalScrollBar is in the template of ScrollViewer. To modify the template of ScrollViewer, we can select the "[ScrollViewer]" in "Document Outline" and right click, then select "Edit Templates" → "Edit a Copy...". Then in the template, we can set Margin for VerticalScrollBar 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}"/>

Following is a complete sample demonstrates this:

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

And it looks like