ListView滚动整个布局/页面

Question

How can I make the ListView/Layout scroller to behave like modern layout like in android or windows 10. Currently the ListView scrollbar only applies to the ListView itself. I want the scroller to scroll the whole layout including the search bar in XAML.

I want also the ListView Items added to increment to the overall height of the ListView to achieve the effect.

Any available ways to do it with Native wpf xaml (No frameworks/dlls, just pure xaml/c#)

Code:

<local:BasePage x:Class="GeneralMerchandise.UI.Pages.UsersPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:a="clr-namespace:GeneralMerchandise.UI.AttachedProperties"
  xmlns:local="clr-namespace:GeneralMerchandise.UI.Pages"
  xmlns:c="clr-namespace:GeneralMerchandise.UI.Converter"        
            xmlns:viewmodel="clr-namespace:GeneralMerchandise.UI.ViewModel"
            mc:Ignorable="d" 
  d:DesignHeight="450" d:DesignWidth="800"
  Title="UsersPage">
<Page.DataContext>
    <viewmodel:UsersViewModel x:Name="VM"/>
</Page.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>

    </Grid.RowDefinitions>
    <StackPanel Orientation="Vertical"
                Grid.Row="0" 
                Background="{StaticResource DefaultBackground}">
        <TextBlock FontSize="{StaticResource FontSizeXLarge}"
               Text="Users" />
        <Border BorderThickness="0 0 0 1">
            <Grid>
                <StackPanel Orientation="Vertical" Width="300">

                    <TextBox Style="{StaticResource FlatTextBox}"
                             Width="270"
                             Margin="8"
                             a:Hint.TextProperty="Search"
                             a:ClearableText.EnableClearTextProperty="True"
                             Text="{Binding Search, UpdateSourceTrigger=PropertyChanged}"/>

                    <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Center">
                        <StackPanel.Resources>
                            <Style TargetType="RadioButton" BasedOn="{StaticResource FlatToggle}">
                                <Setter Property="Padding"
                                        Value="15 10"/>
                                <Setter Property="BorderThickness"
                                        Value="0 0 0 3"/>

                            </Style>
                        </StackPanel.Resources>
                        <RadioButton GroupName="Filter"
                                     Content="All"
                                     IsChecked="True" 
                                     Command="{Binding FilterActiveCommand}"
                                     CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.None }"/>
                        <RadioButton GroupName="Filter" 
                                     Content="Active"
                                     Command="{Binding FilterActiveCommand}"
                                     CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Active }"/>
                        <RadioButton GroupName="Filter" 
                                     Content="Deactived"
                                     Command="{Binding FilterActiveCommand}"
                                     CommandParameter="{x:Static viewmodel:UsersViewModel+FilterActiveProperty.Deactivated }"/>
                    </StackPanel>
                </StackPanel>
                <Button DockPanel.Dock="Right"
                Content="New"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Command="{Binding NewUserCommand}"/>
            </Grid>
        </Border>
    </StackPanel>

    <ListView Grid.Row="2" 
              Background="Transparent"
              ItemsSource="{Binding UsersDisplay}" 
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              ScrollViewer.VerticalScrollBarVisibility="Auto"
              BorderThickness="0"
              Padding="20">
        <ListView.Resources>
            <c:UserDisplayDataFullnameConverter x:Key="FullnameConverter"/>
            <c:BoolToValueConverter TrueValue="Active" FalseValue="Deactivated" x:Key="BoolToStringConverter"/>
        </ListView.Resources>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel HorizontalAlignment="Left" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>


        <ListView.ItemTemplate>
            <DataTemplate>
                <Button Style="{StaticResource PlainButton}"
                        Background="White"
                        DataContext="{Binding}"
                        Width="250"
                        Height="150"
                        Padding="5"
                        BorderThickness="2"
                        Margin="{StaticResource MarginSmall}"
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Stretch">
                    <Button.ToolTip>
                        <ToolTip>
                            <TextBlock Text="NAME"/>
                        </ToolTip>
                    </Button.ToolTip>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Ellipse Grid.Column="0" 
                                 Margin="5"
                                 VerticalAlignment="Top"
                                 Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" 
                                 Fill="{StaticResource LightGrayBrush}"/>
                        <Ellipse Grid.Column="0"
                                 Margin="5"
                                 VerticalAlignment="Top"
                                 x:Name="userPicturePopup"
                                 Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}" 
                                 Width="Auto">
                            <Ellipse.Fill>
                                <ImageBrush ImageSource="{StaticResource UserIconMedium}"/>
                            </Ellipse.Fill>
                        </Ellipse>
                        <StackPanel Grid.Column="1"
                                    Orientation="Vertical">
                            <TextBlock Text="{Binding Converter={StaticResource FullnameConverter}}" 
                                       TextWrapping="WrapWithOverflow"
                                       Margin="10 5"/>
                            <TextBlock Margin="10 5" 
                                       Text="{Binding Created, StringFormat=Created {0:d}}"/>
                            <TextBlock Margin="10 5" 
                                       Text="{Binding IsActive, Converter={StaticResource BoolToStringConverter}, StringFormat=Account Is {0}}"/>
                        </StackPanel>
                    </Grid>
                </Button>
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                            <Border BorderBrush="Transparent"
                                        BorderThickness="3"
                                        Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>

    </ListView>
</Grid>

Answer 1

将您的ListView，搜索栏以及您想滚动的其他任何内容放入ScrollViewer。