Статьи

Использование элемента управления ImageTile из Coding4Fun v1.6

Декабрь 30, 2018

Новая версия Coding4Fun Toolkit была выпущена три дня назад, вы можете получить ее на Codeplex . Один элемент управления сразу захватил мой интерес — ImageTile. Он предлагает вариант стандартной плитки-концентратора и похож на плитку-концентратор для людей, хотя вы можете легко настроить ее. На следующем снимке экрана показан элемент управления ImageTile в действии.

Вы можете добавить инструментарий через Nuget или загрузить исходный код или двоичные файлы. После добавления необходимых ссылок в проект используйте следующее пространство имен:

xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

Я настоятельно рекомендую открыть только представление XAML, но не открывать его. Самый простой способ сделать это — щелкнуть правой кнопкой мыши файл MainPage.xaml и выбрать пункт контекстного меню « Открыть с помощью…» . Выберите « Исходный код (текст)» и нажмите «ОК». Теперь вместо этого отредактируйте XAML, перетаскивая элементы управления в режиме конструктора. Версия, которую вы получаете с Nuget, заморозит Visual Studio. Он замерзнет, ​​как только вы добавите элемент управления, который очень расстраивает. Обратите внимание, что если вы собираете двоичные файлы самостоятельно из исходного кода, проблема была исправлена ​​и относится только к версии 1.6.

Давайте проанализируем элемент управления, созданный с использованием следующей разметки:

<c4f:ImageTile AnimationDuration="1500"
                AnimationType="VerticalExpand"
                ImageCycleInterval="3000"
                                
                Width="173" Height="173"
                                
                Rows="3"
                Columns="3"
                LargeTileColumns="2"
                LargeTileRows="2"
 
                ItemsSource="{Binding Images}"
                                
                IsFrozen="False" />

Приведенная выше разметка создаст элемент управления ImageTile того же размера, что и стандартный HubTile. Это должно выглядеть как левая плитка на изображении выше. Давайте рассмотрим каждое свойство:

  • AnimationDuration — указывает, сколько времени занимает анимация нового изображения. Значение по умолчанию — 500 мс, что, на мой взгляд, слишком быстро, установите для вас что-то более удобное.
  • AnimationType — определяет, как появляются новые изображения. Значением по умолчанию является None. У вас есть три дополнительных варианта здесь:

    1. HorizontalExpand — новое изображение будет расширяться от вертикальной средней линии
    2. VerticalExpand — новое изображение будет расширяться от горизонтальной средней линии
    3. Fade — новое изображение будет постепенно исчезать.

    VerticalExpand — это тот, который используется плиткой People Hub, но, по крайней мере, у вас есть дополнительные опции здесь. Если для типа анимации установлено значение «Нет», изображение будет появляться быстро и просто мгновенно заменяет предыдущее. Вы можете сравнить три типа анимации на следующем изображении (слева направо: вертикальное, горизонтальное, постепенное исчезновение).

  • ImageCycleInterval — продолжительность между циклами изображения. Значение по умолчанию 1000.
  • Ширина и высота установлены на 173, что является размером по умолчанию для HubTile. Вы можете опустить это.
  • Свойства строк и столбцов указывают, сколько строк и столбцов будет иметь ваша плитка. Значения по умолчанию — 3 для обоих, но вы можете настроить их, если хотите создать меньшие, большие или более широкие / более высокие плитки. Вот пример большой плитки (свойство Columns установлено в 6:
  • LargeTileColumns и LargeTileRows — People Hub отображает некоторые изображения в виде блоков 2 × 2. Если вы установите эти два свойства на 2, вы получите тот же эффект. Обратите внимание, что значение по умолчанию уже 2. Имейте в виду, что вы можете настроить его для вашего конкретного сценария. Хорошо работает, если вы хотите сделать что-то особенное для вашего приложения.
  • ItemsSource — если вы привязываетесь к свойству в модели представления, убедитесь, что это List или что-то, что наследует этот класс. Это означает, что вы не можете использовать ObservableCollection, что нормально, так как элемент управления ImageTile не будет реагировать на изменения в любом случае. Поскольку он использует URI вместо строк, добавьте их как относительные URI к изображениям, добавленным в проект в качестве контента.
  • IsFrozen — определяет, является ли ImageTile статическим или анимированным. Поскольку значением по умолчанию является False, вы должны явно установить его в True, если вы хотите, чтобы ImageTile был анимированным. Обратите внимание, что это было исправлено, и если вы создаете двоичные файлы самостоятельно, это будет работать.

Поскольку для многих свойств уже заданы значения по умолчанию, чтобы элемент управления выглядел аналогично плитке People Hub, вы можете создать его с помощью этого минимального фрагмента:

<c4f:ImageTile ItemsSource="{Binding Images}"
                  IsFrozen="False" />

Свободно пропустите свойство IsFrozen, если вы используете более свежую сборку (после 1.6).

Также обратите внимание, что есть небольшая проблема с прозрачными изображениями, как показано на рисунке ниже. Рекомендуется использовать непрозрачные изображения с этим элементом управления. Также убедитесь, что у вас нет повторяющихся URI в коллекции ItemsSource. Если у вас есть дубликаты, приложение, вероятно, зависнет.

Все изображения, использованные в этом посте, можно скачать с http://www.iconspedia.com/ . Вы можете скачать исходный код для примера здесь (SkyDrive).

34
Share: