Нин Чжан блог

Введение

Я написал HeaderedContentControl и Expander для Silverlight Toolkit. Они оба существуют в WPF, и я написал, чтобы они больше совместимы с WPF, насколько возможно. Но есть и существенные различия между WPF и Silverlight, так что не удивительно, контролирует на эти две платформы отличаются, как хорошо. Различия в основном вызвано различиями системы DependencyProperty между WPF и Silverlight, Silverlight и новые инновации, как TemplatePart и VisualState. Там было несколько направлений поиска, чтобы мой блог по ключевым словам "Silverlight", "расширитель", я думал, что я должен написать пост о разработке и реализации HeaderedContentControl и Expander, так что здесь вы идете.

HeaderedContentControl

HeaderedContentControl наследует от ContentControl, добавив два заголовка DependencyProperty и HeaderTemplate и два защищенных виртуальных функций OnHeaderedChanged и OnHeaderTemplateChanged. Ниже приведены HeaderedContentControl в Silverlight Toolkit и WPF. Различия в основном новые функции, добавленные в WPF 3.5, как и HeaderStringFormat OnHeaderStringFormatChanged и платформы различия между WPF и Silverlight, как HeaderTemplateSelector, LogicalChildren и HasHeader и т.д.

Рисунок 1: HeaderedContentControl в Silverlight Toolkit

Рисунок 2: HeaderedContentControl в WPF

Вы можете проверить HeaderedContentControl обзор и играть с образцами из Silverlight Toolkit страницы CodePlex.

Расширитель

Пользовательский интерфейс

Expander является подклассом HeaderedContentControl, добавив, что поведение сворачивание / разворачивание его содержание области. Silverlight Toolkit главная страница имеет экран выстрел настроенные Expander:

Рисунок 3: Индивидуальный HeaderedContentControl

И примеры, которые вы можете играть с:

Рисунок 4: HeaderedContentControl образца

Кроме того интерфейс мыши (нажатие заголовка / ToggleButton для развернуть / свернуть), Expander также имеет интерфейс клавиатуры: в зависимости от ExpandDirection, влево / вправо / вверх / вниз клавиши со стрелками можно свернуть или развернуть область Expander Содержимое тоже.

Реализация

Expander добавляет два DependencyProperty IsExpand и ExpandDirection, два события, разворачивать и сворачивать, и связанных с ними защищенных виртуальных методов OnExpanded и OnCollapsed. Ниже приводится реализация Expander в Silverlight Toolkit и WPF:

Рисунок 5: Expander в Silverlight Toolkit

Рисунок 6: Expander в WPF

Контракт Управление и настройка

Что нового в Expander в Silverlight Toolkit, по отношению к его коллеге WPF, является контроль контракта:

Рисунок 7: Expander контроль контракта: шаблон частей и визуальных состояний

Expander добавляет два новых визуальных групп государства, кроме общих и фокус-групп:

• ExpansionStates: Расширение и рухнул

Как будет показано ниже, то по умолчанию шаблон Expander имеет состояние анимации разворачивать и сворачивать государств, используя ObjectAnimationUsingKeyFrames изменить свойства видимости Содержимое области (представлено ExpandSite элемент в шаблон по умолчанию), чтобы показать или скрыть области содержимого. Вы можете настроить развернуть / свернуть поведение легко с Blend, как добавить переход анимация изменить прозрачность области содержимого исчезать это и выход.

Рисунок 8: Расширенная анимация государства

• ExpandDirectionStates: ExpandDown, ExpandUp, ExpandLeft и ExpandRight

Expander имеет четыре различных значения ExpandDirection, каждый имеет свой макет. Чтобы разрешить пользователям настроить шаблон Expander, должен быть способ указать четыре макета в шаблоне так Expander код знает, какой из них выбрать, какие компоненты, чтобы показать / спрятать в соответствии с ExpandDirection собственности. Управления, как слайдер и использовать ScrollBar TemplatePart:

Такой подход не очень хорошо масштабируется: Expander имеет четыре схемы, таким образом много шаблонов частей. И каждый макет должен обрабатывать Расширенное / рухнул переходы по отдельности. Чтобы избежать этой проблемы, я представил состояние ExpandDirectionStates визуальные группы, так что пользователи могут изменить внешний вид при обработке ExpandDirectionStates, что смесь обеспечивает хорошую поддержку. Я должен указать один шаблон части: заголовок ToggleButton, потому что Silverlight не допускают два способа связывания, так что я должен связать с Expander.IsExpanded ToggleButton.IsChecked в коде Expander, чтобы обеспечить развернуть / свернуть пользователей. Таким образом, Таким образом, управление контрактом намного чище и гораздо более гибкий, как легко добавить RotateTransform для поворота
Expander в новый формат, когда изменения ExpandDirection. На снимке экрана показано, как шаблон по умолчанию обрабатывает все четыре макета:

• Весь заголовок шаблонов ToggleButton, так что в любом случае нажатия на заголовок может развернуть / свернуть Содержимое области.
• Она использует 2 × 2 сетки в заголовке формы и содержания территории.
• Он излагает Expander по ExpandDirection имея состояние анимации ExpandDirectionStates:
  • Он излагает заголовок и содержание областях оживляющий их Grid.Row и Grid.Column свойствами.
  • Он обращает заголовке переключатель правильно, изменив его шаблон.

Рисунок 9: ExpandLeft государства анимации

Заключение

Как всегда, надеюсь, это поможет и комментарии / предложения / отзывы и т.д. приветствуются. Спасибо!