Прокрутка списка внутри сетки — UWP

Я хочу показать список и изображение на странице uwp. Элементы списка добавляются динамически. При загрузке страницы пользователь может видеть полный список. и если он щелкнет любую из строк, представление списка будет фильтроваться на основе этой выбранной строки. Затем пользователь может увидеть отфильтрованный список и изображение под списком. Если пользователь нажмет на изображение, он снова покажет полный список без изображения. Теперь моя проблема заключается в том, что я хочу отображать список с прокруткой (прокрутка должна работать, когда высота списка достигает конца экрана). и если пользователь нажимает на любую строку списка, высота изображения должна заполняться от конца отфильтрованного списка до нижней части экрана. Я сделал, как показано ниже.

<Grid HorizontalAlignment="Stretch"  >
    <Grid.RowDefinitions    >
        <RowDefinition Height="*"  />
        <RowDefinition Height="*"  />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ListView x:Name="ItemListView" Margin="0,0,0,0"  ScrollViewer.VerticalScrollBarVisibility="Auto"   Grid.Row="0"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Width="Auto"  >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid  >
           //binding items here
              </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
       </ListView>
   <Border Background="Green" Grid.Row="1"  x:Name="Bg"  Tapped="Bg_TappedAsync"  Visibility="Collapsed">
   <TextBlock x:Uid="txt_string1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="DetectFromContent" FontSize="15" MaxLines="4" FontFamily="Calibri" FontStyle="Italic"/>    
   </Border>
    </Grid>

Когда мне понравилось выше, как представление списка, так и изображение (в коде это граница) занимают половину половины экрана. Поэтому при отображении отфильтрованного списка (он может иметь только одну строку) между списком и изображением возникает разрыв. Я хочу заполнить изображение оставшейся высотой экрана. Как я могу достичь этого? Я не хочу устанавливать MaxHeight для списка. Потому что он должен работать на устройствах разного размера.


listview xaml uwp grid
person nsds    schedule 03.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы создаете две строки с * вместо RowDefinition.Height, вы получите две строки Grid одинакового размера, что вы и видите. Звездочка дает строке все пространство, оставшееся после оценки всех строк с Auto и жестко заданной высотой в пикселях. Когда есть несколько строк со звездой, они будут делить оставшееся пространство поровну. Вы также можете использовать такие значения, как 2*, чтобы сказать, что высота строки должна быть в два раза больше, чем у строки *, поэтому вы можете создавать «дроби», например 2:1.

Однако в вашем случае вы можете использовать Auto для второй строки Height. Auto даст строке размер, который ей действительно нужен, поэтому, когда изображение не отображается, оно фактически будет иметь нулевую высоту. Когда изображение отображается, оно будет таким же высоким, как изображение, а список займет оставшуюся часть высоты Grid благодаря *.

person Martin Zikmund    schedule 03.04.2018
comment
при использовании auto для высоты 2-х строк между небольшим lisview и границей есть зазор. Есть ли способ заполнить элементы строки списка до высоты списка? означает, ЕСЛИ ИМЕЕТ ТОЛЬКО ОДНУ РЯДКУ, ОН ДОЛЖЕН ЗАПОЛНЯТЬ * ВЫСОТУ СЕТКИ - person nsds; 03.04.2018
comment
Когда вы используете *, ListView должен заполнить доступный размер экрана, если для этого достаточно элементов. - person Martin Zikmund; 03.04.2018
comment
НЕТ, при задании черного цвета фона для списка, который имеет только одну строку, эта строка занимает верхнюю часть списка. И может видеть, что оставшийся черный фон заполняет доступный размер экрана, - person nsds; 03.04.2018
comment
при задании ‹Grid.RowDefinitions › ‹RowDefinition Height=auto /› ‹RowDefinition Height=* /› ‹/Grid.RowDefinitions› это соответствует моему требованию, но прокрутка списка отсутствует - person nsds; 03.04.2018
comment
@nsds, вид прокрутки действует только тогда, когда родительский элемент управления имеет высоту, например, фиксированную высоту или максимальную высоту. Если вы хотите, чтобы средство просмотра прокрутки работало так же, как высота может гибко адаптироваться, вы можете установить MaxHeight или настроить код высоты позади, или использовать адаптивный триггер. - person Sunteen Wu; 11.05.2018