ListView правильно изменение размера в универсальное приложение для Windows 10

Question

У меня есть страница XAML, которая расщепляется с сеткой следующим образом:

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

Первая и третья строка содержит TextBlock каждый и в автоматический режим -resize до их высоты, а ListView содержится в среднем ряду, и предполагается, что он растянут в пределах области.

Элемент ListView изменяется в зависимости от количества элементов, а не доступной видимой области, которая должна быть выделена для средней строки.

Это имеет 2 побочные эффекты:

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> 

Answer 1

Вам необходимо обернуть свой ListView в ScrollView. Это заполнит пустую область и добавит полосу прокрутки, когда список переполняет пустую область.

Answer 2

Я понял, что проблема. Это не изменение в поведении или ошибка!

Как кто-то упомянул, что они пытались воспроизвести проблему и не смогли, я решил сделать то же самое.

1. Когда я поставил свою сетку и ListView непосредственно на MainPage, я не смог воспроизвести ее.

2. Когда я кладу сетку и ListView на вложенную страницу (т.е. GridPage) и загрузить его в рамку, содержащуюся на MainPage, я не мог воспроизвести его

и тогда монетка упал !!

В моем коде я использовал (впервые) SplitView, и этот SplitView содержался в сетке с двумя строками и тупо, обе строки были установлены в «Авто», когда я должен был установить первый в Auto для моего меню гамбургера, логотипа и названия, а для второго - «*».

Второе, что изменило мою вторую строку на '*', проблема была отсортирована.Это не имело ничего общего с страницей Grid, в которой содержалась сетка, с которой я столкнулся с проблемой.

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

Еще раз спасибо за обратную связь/помощи. Очень признателен!