首页 > 解决方案 > 如何在保持 ScrollViewer 启用的同时动态更新 ListView 高度?

问题描述

ListView 放置在 UserControl 中,在父 XAML 中设置为星号“*”高度。当有超过 ListView 的项目时,我想使用 ListView 来滚动项目。它应该适用于不同大小的窗口。

当我使用固定整数设置 Grid 的 RowDefinitions 时它工作正常,但是当我尝试使用 asterix "*" ScrollViewer 时禁用。

我还尝试通过覆盖的 MeasureOverride 方法中的一些代码绑定和更新 RowDefinition 的高度,但它没有按预期工作。

这是我的用户控件中的代码:

<Grid x:Name="ContentArea"
          Background="{StaticResource MixerBackground}">
        <Grid.RowDefinitions>
            <RowDefinition Height="{x:Bind ListViewHeight}" />
        </Grid.RowDefinitions>
        <ListView
            ItemsSource="{x:Bind ViewModel.Source,Mode=TwoWay}"
            CanDragItems="True"
            CanReorderItems="True"
            AllowDrop="True"
            SelectionMode="Single"
            ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:Track">
                    <Grid
                        Background="LightGray"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Stretch"
                        BorderBrush="Black">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="100"/>
                        </Grid.RowDefinitions>

                        <TextBlock
                            Text="{x:Bind Id}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            FontSize="24"
                            Margin="20,5,20,5"/>

                        <Grid
                            Background="Black"
                            Width="500"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Grid.Column="1">
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

我希望 ScrollViewer 正常工作,但 ListView 保持旧大小或滚动条被禁用 - 取决于高度值。

有什么办法可以通过滚动来实现动态调整 ListView 的大小?

编辑

这是通过 Light MVVM 框架加载到 Frame 中的父 Page XAML 代码:

<Grid
        x:Name="ContentArea">
        <Grid
            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
                <RowDefinition Height="*" />
                <RowDefinition Height="300" />
            </Grid.RowDefinitions>
            <maineditor:MainEditorMenuControl x:Name="ProjectMenu" />
            <maineditor:MainEditorWorkspaceControl x:Name="Workspace" Grid.Row="1"/>
            <maineditor:MainEditorMixerControl x:Name="Mixer" Grid.Row="2" />
        </Grid>
    </Grid>

现在的样子,以及尝试 Nico 解决方案之后的样子(图片)

编辑 2 我认为问题可能与我使用 Visual Studio 的 Windows Template Studio 插件创建的 MVVM 模板有关。如果我尝试从头开始重新创建具有所有属性 1:1 的最小解决方案,就像在我的应用程序中一样,它适用于新项目,但不适用于我的项目。

标签: xamllistviewuwpscrollviewuwp-xaml

解决方案


如何在保持 ScrollViewer 启用的同时动态更新 ListView 高度?

如果你想让RowDefinitionheight 与 相同ListView,你可以给 ListView 一个名字并使用{Binding ElementName=MyListView,Path=ActualHeight}语法来绑定两个 height 属性。

<Grid x:Name="ContentArea">
    <Grid.RowDefinitions>
        <RowDefinition Height="{Binding ElementName=MyListView,Path=ActualHeight}" />
    </Grid.RowDefinitions>
    <ListView
    Name="MyListView"
    CanDragItems="True"
    CanReorderItems="True"
    AllowDrop="True"
    Loaded="MyListView_Loaded"
    SelectionMode="Single"
    ScrollViewer.VerticalScrollBarVisibility="Visible">
        <ListView.ItemTemplate>
            <DataTemplate >
                <Grid
                Background="LightGray"
                HorizontalAlignment="Left"
                VerticalAlignment="Stretch"
                BorderBrush="Black">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="100"/>
                    </Grid.RowDefinitions>

                    <TextBlock
                    Text="{Binding}"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"
                    FontSize="24"
                    Margin="20,5,20,5"/>

                    <Grid
                    Background="Black"
                    Width="500"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Grid.Column="1">
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

在此处输入图像描述


推荐阅读