используя MVVM и WPF для реалистичной визуализации - PullRequest
1 голос
/ 22 августа 2009

В настоящее время мне нужно создать визуальное представление системы паромов, которая отображает фактические паромы, их положение на море и состояние их груза. Паромы содержат грузовики, а грузовики содержат автомобили. Мне нужно вывести на палубу настоящие грузовики и их положение. Когда паромы загружены, позиции грузовиков часто обновляются, поэтому внешний вид выглядит оживленным. Также мне нужно отобразить фактические автомобили на грузовиках. У грузовиков, автомобилей и паромов есть некоторые состояния, которые также должны быть отображены. Таким образом, у меня есть иерархическая структура данных, которую мне нужно визуализировать довольно реалистично.

Что может быть хорошим способом для реализации такого рода вещей в WPF? Должен ли я использовать MVVM с одним элементом управления TreeView и создать HierarchicalDataTemplates для моря, парома, грузовика и легкового автомобиля и ControlTemplate для TreeView? Или мне лучше использовать UserControls и создавать и обновлять их в коде вместо привязки данных к наблюдаемым коллекциям ViewModel. Есть ли у вас опыт с этим? Как бы вы это сделали? Не могли бы вы набросать класс / настройки управления?

Ответы [ 4 ]

4 голосов
/ 24 августа 2009

Я бы порекомендовал сделать элемент управления без внешнего вида, а не пользовательский. Обычно я использую пользовательские элементы управления в качестве клея / контейнера для своих элементов управления без внешнего вида. Примером элемента управления без внешнего вида является класс Button. Он содержит стиль по умолчанию, а в Blend вы можете изменять стиль по своему вкусу. Он также поддерживает визуальный менеджер состояний, так что вы можете изменить внешний вид презентации при изменении состояний. Вы можете думать о коде позади элемента управления без внешнего вида как о мини-модели представления. Здесь ок , чтобы смешать некоторые презентационные материалы и классы вашего домена.

Если вы будете следовать этому же дизайну, вы можете создать элемент управления Ferry lookless. Этот элемент управления будет иметь набор своих собственных свойств зависимостей (возможно, прослушивание OnChange DP).

Ваш элемент управления Ferry может иметь DP ObservableCollection, называемый "Грузовики".

Затем в вашем Themes \ generic.xaml создайте стиль по умолчанию для элемента управления Ferry. Ваш стиль по умолчанию может иметь ItemsControl с ItemsSource = {TemplateBinding Trucks}. Шаблон панели ItemsControl, может быть вашей собственной панелью для упорядочивания грузовиков или, может быть, вы используете Canvas. Для шаблона ItemsControl items у вас будет что-то вроде этого:

<DataTemplate>
     <mynamespace:TruckControl/>
</DataTemplate>

Элемент управления You Truck также может быть элементом управления без внешнего вида со своим собственным стилем по умолчанию, и его контекст данных уже будет установлен, поэтому вы можете напрямую выполнить {Binding Path = xyz}. Элемент управления Truck также может установить его Canvas.Left / Top (если вы решили использовать холст в элементе управления проницаемыми элементами ... или, может быть, он вообще не устанавливает свою позицию, если для него сделана пользовательская панель) или рендер преобразовать так, чтобы поставить его в правильном X, Y. Вы также можете использовать элемент управления элементами в шаблоне грузовика для рендеринга автомобилей так же, как для грузовиков в элементе управления паромом. Также возможно создавать состояния для VisualStateManager, чтобы сделать его полностью поддерживаемым Blend. Поэтому, если грузовик переходит в «проблемное состояние», вы можете легко оформить это состояние, например, в blend, чтобы оно мигало красным.

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

Я бы посоветовал изучить набор инструментов Microsoft Silverlight, чтобы получить представление о том, как создавать бесцветные элементы управления и тому подобное. Попробуйте взглянуть на простой элемент управления, такой как DatePicker (http://silverlight.codeplex.com/SourceControl/changeset/view/25992#). Одно предостережение - игнорировать файл DatePicker.xaml (это просто зеркало того, что помещается в generic.xaml, и ничего плохого не произойдет, если вы просто удалите его) .

На что следует обратить пристальное внимание:

1.) Атрибуты в классе. Они помогают Blend знать, как справляться с вашим контролем.

2.) Переопределение OnApplyTemplate. Здесь вы можете извлечь определенные элементы из вашего шаблона. Они известны как «части», и вы увидите вкладку частей в Blend. Атрибуты в # 1 могут определять, какие «части» находятся в шаблоне и какого типа они должны быть.

3.) DefaultStyleKey = typeof (...) в конструкторе. Это сообщает Silverlight, какой шаблон по умолчанию использовать в generic.xaml

4.) Посмотрите на Темы \ generic.xaml. Это специальное жестко закодированное местоположение файла, в котором хранятся все ваши шаблоны по умолчанию. Ищите стиль DatePicker, и вы получите идею:)

Удачи!

2 голосов
/ 05 сентября 2009

Я просто хотел сообщить вам, как я на самом деле это реализовал. Оказалось, что для этого вообще не нужно было писать пользовательские элементы управления или пользовательские элементы управления. Все, что я делал, это писал шаблоны данных для автомобиля, корабля, парома, грузовика и т. Д. ViewModels. Например, таблица данных для FerryViewModel содержала ItemsControl с панелью ItemsPanel типа Canvas (для возможности позиционирования грузовиков) и ItemTemplate, который был DataTemplate для TruckViewModel. Очень простой и быстрый подход.

1 голос
/ 23 августа 2009

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

Если ваша модель иерархическая, то вы можете просто передать верхний уровень в элемент управления и позволить элементу самому разобраться.

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

0 голосов
/ 22 августа 2009

WPF очень хорошо работает с моделями представлений. Если вы можете хранить код в стороне до тех пор, пока он вам не понадобится, вы сможете гораздо проще отделить интерфейс от данных. Это позволит значительно улучшить возможности вашего пользовательского интерфейса, если модель данных не будет меняться в зависимости от дисплея.

...