当我在UWP XAML C＃中滚动Liew时垂直滚动

Question

I have a problem in UWP . I have a page contains a grid (it holds a bit of top of page) and below this Grid there is a pivot that contains two pivot items and every pivot item contains a list view.

I want to do something that when I scroll vertically(up to down) in these list views then my original page scroll to when the top grid get hidden.

Here's what I'm looking for:

and here it is a source of my XAML :

<Page x:Name="ThisPage"
x:Class="BindingSample2.PageCategories.PageArtistInfo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BindingSample2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <RelativePanel Grid.Row="0">
            <Grid x:Name="ArtistPoster" Height="200" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                <StackPanel x:Name="ArtistInfoGrid" Padding="20" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Orientation="Horizontal">
                    <StackPanel.Background>
                        <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                            <GradientStop Color="{StaticResource AppBackgroundColor }"/>
                            <GradientStop Color="Transparent" Offset="0.85"/>
                            <GradientStop Color="Transparent" Offset="1"/>
                        </LinearGradientBrush>
                    </StackPanel.Background>
                    <Grid>
                        <Ellipse x:Name="ArtistThemb" Stretch="Uniform" Height="100" Width="100">
                            <Ellipse.Fill>
                                <ImageBrush Stretch="Fill" ImageSource="ms-appx:///Assets/WSLogo.png"/>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                    <Grid x:Name="MoreInfo" VerticalAlignment="Center" Margin="10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <TextBlock x:Name="ArtistName" Grid.Row="0" Text="ArtistName"/>
                        <TextBlock x:Name="ArtistFans" Grid.Row="1" Text="ArtistFans"/>
                    </Grid>
                </StackPanel>
            </Grid>
        </RelativePanel>
        <Pivot Height="{Binding ElementName=ThisPage,Path=ActualHeight,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" x:Name="PagePivot" Grid.Row="1" SelectionChanged="PagePivot_SelectionChanged">
            <PivotItem Header="Albums">
                <Grid>
                    <Grid.Resources>
                        <CollectionViewSource x:Name="ArtistAlbumsCVS"/>
                    </Grid.Resources>
                    <ListView x:Name="FeaturedAlbumsList" ItemsSource="{Binding Source={StaticResource ArtistAlbumsCVS}}"
              SelectionMode="None" IsItemClickEnabled="True"
                          ItemClick="ArtistAlbumsList_ItemClick" ItemContainerStyle="{StaticResource ListViewContainerStrecher}">
                        <ListView.ItemTemplate>
                            <DataTemplate >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="80"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" MaxWidth="60" Source="{Binding poster_60x60}" HorizontalAlignment="Center"/>
                                    <Grid Grid.Column="1" VerticalAlignment="Center">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <TextBlock Grid.Row="0" Text="{Binding artist}"/>
                                        <TextBlock Grid.Row="1" Text="{Binding album}"/>
                                    </Grid>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </PivotItem>
            <PivotItem Header="Songs">
                <Grid>
                    <Grid.Resources>
                        <CollectionViewSource x:Name="ArtistSongsCVS"/>
                    </Grid.Resources>
                    <ListView x:Name="FeaturedList" ItemsSource="{Binding Source={StaticResource ArtistSongsCVS}}" ItemTemplate="{StaticResource MusicItemDataTemplate}"
              SelectionMode="None" IsItemClickEnabled="True" ScrollViewer.BringIntoViewOnFocusChange="True"
                          ItemClick="ArtistSongsList_ItemClick" ItemContainerStyle="{StaticResource ListViewContainerStrecher}">
                    </ListView>
                </Grid>
            </PivotItem>
        </Pivot>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ScreenSizes">
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="550"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ArtistPoster.Height" Value="200"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowHeight="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ArtistPoster.Height" Value="140"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Grid>

Regards

Answer 1

I want to do something that when I scroll vertically(up to down) in these list views then my original page scroll to when the top grid get hidden.

You can find the ScrollViewer in each ListViewer with VisualTreeHelper , then register ViewChanged event of ScrollViewer in the Loaded event of ListView . For example here:

private void FeaturedList_Loaded(object sender, RoutedEventArgs e)
{
    var FeaturedListscrollViewer = FindChildOfType<ScrollViewer>(FeaturedList);
    if (FeaturedListscrollViewer != null)
        FeaturedListscrollViewer.ViewChanged += scrollViewer_ViewChanged;
}

private void FeaturedAlbumsList_Loaded(object sender, RoutedEventArgs e)
{
    var FeaturedAlbumsListscrollViewer = FindChildOfType<ScrollViewer>(FeaturedAlbumsList);
    if (FeaturedAlbumsListscrollViewer != null)
        FeaturedAlbumsListscrollViewer.ViewChanged += scrollViewer_ViewChanged;
}

private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
    if (e.IsIntermediate)
        rtPanel.Visibility = Visibility.Collapsed;
    else
        rtPanel.Visibility = Visibility.Visible;
}

public static T FindChildOfType<T>(DependencyObject root) where T : class
{
    var queue = new Queue<DependencyObject>();
    queue.Enqueue(root);
    while (queue.Count > 0)
    {
        DependencyObject current = queue.Dequeue();
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(current); i++)
        {
            var child = VisualTreeHelper.GetChild(current, i);
            var typedChild = child as T;
            if (typedChild != null)
            {
                return typedChild;
            }
            queue.Enqueue(child);
        }
    }
    return null;
}

As you can see, in the ViewChanged event, if the property IsIntermediate of ScrollViewerViewChangedEventArgs is true, the manipulation is at an intermediate stage and not yet final; if false, the manipulation is final.