ListView滚动整个布局/页面

Question

如何使ListView / Layout滚动条的行为类似于android或Windows 10中的现代布局。目前，ListView滚动条仅适用于ListView本身。我希望滚动器滚动整个布局，包括XAML中的搜索栏。

我还希望添加的ListView项目增加到ListView的整体高度以实现效果。

使用本机wpf xaml的任何可用方法（无框架/ dll，仅纯xaml / c＃）

代码：

<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中滚动的其他任何内容放入

。