Listview 在通用应用程序 Windows 10 中正确调整大小答案

【问题标题】：Listview is resizing correctly in Universal App Windows 10Listview 在通用应用程序 Windows 10 中正确调整大小
【发布时间】：2015-12-08 00:21:07
【问题描述】：

我有一个 XAML 页面，它按如下网格划分：

<Grid Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
 </Grid>

第一行和第三行各包含一个TextBlock，并设置为自动调整到它们的高度，ListView 包含在中间行中，它应该在该区域内拉伸。

ListView 似乎根据项目的数量而不是应该分配给中间行的可用可见区域调整大小。

这有两个副作用：

我无法滚动查看其他项目
它将第三行中的TextBlock 推出屏幕。

如果我在 ListView 上设置特定高度，它会按预期工作，但我希望我的 ListView 使用顶部和底部行之间的整个屏幕区域。

它在 IDE 中按预期显示，但没有加载数据，但我可以清楚地看到我的顶行和底行（绿色），我可以看到 ListView 在这两行之间拉伸。

我过去曾多次使用此功能，但使用的是适用于 Windows 10 的通用应用程序，所以我想知道这是我不知道的新行为还是错误？

为了清楚起见，这是没有 DataTemplate 的完整代码。为了清楚起见，我的 DataTemplate 显示正确，但我无法滚动，因为没有滚动条，因为列表视图是根据项目拉伸的，而不是被限制在中间行的可用区域。

<Grid Background="Green">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Top Row" />
    <ListView ItemsSource="{Binding Items}" 
              Grid.Row="1" 
              Background="Red">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                     ....
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <TextBlock Text="bottom row" Grid.Row="2"/>
</Grid>

【问题讨论】：

正如我尝试使用简单的 TextBlock 作为 DataTemplate，我在设备和模拟器上没有遇到问题。可以分享一个示例项目吗？

标签： c# win-universal-app

【解决方案1】：

您需要将 ListView 包装在 ScrollView 中。这将填充空白区域并在列表溢出空白区域时添加滚动条。

【讨论】：

嗨，当我看到你的评论时，我满怀希望地认为我认为没有必要因为 ListView 应该处理这个问题，但我认为值得一试，但事实并非如此工作。我刚刚发现一篇文章，我认为这是一个错误，解决它的唯一方法是设置高度，这不是解决方案，因为我希望它可以在多个设备上工作：social.msdn.microsoft.com/Forums/en-US/…
请注意：ListView 在内部通过其控制模板包含一个 ScrollViewer。将其放入另一个滚动视图或堆栈面板将禁用其数据虚拟化功能。正如@Romasz 上面所说，该代码应该可以工作，它必须是您项目中的其他内容。

【解决方案2】：

我发现了问题所在。这不是行为改变或错误！

正如有人提到他们试图重现问题但无法重现，我决定也这样做。

当我将网格和 ListView 直接放在 MainPage 上时，我无法重现它。
当我将网格和 ListView 放在子页面（即 GridPage）上并将其加载到 MainPage 中包含的框架中时，我无法重现它

那是一分钱下降的时候！

在我的代码中，我（第一次）使用了一个 SplitView，这个 SplitView 包含在一个有 2 行的网格中，而且愚蠢的是，当我应该将第一行设置为 Auto 时，两行都设置为“Auto”我的汉堡菜单、标志和标题，第二个应该设置为“*”。

当我将第二行更改为“*”时，问题就解决了。它与包含我最初发布问题的网格的网格页面无关。

<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

这里是完整的代码：

<Grid Background="{ThemeResource FocusVisualWhiteStrokeThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Background="White" 
            Grid.Row="0" 
            Grid.Column="0" 
            Margin="0,10,0,10">
            <ToggleButton Style="{StaticResource SymbolButton}" 
     Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
     FontSize="{ThemeResource ControlContentThemeFontSize}"
     Command="{Binding HamburgerCommand}" >
                <FontIcon x:Name="Hamburger" 
                 FontFamily="Segoe MDL2 Assets" 
         Glyph="&#xE700;" 
         Foreground="#ff6600" />
            </ToggleButton>
        </Border>
        <Border Background="White" Grid.Row="0" 
         Grid.Column="1" Margin="10,0,0,0">
            <Image Stretch="Fill" Source="{Binding SelectedSection, 
             Converter={StaticResource SectionImageConverter}}" 
             Height="20" Width="20" />
        </Border>
        <Border Background="White" 
            Grid.Row="0" 
            Grid.Column="2"
            Margin="10,0,0,0">
            <TextBlock x:Name="Header" Text="{Binding SelectedSection,
             Converter={StaticResource 
             SectionTitleConverter}}" 
             Style="{StaticResource TagLineTextStyle}" 
             Foreground="#ff6600" 
             VerticalAlignment="Center" 
             Margin="10,0,0,0"/>
        </Border>
    </Grid>

    <SplitView x:Name="Splitter"
        IsPaneOpen="{Binding IsPageOpen}"  
        DisplayMode="Inline" 
        Grid.Row="1">
        <SplitView.Pane>
            <ListBox x:Name="SectionControl" SelectionMode="Single"
                ItemsSource="{Binding Sections}"
                HorizontalAlignment="Left" 
                Background="White" 
                BorderThickness="0"
                VerticalAlignment="Top"
                SelectedItem="{Binding 
                                    SelectedSection, Mode=TwoWay}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Converter={StaticResource
                             SectionImageConverter}}" 
                             Height="17" Width="17"/>
                            <TextBlock Text="{Binding 
                             Converter={StaticResource
                             SectionTitleConverter}}"
                                Margin="20,0,0,0"
                                Foreground="#ff6600" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="SelectionChanged">
                        <Core:InvokeCommandAction Command="{Binding
                         ItemClickCommand}" 
                         CommandParameter="{Binding SelectedSection}" />
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame x:Name="SectionFrame"/>
        </SplitView.Content>
    </SplitView>
</Grid>

再次感谢您的反馈/帮助。非常感谢！

【讨论】：