Изображения UWP FlipView из URI (Интернет)

На самом деле, у меня есть список с URI изображений. Внутри цикла foreach я создаю объекты Image из этих URI следующим образом:

foreach (Uri imageUri in uriList)
{
    BitmapImage bmi = new BitmapImage(new Uri(imageUri));
    Image image = new Image();
    image.source = bmi;

    flipView.Items.Add(image);
}

Теперь проблема в том, что если есть много изображений (100-200), то использование ОЗУ очень велико при быстром пролистывании через FlipView. Я также видел, что каждое изображение будет «кешироваться» или что-то в этом роде, поэтому, если я вернусь в FlipView, интернет-трафик больше не будет генерироваться.

Итак, мой вопрос: правильный ли это способ сделать это, или есть ли лучшие способы получить «Галерею изображений» из веб-изображений?

С уважением


.net c# win-universal-app windows-10-universal flipview
person andy    schedule 09.09.2016    source источник
comment
Думаю проблема возможно не с FlipView, нужно время чтобы преобразовать uri в Image и добавить в FlipView, а он все элементы конвертирует одновременно. Может быть, вы можете попробовать преобразовать изображения в частицу, например преобразовать и добавить в filpview каждый раз 20 изображений, а затем показать его. Когда пользователь доходит до десятого элемента, продолжать добавлять следующие 20 элементов и так далее?   -  person Grace Feng    schedule 12.09.2016
comment
Я протестировал его с 8 большими изображениями, потребление памяти также огромно.   -  person andy    schedule 12.09.2016
comment
Я только что попытался использовать ItemTemplate из FlipView, прямо указать строку uri в качестве источника управления изображением, кажется, это работает немного быстрее, но со многими огромными изображениями... Я не уверен, что это будет хорошей практикой. Я понятия не имею, кроме частиц, показывающих сейчас... Извините.   -  person Grace Feng    schedule 12.09.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

Во-первых, вам нужно изменить стиль ListView, чтобы изменить свойство HorizontalSnapPointsType на MandatorySingle (чтобы изображение можно было привязать к правильному положению, например, в перевернутом представлении). Ширина ячейки должна быть равна старой ширине flipview, чтобы гарантировать, что

person thang2410199    schedule 09.09.2016
comment
Flip View не поддерживает виртуализацию, как вы можете быть так уверены?! - person AymenDaoudi; 09.09.2016
comment
Я думаю, что он прав, я проверил его, и использование памяти все еще очень велико. Но как я могу использовать ListView, который ведет себя так же, как FlipView? - person andy; 10.09.2016
comment
Во-первых, вам нужно изменить стиль ListView, чтобы изменить свойство HorizontalSnapPointsType на MandatorySingle (чтобы изображение можно было привязать к правильному положению, как при просмотре с переворотом). Ширина ячейки должна быть равна старой ширине flipview, чтобы гарантировать это. Извините за упущенную информацию, ItemsPanelTemplate по умолчанию для FlipView — VirtualizingStackPanel, который поддерживает виртуализацию. - person thang2410199; 11.09.2016
comment
Хорошо, это работает, спасибо. Но я не могу понять, как сделать так, чтобы ширина элемента растягивалась до ширины экрана. Я протестировал несколько параметров в ListView и стиле ListViewItem, но элементы либо менее широки, чем, поэтому я уже вижу следующий элемент, либо они шире. Как я могу этого добиться? - person andy; 11.09.2016
comment
Вы должны привязать ширину элемента к статическому значению (например, ширине экрана). Рад, что это работает для вас, можете ли вы принять это как ответ. - person thang2410199; 11.09.2016
comment
Я ограничил ширину, но проблема в том, что если я изменю размер окна, фактическое отображаемое изображение не подходит, и оно будет обрезано, или будет отображаться часть следующего изображения. Моя цель - сделать его похожим на приложение Microsoft photos (изменение размера изображения при изменении размера окна). Если это работает, то, конечно, я приму ваш пост в качестве ответа. - person andy; 11.09.2016
comment
при изменении размера окна вы должны уведомить об изменении свойства, поэтому ваша привязка будет обновляться по мере изменения размера. Вы можете отслеживать изменение размера, используя событие SizeChanged окна/фрейма. Элемент управления Image изменит размер фотографии в зависимости от свойства Stretch. - person thang2410199; 11.09.2016
comment
Итак, мне нужно связать элемент управления изображением внутри моего DataTemplate? Другая проблема заключается в том, что если я привязываю Window.Current.Bound.Width, изображение по-прежнему шире доступного пространства. - person andy; 11.09.2016
comment
первый вопрос: да. Вы должны использовать RenderWidth ListView - person thang2410199; 11.09.2016
comment
RenderWidth возвращает 0, если не установлено содержимое (ListViewItems), так что это проблема. - person andy; 11.09.2016
comment
вне его внутри сетки, растяните его как по вертикали, так и по горизонтали и используйте RenderWidth этой сетки? - person thang2410199; 11.09.2016
comment
Я сделал это, но он возвращает только значение, если хотя бы один элемент находится внутри ListView. - person andy; 11.09.2016
comment
когда он получает значение? Вы должны получить его после инициализации элементов. - person thang2410199; 11.09.2016
comment
Обычно после инициализации размер элементов управления должен быть доступен, да. Но ListView не дает мне размера, пока я не добавлю к нему хотя бы один элемент. - person andy; 12.09.2016
comment
Вы пытались получить размер из контейнера ListView в этом случае? - person thang2410199; 12.09.2016
comment
Хорошо, теперь это работает. Большое спасибо за вашу большую помощь, я отметил ваш ответ как решение. - person andy; 12.09.2016

arrow_upward
1
arrow_downward

Из MSDN FlipView лучше всего подходит для коллекции из них не превышает 25 элементов (изображений).

Лучшее, что вы можете сделать, это добавить `DataVirtualization к вашему FlipView, например, выполнив:

<FlipView>
    <FlipView.ItemsPanel>
      <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Horizontal"/>
      </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
</FlipView>

Что касается «кеширования» ваших изображений, это нормально, BitmapeImages кэширует ваши изображения по умолчанию.

person AymenDaoudi    schedule 09.09.2016
comment
Это не работает, использование памяти по-прежнему очень велико при быстром пролистывании элементов, а использование памяти остается высоким, если я перестаю пролистывать элементы. - person andy; 10.09.2016