Реализация представления "рыбий глаз" с помощью ListBox

Я новичок в программировании Windows Phone. В моем приложении у меня есть список, в котором перечислены контакты телефона. В настоящее время он отображается как обычный список с равным размером для элементов списка в пользовательском интерфейсе. Я хочу изменить внешний интерфейс следующим образом: Скриншот пользовательского интерфейса

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

Я не ожидаю каких-либо кодов в качестве ответов, но любые примеры тоже приветствуются, просто хочу узнать, с помощью какой функции возможна такая функциональность, чтобы я мог читать!

Спасибо, Дипак

2 ответа

Решение

Наконец, мне удалось найти способ сделать это. Первый подход был, как предложил @Murkaeus, с использованием обработчика событий UserControl и ManipulationDelta. Однако по какой-то причине событие манипуляции Delta было запущено только для жестов двумя пальцами (Zoom, Pinch..etc), я понятия не имею, почему. И после некоторых попыток мне пришлось отказаться от этого.

Следующим подходом было использование самого Listbox. Источник списка был установлен в виде списка (объектов моделей), который я создаю после считывания контактной информации с телефона. Высота и цвет элемента списка были привязаны к свойству в моей модели с именем scaleLevel и были соответственно преобразованы с помощью реализации IValueConvertors, чтобы получить предопределенные значения цвета и высоты для различных уровней масштаба.

Я создал прикрепленное свойство для вертикального смещения прокрутки, как упомянуто [здесь] ( http://www.scottlogic.co.uk/blog/colin/2010/07/exposing-and-binding-to-a-silverlight-scrollviewer%E2%80%99s-scrollbars/)! Это событие вызывается при изменении вертикального смещения, и каждый раз, когда происходит прокрутка, я выясняю, какой элемент списка необходимо увеличить, а какой уменьшать на основе текущего вертикального смещения.

Получив эту информацию, я изменяю свойство ("scaleLevel") затронутых элементов в списке (модели) (который привязан к высоте и цвету списка). Это изменение обновляется в пользовательском интерфейсе с использованием события INotifyPropertyChanged.

Я понятия не имею, если это лучший способ сделать это, но он работает хорошо, и нет ничего значительного в обновлении пользовательского интерфейса, несмотря на обработку.

Мне бы хотелось услышать ваше мнение о реализации и любом другом решении, которое, по вашему мнению, будет работать лучше.

Было бы трудно изменить существующий элемент управления (например, ListBox), чтобы он действовал таким образом, поэтому лучше всего будет использовать ItemsControl с его RenderTransform, установленным как TranslateTransform.

Если вы поместите Rectangle (с Fill="Transparent") поверх ItemsControl, вы можете прикрепить обработчики к событиям ManipulationStarted, ManipulationDelta и ManipulationCompleted для управления "прокруткой", установив смещение Y TranslateTransform.

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

Пользовательская панель

Вы можете создать собственную реализацию Panel, которая соответствующим образом изменит размер дочерних элементов на основе свойства, которое вы создадите для представления позиции прокрутки. Настройте ItemsControl на использование вашей панели, и либо связав или прикрепив обработчик к событию Loaded панели и сохранив указатель на панель, обновите вышеупомянутое свойство из обработчика ManipulationDelta.

Ручная настройка

Внутри обработчика ManipulationDelta вы также можете вычислить различные высоты блоков и использовать MyItemsControl.ItemContainerGenerator.ContainerFromIndex, чтобы получить визуальный элемент для каждого элемента и установить его высоту.

Я бы предложил поместить все это в пользовательский UserControl.

У вас могут быть проблемы с отсечкой при использовании TranslateTransform, но, надеюсь, это поможет вам начать. К сожалению, это выглядит как довольно сложный элемент управления, чтобы попробовать сделать его в качестве первого проекта Windows Phone!