Когда мы начали работать над приложениями под Windows 8, мы искали библиотеку поддержки шаблона Model-View-ViewModel (MVVM) для этой платформы. Некоторое время провели в интернете в поиске таковой, но в итоге приняли факт, что таких библиотек в природе пока не существует (возможно, мы плохо искали, но теперь это уже не так важно). Ответ на вопрос «что делать?» напрашивался сам…
В недрах нашей компании EastBanc Technologies была создана специальная библиотека (кодовое название EBT.Mvvm). Цель создания — экономия времени в будущем при разработке сложных приложений для Windows 8. В библиотеку вошли как наши собственные наработки, так и некоторые идеи и примеры, которые встречались нам во время наших поисков.
Итак, что мы имеем: все помнят, что основная идея шаблона — это ослабление связи между ViewModel (будем называть вью-модель) и непосредственно View (представление). Идеальное состояние — это когда code-behind представления содержит только конструктор с InitializeComponent и, возможно, код поддержки визуального поведения, которое нельзя определить через XAML. Таким образом, разработчик отдает представление дизайнеру, а сам сосредотачивается на работе и тестировании логики приложения.
Данная статья ориентирована на разработчиков, уже знакомых с программированием на C# и XAML под Windows 8. Ниже мы приводим описания основных фич нашей библиотеки в виде примеров кода их использования и комментариев. Итак, поехали:
1. Базовый класс ViewModel
Первое, с чего нужно начинать, говоря о MVVM шаблоне, это базовый класс для наших вью-моделей. Основное предназначение — поддержка интерфейса INotifyPropertyChanged и удобные функции для автоматической нотификации при изменении свойств. Пример использования:
public class SimpleViewModel : ViewModel
{
private int _number;
public int Number
{
get { return _number; }
set { OnPropertyChange(ref _number, value); }
}
}
Тут всё должно быть понятно без комментариев. Следует добавить, что есть набор перегруженных функций для автоматической нотификации при изменении свойства. Также имеется способ избежать написания поля вообще. Имеется в виду так называемый backing field. Пример — поле _number в примере кода выше. При этом свойства можно продолжать создавать с поддержкой автоматической нотификации. Это достаточно удобно, если во вью модели у нас имеется множество свойств для связывания. Пример ниже показывает, как можно сделать свойство с учётом этой фичи (поле не требуется).
public string Text
{
get { return GetPropertyValue(() => Text); }
set { SetPropertyValue(() => Text, value); }
}
2. Команды
Привычный и необходимый обработчик команд RelayCommand. Привязывается к свойству Command базового класса ButtonBase (кнопки, пункты меню, гиперссылки) и поддерживает ICommand интерфейс. Вещь незаменимая и реализована уже давно. Тем не менее, должна быть упомянута:
public class SimpleViewModel : ViewModel
{
public SimpleViewModel()
{
SampleCommand = new RelayCommand(OnSample);
}
public RelayCommand SampleCommand { get; private set; }
private void OnSample()
{
// TODO Do something here.
}
}
<Button Command="{Binding SampleCommand}" Content="Button Text" />
3. Связывание обработчиков событий
Мы добавили возможность удобно связывать обработчики событий. MVVM подразумевает, что обработка событий пользовательского интерфейса должна происходить на стороне вью-модели. Без небольшого трюка сделать это невозможно. Он состоит в связывании присоединённого свойства элемента пользовательского интерфейса. На текущий момент библиотека поддерживает обработку большого количества событий. Список при необходимости может расширить сам разработчик. В качестве примера приведём обработку события Tapped элемента TextBlock:
public class SimpleViewModel
{
public SimpleViewModel()
{
TappedCommand = new EventCommand<Point>(OnTapped);
}
public IEventCommand TappedCommand { get; private set; }
private void OnTapped(Point point)
{
TappedCommand.PreventBubbling = point.X < 100;
}
}
<TextBlock Mvvm:EventBinding.Tapped="{Binding TappedCommand}" Text="Tap me"/>
Тут стоит обратить внимание на строку с TappedCommand.PreventBubbling = point.X < 100. Дело в том, что мы предусмотрели возможность отменить дальнейшую обработку событий (Handled) выставив соответствующий флаг.
На текущий момент есть поддержка событий: SelectionChanged, Click, ItemClick, KeyDown, KeyUp, PointerReleased, PointerPressed, PointerMoved, PointerCanceled, PointerEntered, PointerExited, PointerCaptureLost, Tapped, RightTapped, PointerWheelChanged, ManipulationStarting, ManipulationStarted, ManipulationDelta, ManipulationInertiaStarting, ManipulationCompleted, LostFocus, Unloaded, Loaded.
4. Поддержка различных режимов экрана
На наш взгляд, это самая интересная фича библиотеки. Для целевых приложений, ориентированных на планшеты прямо-таки незаменимая! Помним, что есть четыре режима экрана и что поддерживать их все — хороший тон. У нас есть два механизма для изменения отображения элементов пользовательского интерфейса в зависимости от текущего режима экрана.
- Управление видимостью. Основан на изменении видимости каждого конкретного элемента и удобен для простых сценариев.
- Изменение стиля. Иногда с точки зрения производительности это более эффективный метод для сложных сценариев пользовательского интерфейса.
<TextBlock behaviors:OrientationBehavior.Orientations="Landscape,Filled,Portrait" Text="Not snapped"/>
<TextBlock behaviors:OrientationBehavior.Orientations="Snapped" Text="Snapped"/>
В следующем примере показано изменение ориентации списка в зависимости от режима экрана.
<GridView ItemsSource="{Binding YourItems}">
<behaviors:OrientationBehavior.LandscapeStyle>
<!-- This style will be applied in landscape, filled and portrait modes. -->
<Style TargetType="ListViewBase"/>
</behaviors:OrientationBehavior.LandscapeStyle>
<behaviors:OrientationBehavior.SnappedStyle>
<!-- This style will be applied in the snapped mode. -->
<Style TargetType="ListViewBase">
<Style.Setters>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</behaviors:OrientationBehavior.SnappedStyle>
</GridView>
Метод изменения стиля элемента — это очень удобная и мощная фича. При её использовании необходимо помнить про следующее:
- При использовании этой фичи мы не можем использовать свойство Style для элементов.
- Если применён для одного из режимов экрана, то как минимум этот стиль будет применяться во всех режимах если не указаны другие.
- Для каждого из режимов экрана каждый из этих стилей имеет приоритет. Например, если есть стиль для портретной ориентации и для snapped, то портретный стиль будет применяться для ландшафтного и заполненного режима. Если указан только один стиль — он будет применяться во всех режимах.
А приятное следствие в использовании метода изменения стиля состоит в том, что при таком подходе, используя ContentControl/ContentPresenter, можно изменять view template полностью! Ниже показано как это делается:
<Grid Name="main">
<ContentControl>
<behaviors:OrientationBehavior.LandscapeStyle>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<TextBlock Text="Landscape"/>
<!-- Something in landscape mode -->
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</behaviors:OrientationBehavior.LandscapeStyle>
<behaviors:OrientationBehavior.PortraitStyle>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<TextBlock Text="Portrait"/>
<!-- Something in portrait mode -->
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</behaviors:OrientationBehavior.PortraitStyle>
<behaviors:OrientationBehavior.SnappedStyle>
<Style TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<TextBlock Text="Snapped. Only text here"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</behaviors:OrientationBehavior.SnappedStyle>
</ContentControl>
</Grid>
Например, таким образом можно без лишних проблем сделать переход в snapped режим.
5. Вызов методов View из ViewModel
Иногда бывает необходимо вызвать методы пользовательского интерфейса из вью модели. В качестве примера можно привести необходимость установить фокус ввода на заданное поле. Это можно сделать с помощью нашего ControlWrapper:
public class SimpleViewModel : ViewModel
{
public SimpleViewModel()
{
TextBoxWrapper = new ControlWrapper();
}
public ControlWrapper TextBoxWrapper { get; private set; }
public void GotoField()
{
TextBoxWrapper.Focus();
}
}
<TextBox Mvvm:ElementBinder.Wrapper="{Binding TextBoxWrapper}"/>
6. Триггеры событий для анимации
Этот механизм позволяет вам стартовать анимацию, когда происходит событие в элементе представления. И опять ни строчки кода в code-behind! Метод основан на привязывании обработчиков событий. В XAML нужно определить специальную команду TriggerCommand:
<Grid>
<FrameworkElement.Resources>
<Storyboard x:Key="FadeOut">
<PointerDownThemeAnimation Storyboard.TargetName="MyElement"/>
</Storyboard>
<Storyboard x:Key="FadeIn">
<PointerUpThemeAnimation Storyboard.TargetName="MyElement"/>
</Storyboard>
</FrameworkElement.Resources>
<Border x:Name="MyElement" Width="100" Height="100" Background="Red">
<mvvm:EventBinding.PointerPressed>
<mvvm:TriggerCommand Storyboard="{StaticResource FadeOut}"/>
</mvvm:EventBinding.PointerPressed>
<mvvm:EventBinding.PointerReleased>
<mvvm:TriggerCommand Storyboard="{StaticResource FadeIn}"/>
</mvvm:EventBinding.PointerReleased>
</Border>
</Grid>
7. Привязывание контекстного меню
ContextMenuBehavior позволяет быстро и удобно отображать контекстное меню на нажатие правой клавиши мыши или tap на тачскрине. Во вью необходимо только сделать связывание на элементе, для которого будет вызвано контекстное меню. А в модели определить список команд и обработчики:
public class MyViewModel : ViewModel
{
private IList<UICommand> _contextMenuCommands;
private string _text;
public string Text
{
get { return _text; }
set { OnPropertyChange(ref _text, value); }
}
public IList<UICommand> ContextMenuCommands
{
get
{
return _contextMenuCommands ?? (_contextMenuCommands = new List<UICommand>
{
new UICommand("Copy", OnCopy),
new UICommand("Paste", OnPaste),
});
}
}
private void OnCopy(IUICommand command)
{
var content = new DataPackage();
content.SetText(Text);
Clipboard.SetContent(content);
}
private async void OnPaste(IUICommand command)
{
var content = Clipboard.GetContent();
Text = await content.GetTextAsync();
}
}
<TextBlock behaviors:ContextMenuBehavior.Commands="{Binding ContextMenuCommands}" Text="{Binding Text}" MinWidth="300" Height="40"/>
8. Привязывание popup
PopupBehavior позволяет создать функционал показа popup при нажатии на правую кнопку мыши или tap на тачскрине. Всё должно быть ясно из примера кода ниже:
<TextBlock Text="Tap or right click here for more information" behaviors:PopupBehavior.Placement="Above">
<behaviors:PopupBehavior.Content>
<DataTemplate>
<TextBlock Text="More information..."/>
</DataTemplate>
</behaviors:PopupBehavior.Content>
</TextBlock>
9. Межстраничная навигация
Одной из проблем для разработчика является страничная навигация — не очень удобно поддерживать чистоту code-behind, если переходы осуществляются через обращения к Frame из представления. И практически всегда возникает потребность обработки событий Navigating и Navigated во вью-модели.
Для достижения целей создаем основную модель нашего приложения:
public class RootModel
{
public RootModel()
{
NavigationState = new NavigationState();
HomePageModel = new HomePageModel(this);
}
public NavigationState NavigationState { get; set; }
public HomePageModel HomePageModel { get; set; }
public bool CanGoBack { get { return NavigationState.CanGoBack; } }
public void GoBack()
{
NavigationState.GoBack();
}
public void GoToHomePage()
{
NavigationState.Navigate(typeof (HomePage));
}
}
При запуске приложения устанавливаем основную модель как контекст верхнеуровнего элемента визуального дерева объектов и связываем класс-обёртку NavigationState с frame.
sealed partial class App : Application
{
...
public RootModel RootModel { get; private set; }
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
RootModel = new RootModel();
var frame = new Frame { DataContext = RootModel };
// Bind the NavigationState and the frame using the ElementBinder class.
// You can also do this in XAML.
ElementBinder.SetWrapper(frame, RootModel.NavigationState);
Window.Current.Content = frame;
Window.Current.Activate();
RootModel.GoToHomePage();
}
}
Теперь наша вью-модель HomePageModel может обрабатывать события OnNavigating и OnNavigated. А также осуществлять навигацию на другие страницы через сохраненную ссылку на _rootModel. Обратите внимание, что OnNavigating поддерживает отмену перехода (параметр ref bool cancel).
public class HomePageModel : PageModel // Or implement IPageModel.
{
private RootModel _rootModel; // You can call _rootModel.NavigationState.Navigate(…)
public HomePageModel(RootModel rootModel)
{
_rootModel = rootModel;
}
public override void OnNavigated()
{
// TODO Do something here to initialize/update your page.
}
public override void OnNavigating(ref bool cancel)
{
// TODO Do something here to clean up your page.
}
}
В XAML выставляем правильный DataContext страницы для корректной работы связывания.
<Page x:Class="YourNamespace.HomePage" ... DataContext="{Binding HomePageModel}">
<!-- Your page content goes here -->
</Page>
Всё, результат достигнут. Теперь можно создавать страницы и связывать их c вью-моделями. Последние будут обрабатывать события OnNavigating и OnNavigated и управлять навигацией.
10. Шаблон для генерации скелетного проекта
Мы предусмотрели возможность быстро создать каркас для проекта с использованием нашей библиотеки. Шаблон проекта встраивается в Visual Studio и появляется в проектах Windows Store. Также шаблон доступен в библиотеке онлайн шаблонов проектов Visual Studio.
Пока всё
Ну вот, кажется, этого для одной статьи достаточно. На самом деле были перечислены хоть и большинство, но не все фичи нашей библиотеки. Есть ещё конвертеры, сохранение и восстановления состояния, помощник для charm-панели. Остальное хабрачитатели смогут самостоятельно узнать, непосредственно установив и использовав этот проект. Так что плавно переходим к следующему пункту:
Где можно скачать?
Заинтересованные хабрачитатели захотят посмотреть описанную бибилиотеку в действии. Сделать это очень просто. Наша библиотека доступна для скачивания в виде Nuget Package. Также наш проект заведён на CodePlex.
Самый быстрый способ установить её в студию — воспользоваться поиском в 12 студии через Tools-> Extensions and Updates. Выберите Online и в поисковой строке наберите ключевые слова Windows 8 MVVM.
Напоследок
«Библиотека EBT.Mvvm распространяется по принципу «как есть», разработчик не несет ответственности за возможные последствия…»
А если серьёзно, то мы будем рады, если наша библиотека поможет разработчикам приложений под молодую платформу Windows 8 сэкономить время на преодоление проблем, с которыми пришлось столкнуться нам самим. По мере сил и возможностей мы постоянно исправляем и улучшаем этот программный проект. Ваши предложения и замечания могут нам в этом помочь.
Хочется пожелать всем хабрачитателям, занимающимся разработкой, удачи. Создадим для Windows Store побольше приложений!
Автор: eastbanctech
