Pull to refresh

«Оживление» пользовательского интерфейса

Reading time 12 min
Views 32K
image

Приложение не отвечает?!


Многие из тех, кто программирует WPF-приложения, наверное тысячи раз писали конструкцию вида:
{Binding Items}

Если получение элементов коллекции Items выполняется в основном потоке приложения и занимает некоторое время — мы получаем «мертвый» пользовательский интерфейс. Приложение некоторое время не будет отрисовывать изменения состояния и реагировать на пользовательский ввод. И если время обработки превысит некоторый лимит времени, определенный в оконной системе Windows — система пометит данное окно как не отвечающее на запросы: на изображение последнего успешного рендеринга окна наложиться белая маска и к заголовку добавиться специальный маркер (Not responding) ((Не отвечает) в русской локализации):
image

Да вы и сами наверное много раз наблюдали подобную картину, когда какое-нибудь приложение в результате сбоя или выполнения синхронной операции «уходит в себя». И, конечно же, знаете как это раздражает пользователя. Большинство будет биться с истерике, разбивая клавиатуру о монитор, будет с непониманием смотреть на экран, силясь понять что происходит с программой. Более «продвинутые» пользователи, не дожидаясь окончания длительной операции, закроют «провинившееся» окно с помощью менеджера задач.

Решение №1: Асинхронный ObjectDataProvider


Решение очень простое и идеально подойдет тем, кто использует в текущих проектах ObjectDataProvider в качестве источника данных.

Шаг №1: Реализуем простой статический провайдер данных

Провайдер представляет собой обычный статический класс с одним методом:
// Emulates a long items getting process using some delay of getting of each item<br/>
public static class AsyncDataProvider<br/>
{    <br/>
    private const int _DefaultDelayTime = 300;<br/>
 <br/>
    public static ReadOnlyCollection<string> GetItems()<br/>
    {<br/>
        return GetItems(_DefaultDelayTime);<br/>
    }<br/>
 <br/>
    public static ReadOnlyCollection<string> GetItems(int delayTime)<br/>
    {            <br/>
        List<string> items = new List<string>();            <br/>
        foreach (string item in Enum.GetNames(typeof(AttributeTargets)).OrderBy(item => item.ToLower()))<br/>
        {<br/>
            items.Add(item);<br/>
            // Syntetic delay to emulate a long items getting process<br/>
            Thread.Sleep(delayTime);<br/>
        }<br/>
 <br/>
        return items.AsReadOnly();<br/>
    }        <br/>
}


Шаг №2: Объявляем асинхронный источник данных в XAML

<Window.Resources><br/>
    <ObjectDataProvider x:Key="AsyncDataSource" <br/>
        IsAsynchronous="True"<br/>
        ObjectType="Providers:AsyncDataProvider" <br/>
        MethodName="GetItems" /><br/>
    <Converters:NullToBooleanConverter x:Key="NullToBooleanConverter" /><br/>
</Window.Resources>


Конвертер NullToBooleanConverter — это всего лишь вспомогательный объект, назначение которого можно прочесть в названии (его реализацию можно найти в прикрепленном к топику проекте). Вся магия заключается в аттрибуте IsAsynchronous="True" объекта ObjectDataProvider. Этот аттрибут отвечает за управление способом получения данных — если этот аттрибует установлен в "True" ядро WPF создаст для получения значения этого свойства фоновый объект Dispatcher и, таким образом, привязка будет выполнятся в фоновом потоке, не мешая основному потоку приложения обрабатывать пользовательский ввод.

Шаг №3: Используем провайдер данных в коде

<ListBox x:Name="ItemsListBox" <br/>
            ItemsSource="{Binding Source={StaticResource AsyncDataSource}, IsAsync=True}">        <br/>
    <ListBox.Style><br/>
        <Style TargetType="{x:Type ListBox}"><br/>
            <Style.Triggers><br/>
                <Trigger Property="ItemsSource" Value="{x:Null}"><br/>
                    <Setter Property="Template" Value="{StaticResource WaitControlTemplate}" /><br/>
                </Trigger><br/>
            </Style.Triggers><br/>
        </Style><br/>
    </ListBox.Style><br/>
</ListBox>


Обратите внимание — для списка использован триггер, позволяющий визуализировать для пользователя процесс получения данных. Это очень важно — если не информировать пользователя о какой-то длительной операции, он подумает что приложение просто не работает, поскольку ни одно действие над списком не будет доступно (при правильной обработке их состояний, конечно — об этом дальше).

Шаг №4: Не забываем обрабатывать доступность действий

<Button Grid.Column="1" <br/>
        Content="Edit"                     <br/>
        Width="70"                    <br/>
        IsEnabled="{Binding SelectedItem, ElementName=ItemsListBox, Converter={StaticResource NullToBooleanConverter}}"<br/>
        Click="EditButton_Click"/><br/>
 


Шаг №5: In action

Вот как выглядит главное окно после запуска со всеми нашими изменениями:
Asynchronous items loading in action

А вот так оно выглядит после того, как данные получены:
Asynchronous items loading completed

Кнопка Edit привязана к выделенному элементу через простой конвертер. Если выделенный элемент в основном списке ItemsListBox отсутствует — кнопка будет недоступна. А выделить элемент можно будет только после того, как асинхронный провайдер данных AsyncDataSource заполнит элементами список. Кнопка Close добавлена для визуализации возможности управления приложением — ничто не мешает нажать на нее во время процесса получения данных и закрыть главное окно. Приложение при этом исправно отреагирует на наш запрос и закроется, чего не произошло бы в том случае, если наш источник данных был бы синхронным.

Решение №2 Асинхронный Binding


