C # ScatterView, как связать два элемента вместе, чтобы вести себя как один?

Question

У меня есть элемент управления scatterview, в который я загружаю довольно большие изображения из URL.Изображения различаются по размеру, а иногда изображение слишком велико, чтобы его можно было захватить одним куском, и мне приходится загружать две его половины как отдельные изображения.Я пытаюсь соединить две половины, чтобы они выглядели и вели себя как одно целое.Я убил два дня и получил это близко, но не идеально.Вещи, которые я пробовал: добавить обе половины в StackPanel, которая затем оборачивается ScatterViewItem.По какой-то причине SVI не корректирует свой размер должным образом, если панель намного шире, чем высокая.Я попробовал несколько вещей, включая предложенный стиль в MSDN для настройки SVI высоты / ширины в соответствии с его содержимым.Отлично работает в большинстве случаев, но если изображение длинное и узкое, часть его обрезается * (см. Ниже).

Добавьте обе половины в Canvas.Похоже, что при манипуляциях размер не изменяется должным образом.

Добавьте обе половины в сеткуНе могу получить половинки, чтобы сформировать одно изображение.Странно, что вся сетка правильно отображается SVI, включая длинные изображения.Тем не менее, две половины либо сверху каждой (без горизонтального выравнивания), либо действительно далеко друг от друга (делая определение столбца и устанавливая их в столбцы 0 и 1), или почти идеально, но с небольшим промежутком между ними (устанавливая одну вleft allign, а другой - rightign).

* Пока что StackPanel кажется наиболее перспективным.Я мог бы показать все это, установив SVI MinWidth вручную, но тогда область попадания элемента управления для манипуляции будет больше, чем само изображение.Я пытался поиграться с событием SizeChanged изображений, пытаясь динамически настроить SVI в процессе загрузки изображений так, чтобы оно равнялось их общей ширине рендеринга, но теперь это начинает становиться больше шаманством, чем наукой.,Я собираюсь добавить к этому случайный код и просто надеюсь, что результаты будут полезны или полезны.Я думаю, что отчасти проблема заключается в том, что растровое изображение источника изображения может занять хорошие 5 секунд для фактической загрузки после того, как изображения добавлены в контейнер, и они обернуты в SVI, а svi добавлен в само представление scatterview.Он говорит мне, что каждое изображение имеет высоту NaN, но ActualHeight равное 87, прежде чем растровое изображение будет готово и изображение будет отображено.Как все это влияет на размер панели стека и SVI, я действительно не знаю.

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

Answer 1

Раньше я работал в Microsoft и отвечал за создание элемента управления ScatterView.Этот вопрос состоит из двух частей:

Во-первых, почему размеры ScatterViewItem ведут себя странно?ScatterViewItems автоматически изменяет размеры в зависимости от их содержимого, но при этом применяют 2 ограничения: а) начальная высота и ширина достаточно велики, чтобы пользователь мог удобно захватить элемент, чтобы изменить его размер, и б) начальные высота и ширина достаточно малы, чтобыэлемент занимает не более ~ 20% каждого измерения на экране, оставляя место для других элементов, которые будут видны.Оба эти поведения могут быть переопределены, если вы сами явно задаете свойства Высота и Ширина.

Во-вторых, каков наилучший способ объединения нескольких изображений в один ScatterViewItem?Я рекомендую создать один WriteableBitmap, который будет размером объединенного изображения.Поместите это в ваш ScatterViewItem.Затем, по мере загрузки каждого чанка изображения, вставьте этот чанк в WriteableBitmap.Это позволит повысить производительность и исключить проблемы с визуальными артефактами, появляющимися вдоль швов.

Answer 2

Если StackPanel почти работает, но у вас возникают проблемы с изменением размеров, вы можете вместо этого попробовать использовать DockPanel.

StackPanel не ограничивает размер своих дочерних элементов в направлении своей ориентации, поэтому онфактически бесконечен по размеру в этом направлении, что может привести к типу странного поведения изменения размера, которое вы описываете (именно поэтому они обычно заключаются в ScrollViewer, как это делает ListBox).

DockPanel делает то же самоеповедение стека, если все элементы используют одинаковую настройку DockPanel.Dock, но с ограничениями размеров, основанными на родительском макете.Возможно, он сможет дать вам правильное сочетание того, что делают Grid и StackPanel.

Сетка также может работать, если настроена правильно - я не вижу этого, я думаю, 2 автоматических строки или столбца, с горизонтальным и вертикальным выравниванием на обоихизображения, установленные на Stretch, могут это сделать.Может также потребоваться дополнительная пустая * строка или столбец, если вам нужно съесть пустое пространство, когда изображения не заполняют SVI.