Listview在Universal App Windows 10中的大小调整正确

本文关键字：调整 Universal App Windows Listview | 更新日期: 2023-09-27 18:25:58

我有一个XAML页面，它被网格分解如下：

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

第一行和第三行各包含一个TextBlock，并设置为根据其高度自动调整大小，而ListView包含在中间一行中，并假设它在该区域内拉伸。

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

这有两个副作用：

  1. 我无法滚动查看其他项目
  2. 它将第三行的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>

Listview在Universal App Windows 10中的大小调整正确

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

我解决了这个问题。这不是行为上的改变，也不是bug！

当有人提到他们试图重现这个问题，但做不到时，我决定也这样做。

  1. 当我把我的网格和ListView直接放在主页上时，我无法复制它

  2. 当我把我的网格和ListView放在一个子页面（即GridPage）上并将其加载到MainPage上包含的框架中时，我无法复制它

就在那时，钱掉了！！

在我的代码中，我（第一次）使用了一个SplitView，这个SplitView包含在一个有2行的网格中，愚蠢的是，这两行都被设置为"自动"，而我本应该为汉堡菜单、徽标和标题将第一行设置为自动，而第二行则应该设置为"*"。

当我把第二排改成"*"时，问题就解决了。它与网格页面无关，其中包含我最初发布的问题网格。

<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>

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

相关文章：