Второе решение этой задачи использует паттерн M-V-VM (Model-View-ViewModel), наверное один из популярнейших сейчас паттернов построения модульных приложений для WPF и Silverlight. Обсуждение данного паттерна выходит за рамки данной статьи — при желании вы сможете легко найти о нем много информации в сети (если вам лень искать — загляните в раздел Ссылки в конце статьи).

Шаг №1:

Создадим модель представления для главного окна приложения:
public class MainViewModel<br/>
{<br/>
    private ICommand _commandClose;<br/>
 <br/>
    private ICommand _commandEdit;<br/>
 <br/>
    private ReadOnlyCollection<string> _items;<br/>
 <br/>
    public ReadOnlyCollection<string> Items<br/>
    {<br/>
        get<br/>
        {<br/>
            if (_items == null)<br/>
            {<br/>
                _items = AsyncDataProvider.GetItems();                    <br/>
            }<br/>
 <br/>
            return _items;<br/>
        }<br/>
    }<br/>
 <br/>
    public ICommand CommandClose<br/>
    {<br/>
        get<br/>
        {<br/>
            if (_commandClose == null)<br/>
            {<br/>
                _commandClose = new RelayCommand(=> OnClose());<br/>
            }<br/>
 <br/>
            return _commandClose;<br/>
        }<br/>
    }<br/>
 <br/>
    public ICommand CommandEdit<br/>
    {<br/>
        get<br/>
        {<br/>
            if (_commandEdit == null)<br/>
            {<br/>
                _commandEdit = new RelayCommand(=> OnEdit(p), p => CanEdit);<br/>
            }<br/>
 <br/>
            return _commandEdit;<br/>
        }<br/>
    }<br/>
 <br/>
    public string SelectedItem<br/>
    {<br/>
        get;<br/>
        set;<br/>
    }<br/>
 <br/>
    private void OnClose()<br/>
    {<br/>
        App.Current.Shutdown();<br/>
    }<br/>
 <br/>
    private void OnEdit(object parameter)<br/>
    {<br/>
        MessageBox.Show(String.Format("Edtiting item: {0}", <br/>
            parameter != null ? parameter.ToString() : "Not selected"));<br/>
    }<br/>
 <br/>
    private bool CanEdit<br/>
    {<br/>
        get<br/>
        {<br/>
            return SelectedItem != null;<br/>
        }            <br/>
    }<br/>
}


Шаг №2: Немного изменим объявление привязки в коде XAML главного представления

<ListBox x:Name="ItemsListBox" <br/>
            Grid.Row="0" <br/>
            ItemsSource="{Binding Items, IsAsync=True}"<br/>
            SelectedItem="{Binding SelectedItem}"><br/>
    <ListBox.Style><br/>
        <Style TargetType="{x:Type ListBox}"><br/>
            <Style.Triggers><br/>
                <Trigger Property="ItemsSource" Value="{x:Null}"><br/>
                    <Setter Property="Template" Value="{StaticResource WaitControlTemplate}" /><br/>
                </Trigger><br/>
            </Style.Triggers><br/>
        </Style><br/>
    </ListBox.Style><br/>
</ListBox>


В этом сценарии за асинхронность отвечает аттрибут, указанный в разметке привязки: "{Binding Items, IsAsync=True}". Как и в примере с ObjectDataProvider ядро WPF создаст отдельный фоновый диспетчер для получения значения привязки в отдельном асинхронном контексте.

Отдельно стоит отметить что в этом сценарии нам не требуется прибегать к кодированию правил видимости элементов управления в XAML-коде представления главного окна. В приведенном выше коде модели представления за видимость кнопки Edit на форме отвечает свойство MainViewModel.CanEdit, которое является частью команды MainViewModel.CommandEdit. Более детально узнать о паттерне Команда (Command) вы можете, заглянув в раздел Ссылки. Здесь же будет уместно заметить лишь то, что нам не придется ничего делать вручную — обо всем позаботится класс CommandManager. От нас требуется лишь правильная реализация контракта ICommand, которую обеспечивает класс RelayCommand (с реализацией этого класса вы можете ознакомится в прилагаемом проекте).

Домашнее задание


Выполняется по желанию — проверять не буду, даже не просите :) Можно слегка усовершенствовать шаблон WaitControlTemplate превратив его в полноценный элемент управления, унаследованный от класса Border или от его предка Decorator, если есть желание сделать полноценный элемент управления по всем правилам. Поведение и логика этого элемента будут простыми:
  • Внутрь элемента можно добавить только ItemsControl или любого из его наследников (ListBox, ListView, TreeView etc) — контролировать это желательно на самом жестком уровне, вплоть до выбрасывания исключения если свойство Content не является ItemsControl
  • При изменении свойства Content элемент управления пытается привести содержимое к ItemsControl и получить значение привязки данных свойства ItemsSource
  • Если предыдущий шаг удался — перевести привязку в асинхронный режим
  • Визуализация элемента управления может быть частично построена на логике паттерна Заместитель (Proxy) — пока данные асинхронно загружаются элемент управления показывает свое содержимое (крутящийся индикатор загрузки и надпись с просьбой подождать), после завершения загрузки отображается содержимое свойства Content


Резюме


Главными клиентами разработчиков являются пользователи. И каждому разработчику время от времени полезно ставить себя на место простого пользователя, проводить полный цикл тестирования своего приложения и пытаться анализировать, что именно его (как пользователя) раздражает и что бы он (как пользователь) хотел бы улучшить.

Исходный код


AsyncBinding.zip

Ссылки


Приложения WPF с шаблоном проектирования модель-представление-модель представления
Общие сведения о системе команд
Asynchronous Data Binding in Windows Presentation Foundation
Asynchronous WPF
Оригинал главного изображения для топика взят отсюда
Tags:
Hubs:
+90
Comments 10
Comments Comments 10

Articles