Джентельменский набор для создания WPF-приложений

Введение

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

Содержание

• Введение

• Инфраструктура

  • Обработка исключений

  • Настройка IoC

  • Маппинг объектов

• Реализация MVVM — паттерна

  • Модель

  • Представление

  • Валидация

  • Команды

  • Отображение динамических данных

• Визуальные темы и элементы управления

  • Стиль приложения

  • Графики

• Заключение

Инфрастурктура

Первым делом создадим инфраструктурный уровень приложения, который обеспечит работу всего приложения. Я использую библиотеку ReactiveUI поскольку она позволяет в некоторой степени избежать написание boilerplate-кода и содержит в себе необходимый набор инструментов таких, как внутрипроцессная шина, логгер, планировщик и прочее. Основы использования неплохо изложены тут. ReactiveUI исповедует реактивный подход, реализованный в виде Reactive Extensions. Подробнее использование данного подхода я опишу ниже в реализации паттерна MVVM.

Обработка исключений

Подключим глобальный exception handler, который пишет ошибки c помощью логгера. Для этого в классе приложения App переопределим метод OnStartup, данный метод преставляет собой обработчик события StartupEvent, который в свою очередь вызывается из метода Application.Run

public partial class App : Application { private readonly ILogger _logger;  public App() { Bootstrapper.BuildIoC(); // Настраиваем IoC  _logger = Locator.Current.GetService<ILogger>(); }  private void LogException(Exception e, string source) { _logger?.Error($"{source}: {e.Message}", e); }  private void SetupExceptionHandling() { // Подключим наш Observer-обработчик исключений RxApp.DefaultExceptionHandler = new ApcExceptionHandler(_logger); }  protected override void OnStartup(StartupEventArgs e) { base.OnStartup(e); SetupExceptionHandling(); } }  public class ApcExceptionHandler: IObserver<Exception> { private readonly ILogger _logger;  public ApcExceptionHandler(ILogger logger) { _logger = logger; }  public void OnCompleted() { if (Debugger.IsAttached) Debugger.Break(); }  public void OnError(Exception error) { if (Debugger.IsAttached) Debugger.Break(); _logger.Error($"{error.Source}: {error.Message}", error); }  public void OnNext(Exception value) { if (Debugger.IsAttached) Debugger.Break();  _logger?.Error($"{value.Source}: {value.Message}", value); } }

Логгер пишет в файл с помощью NLog и во внутрипроцессную шину MessageBus, чтобы приложение могло отобразить логи в UI

public class AppLogger: ILogger {    //Экземпляр логгера NLog private NLog.Logger _logger = NLog.LogManager.GetCurrentClassLogger();       public AppLogger()   {   }       public void Info(string message)      {         _logger.Info(message);           MessageBus.Current.SendMessage(new ApplicationLog(message));      }         public void Error(string message, Exception exception = null)   {         _logger.Error(exception, message);     //Отправляем сообщение в шину     MessageBus.Current.SendMessage(new ApplicationLog(message));      } }

Необоходимо, отметить, что разработчики ReactiveUI советуют использовать в MessageBus в последнюю очередь, так как MessageBus — глобальная переменная, которая может быть потенциальным местом утечек памяти. Прослушивание сообщений из шины осуществляется на методом MessugeBus.Current.Listen

MessageBus.Current.Listen<ApplicationLog>().ObserveOn(RxApp.MainThreadScheduler).Subscribe(Observer.Create<ApplicationLog>((log) => { LogContent += logMessage; }));

Настройка IoC

Далее настроем IoC, который облегчит нам управление жизенным циклом объектов. ReactiveUI использует Splat. Регистрация сервисов осуществляется с помощью вызова метода Register() поля Locator.CurrentMutable, а получение — GetService() поля Locator.Current.
Например:

Locator.CurrentMutable.Register(() => new AppLogger(), typeof(ILogger)); var logger = Locator.Current.GetService<ILogger>();

Поле Locator.Current реализовано для интеграции с другими DI/IoC для добавления которых Splat имеет отдельные пакеты. Я использую Autofac c помощью пакета Splat.Autofac. Регистрацию сервисов вынес в отдельный класс.

public static class Bootstrapper { public static void BuildIoC() { /*  * Создаем контейнер Autofac.  * Регистрируем сервисы и представления  */ var builder = new ContainerBuilder(); RegisterServices(builder); RegisterViews(builder); // Регистрируем Autofac контейнер в Splat var autofacResolver = builder.UseAutofacDependencyResolver(); builder.RegisterInstance(autofacResolver);  // Вызываем InitializeReactiveUI(), чтобы переопределить дефолтный Service Locator autofacResolver.InitializeReactiveUI(); var lifetimeScope = builder.Build(); autofacResolver.SetLifetimeScope(lifetimeScope); }  private static void RegisterServices(ContainerBuilder builder) { builder.RegisterModule(new ApcCoreModule()); builder.RegisterType<AppLogger>().As<ILogger>(); // Регистрируем профили ObjectMapper путем сканирования сборки var typeAdapterConfig = TypeAdapterConfig.GlobalSettings; typeAdapterConfig.Scan(Assembly.GetExecutingAssembly()); }  private static void RegisterViews(ContainerBuilder builder) { builder.RegisterType<MainWindow>().As<IViewFor<MainWindowViewModel>>(); builder.RegisterType<MessageWindow>().As<IViewFor<<MessageWindowViewModel>>().AsSelf(); builder.RegisterType<MainWindowViewModel>(); builder.RegisterType<MessageWindowViewModel>(); } }

Маппинг объектов

Маппер помогает нам минимизировать код по преобразованию одного типа объекта в другой. Я воспользовался пакетом Mapster. Для настройки библиотека имеет FluetAPI, либо аттрибуты к классам и свойствам. Кроме того, можно настроить кодогенерацию маппинга на стадии сборки, что позволяет сократить время преобразования одних объектов в другие. Регистрацию я решил вынести в отдельный класс, который должен релизовать интерфейс IRegister:

public class ApplicationMapperRegistration: IRegister { public void Register(TypeAdapterConfig config) { config.NewConfig<IPositionerDevice, DeviceViewModel>() .ConstructUsing(src => new DeviceViewModel(src.Mode, src.IsConnected, src.DeviceId, src.Name)); config.NewConfig<DeviceIndicators, DeviceViewModel>(); } }

На этом с инфраструктурой собственно всё. Других моментов заслуживающих внимания я не нашёл. Далее опишу некоторые моменты реализации UI приложения.

Реализация MVVM — паттерна

Как я писал выше, я использую ReactivUI, позволяющий работать с UI в реактивном стиле. Ниже основные моменты по написанию кода моделей и представлений.

Модель

Классы моделей, используемые в представлениях, наследуются от ReactiveObject. Есть библиотека Fody, которая позволяет с помощью аттрибута Reactive делать свойства модели реактивными. Можно и без нее, но по моему мнению, она помогает сделать код более читаем за счёт сокращения boilerplate-конструкций. Связывание свойств модели со свойствами элементов управления также производится либо в XML разметке, либо в коде с помощью методов.
Небольшой пример модели клапана, которая будет хранить показания основных датчиков.

public class DeviceViewModel: ReactiveObject {     public DeviceViewModel()   {   }         [Reactive]   public float Current { get; set; }         [Reactive]      public float Pressure { get; set; }       [Reactive]      public float Position { get; set; }       [Reactive]      public DateTimeOffset DeviceTime { get; set; }  [Reactive] public bool Connected { get; set; }  public ReactiveCommand<Unit, bool> ConnectToDevice; public readonly ReactiveCommand<float, float> SetValvePosition; }  

Реализация представления

В предсталении реализуем привязки команд и поля модели к элементам управления

public partial class MainWindow { public MainWindow() { InitializeComponent();  ViewModel = Locator.Current.GetService<DeviceViewModel>(); DataContext = ViewModel;  /*  * Данный метод регистрирует привязки модели к элементам представления  * DisposeWith в необходим для очистки привязок при удалении представления  */ this.WhenActivated(disposable => { /*  * Привязка свойства Text элемента TextBox к свойства модели.  * OneWayBind - однонаправленная привязка, Bind - двунаправленная  */ this.OneWayBind(ViewModel, vm => vm.Pressure, v => v.Pressure1Indicator.Text) .DisposeWith(disposable);          // Двунаправленная привязка значения позиции клапана. Конверторы значений свойства в модели и в представлении: FloatToStringConverter, StringToFloatConverter this.Bind(ViewModel, vm => vm.Position, v => v.Position.Text, FloatToStringConverter, StringToFloatConverter) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.Current, v => v.Current.Text) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.ConnectedDevice.DeviceTime, v => v.DeviceDate.SelectedDate, val => val.Date) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.ConnectedDevice.DeviceTime, v => v.DeviceTime.SelectedTime, val => val.DateTime) .DisposeWith(disposable);          /* Привязка команд к кнопкам */ this.BindCommand(ViewModel, vm => vm.ConnectToDevice, v => v.ConnectDevice, nameof(ConnectDevice.Click)) .DisposeWith(disposable); this.BindCommand(ViewModel, vm => vm.SetValvePosition, v => v.SetValvePosition, vm => vm.ConnectedDevice.AssignedPosition, nameof(SetValvePosition.Click)) .DisposeWith(disposable); }); }  private string FloatToStringConverter(float value) { return value.ToString("F2", CultureInfo.InvariantCulture); }    private float StringToFloatConverter(string input) { float result;  if (!float.TryParse(input, NumberStyles.Float, CultureInfo.InvariantCulture, out result)) { result = 0; }  return result; } }

Валидация

Валидация модели реализуется путем наследования класса от ReactiveValidationObject, в конструктор добавляем правило валидации, например:

this.ValidationRule(e => e.Position, val => float.TryParse(val, NumberStyles.Float, CultureInfo.InvariantCulture, out _), "Допускает только ввод цифр");

Для вывода ошибок валидации поля в UI создаем привязку в представлении, например к элементу TextBlock:

<TextBlock x:Name="ValidationErrors" FontSize="10" Foreground="Red"/>

this.BindValidation(ViewModel, v => v.Position, v => v.ValidationErrors.Text) .DisposeWith(disposable); // Отображаем элемент только при наличии ошибки this.WhenAnyValue(x => x.ValidationErrors.Text, text => !string.IsNullOrWhiteSpace(text)) .BindTo(this, x => x.ValidationErrors.Visibility) .DisposeWith(disposable);

Команды

Обработка действий пользователя в UI реализована с помощью, команд. Их работа довольно хорошо описана тут, я лишь приведу пример. Привязка команды к событию нажатия кнопки приведена выше в классе представления. Сама команда реализована следующим образом:

ConnectToDevice = ReactiveCommand.CreateFromTask(async () => { bool isAuthorized = await Authorize.Execute();  return isAuthorized; }, this.WhenAnyValue(e => e.CanConnect));  /* На команду также можно подписаться как и на любой Observable объект.    После подключения к устройству читаем информацию и показания сенсоров. */ ConnectToDevice .ObserveOn(RxApp.MainThreadScheduler) .Subscribe(async result => { ConnectedDevice.IsConnected = result; await ReadDeviceInfo.Execute(); await ReadDeviceIndicators.Execute(); });

Метод CreateFromTask добавлен как расширение к классу ReactiveCommand с помощью пакета System.Reactive.Linq
СanConnect — флаг управляющий возможностью выполнения команды

_canConnect = this.WhenAnyValue(e => e.SelectedDevice, e => e.IsCommandExecuting, (device, isExecuting) => device!=null && !isExecuting) .ToProperty(this, e => e.CanConnect);

public bool CanExecuteCommand => _canExecuteCommand?.Value == true; private readonly ObservableAsPropertyHelper<bool> _canConnect; public bool CanConnect => _canConnect?.Value == true;

Иногда необходимо объединить Observable — объекты в один. Производится это с помощью Observable.Merge

/* Тут мы объединили флаги выполнения команд, чтобы мониторить выполение любой из них через флагIsCommandExecuting  */ _isCommandExecuting = Observable.Merge(SetValvePosition.IsExecuting, ConnectToDevice.IsExecuting, Authorize.IsExecuting, ReadDeviceIndicators.IsExecuting, ReadDeviceInfo.IsExecuting, PingDevice.IsExecuting) .ToProperty(this, e => e.IsCommandExecuting );

Отображение динамических данных

Бывают случаи, когда необходимо реализовать отображение табличных данных в DataGrid с возможностью динамического изменения. ReactiveCollection в данном случае не подходит, так как не реализует уведомления об изменении элементов коллекции. В ReactiveUI и для этого случая есть решение. В библиотеке есть два класса коллекций:

1. Обычный список SourceList<T>
2. Словарь SourceCache<TObject, TKey>

Экземпляры данных классов хранят динамически изменяемые данные. Изменения данных публикуются как IObservable<ChangeSet>, ChangeSet— содержит данные об изменяемых элементах. Для преобразования в IObservable<ChangeSet> используется метод Connect. В своем приложении я реализовал отображение в виде таблицы данных об устройстве: версия прошивки, id устройства, дата калибровки и прочее.

Представление:

this.OneWayBind(ViewModel, vm => vm.ConnectedDevice.DeviceInfo, v => v.DeviceInfo.ItemsSource)   .DisposeWith(disposable);

<DataGrid x:Name="DeviceInfo" AutoGenerateColumns="False" Margin="0,0,0,3" Background="Transparent" CanUserAddRows="False" HeadersVisibility="None">  <DataGrid.Columns>     <DataGridTextColumn Binding="{Binding Key}" FontWeight="Bold" IsReadOnly="True"/>     <DataGridTextColumn Binding="{Binding Value}" IsReadOnly="True"/>   </DataGrid.Columns> </DataGrid>

Определяем коллекции для хранения и для привязки

public ReadOnlyObservableCollection<VariableInfo> DeviceInfoBind; public SourceCache<VariableInfo, string> DeviceInfoSource = new(e => e.Key);

В модели привязываем источник данных к коллекции:

ConnectedDevice.DeviceInfoSource .Connect() .ObserveOn(RxApp.MainThreadScheduler) .Bind(out ConnectedDevice.DeviceInfoBind) .Subscribe();

На этом завершаем обзор MVVM — рецептов и рассмотрим способы сделать приятнее UI приложения.

Визуальные темы и элементы управления

Стиль приложения

Существуют множество библиотек визуальных компонентов как платных, так и бесплатных. Я остановился на Material Design In XAML Toolkit + Material Design Extensions поскольку они бесплатны и открыта, и в принципе, представляется собой достаточный набор инструментов для моего приложения. Данный пакет представляет собой набор визуальных стилей Materail Design для базовых элементов управления. Документация библиотеки скудновата, но есть демо — проект с помощью которого, можно разобраться как и что работает. Чтобы все приложение использовало темы из данного тулкита нужно в ресурсы добавить глобальные стили:

<Application x:Class="Apc.Application2.App"                           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                           xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"                           StartupUri="Views/MainWindow.xaml">       <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!-- Добавляем тему приложения и стили из Material Design Extensions --> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/Generic.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/Generic.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/MaterialDesignLightTheme.xaml" />  <!-- Настраиваем глобальные цветовые стили --> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Blue.xaml" /> </ResourceDictionary.MergedDictionaries> <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}" /> <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}" /> <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}" /> <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}" /> <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary600}" /> <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary600Foreground}" /> </ResourceDictionary>   </ResourceDictionary.MergedDictionaries>                  </ResourceDictionary>            </Application.Resources> </Application>

Помимо этого нужно, чтобы представления наследовали класс MaterialWindow. Я добавил новый свой базовый классMaterialReactiveWindow

public class MaterialReactiveWindow<TViewModel> : MaterialWindow, IViewFor<TViewModel> where TViewModel : class { /// <summary> /// Ссылка на модель представления /// </summary> public static readonly DependencyProperty ViewModelProperty = DependencyProperty.Register( "ViewModel", typeof(TViewModel), typeof(ReactiveWindow<TViewModel>), new PropertyMetadata(null));  public TViewModel? BindingRoot => ViewModel;  public TViewModel? ViewModel { get => (TViewModel)GetValue(ViewModelProperty); set => SetValue(ViewModelProperty, value); }  object? IViewFor.ViewModel { get => ViewModel; set => ViewModel = (TViewModel?)value; } }

В XAML — файлах добавим ссылки на библиотеки Material Design и Material Design Extensions:

xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes" xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"

Пример использования некоторых элементов управления из библиотеки:

<!-- BusyOverlay, который делает окно неактивным и показывает значок процесса во время выполнения долгоиграющей команды --> --> <mde:BusyOverlay x:Name="BusyOverlay"></mde:BusyOverlay> <!-- TimePicker из библиотеки --> <md:TimePicker x:Name="DeviceTime"/> <!-- В кнопке можно добавить визуализацию выполнения команды   в виде индикатора прогресса с помощью свойства ButtonProgressAssist.      Для данной кнопки мы отображаем анимацию пока обновляем данные сенсоров устройства. --> <Button x:Name="RefreshIndicators" md:ButtonProgressAssist.Value="-1"     md:ButtonProgressAssist.IsIndicatorVisible="{Binding Path=IsCommandExecuting}"     md:ButtonProgressAssist.IsIndeterminate="True">   <Button.Content>     <!-- Используем иконку для кнопки из библиотеки -->     <md:PackIcon Kind="Refresh" />   </Button.Content> </Button>

Графики

Мне необходима была визуалицация исторических данных и текущих значений датчиков устройства в приложении. После обзора нескольких библиотек для отображения графиков я остановился на ScottPlot и LiveCharts2. Оба пакета позволяют рисовать различные виды графиков и диаграмм от линий до круговых диаграм и японских свеч. Причем в ScottPlot интерактивное взаимодействие с графиком (масштабирование, перемещение и пр.) работает по-умолчанию без всякого тюнинга. Но в ней мне не удалось заставить работать Realtime обновление данных на графике, поэтому я в итоге пришел к LiveChart2. Данная библиотека имеет платную версию, которая обладает улучшенной производительностью и обеспечивает поддержку разработчиков. В своем приложении я использовал два типа графиков: простой линейный для вывода исторических данных с датчиков и радиальный для индикации текущего значения. Они были реализованы в виде отдельных контролов. Итак, обычный двумерный график в виде линии:

<reactiveui:ReactiveUserControl x:Class="Apc.Application2.Views.PlotControl"             x:TypeArguments="models:PlotControlViewModel"             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"             xmlns:reactiveui="http://reactiveui.net"             xmlns:models="clr-namespace:Apc.Application2.Models"             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"             mc:Ignorable="d"             d:DesignHeight="300" d:DesignWidth="300">      <Grid>           <lvc:CartesianChart x:Name="Plot" Background="White" ZoomMode="Both"/>   </Grid> </reactiveui:ReactiveUserControl>

Класс представления довольно тривиален :

public partial class PlotControl { public PlotControl() { InitializeComponent(); ViewModel = Locator.Current.GetService<PlotControlViewModel>();  this.WhenActivated(disposable => { this.OneWayBind(ViewModel, vm => vm.Series, v => v.Plot.Series) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.XAxes, v => v.Plot.XAxes) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.YAxes, v => v.Plot.YAxes) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.LegendPosition, v => v.Plot.LegendPosition) .DisposeWith(disposable); }); } }

Тут я реализовал возможность настройки осей и легенды графика через свойства модели.

public class PlotControlViewModel: ReactiveObject { public PlotControlViewModel() { _values = new Collection<ObservableCollection<DateTimePoint>>();  Series = new ObservableCollection<ISeries>();  XAxes = new [] { new Axis { // Labeler отвечает за форматирование числовых меток оси           Labeler = value => new DateTime((long) value).ToString("HH:mm:ss"), UnitWidth = TimeSpan.FromSeconds(1).Ticks, MinStep = TimeSpan.FromSeconds(1).Ticks, // Настраиваем отображение разделительных линий сетки ShowSeparatorLines = true, SeparatorsPaint = new SolidColorPaint { Color = SKColors.DarkGray, StrokeThickness = 1 }, // Шрифт меток оси           TextSize = 11,           NamePaint = new SolidColorPaint { Color = SKColors.Black, FontFamily = "Segoe UI", },  } };  YAxes = new[] { new Axis { Labeler = value => $"{value:F1}", TextSize = 11, NameTextSize = 11,  UnitWidth = 0.5, MinStep = 0.5,  ShowSeparatorLines = true, SeparatorsPaint = new SolidColorPaint { Color = SKColors.DarkGray, StrokeThickness = 1 },            NamePaint = new SolidColorPaint { Color = SKColors.Black, FontFamily = "Segoe UI", } } }; }  public ObservableCollection<ISeries> Series { get; } private readonly Collection<ObservableCollection<DateTimePoint>> _values;  [Reactive] public Axis[] XAxes { get; set; }  [Reactive] public Axis[] YAxes { get; set; }      public string Title { get; set; }  [Reactive] public LegendPosition LegendPosition { get; set; }  public int AddSeries(string name, SKColor color, float width) { var newValues = new ObservableCollection<DateTimePoint>(); _values.Add(newValues); var lineSeries = new LineSeries<DateTimePoint> { Values = newValues, Fill = null, Stroke = new SolidColorPaint(color, width), Name = name, GeometrySize = 5, LineSmoothness = 0 }; Series.Add(lineSeries);  return Series.IndexOf(lineSeries); }  public void AddData(int index, DateTime time, double value) { if (index >= _values.Count) { return; } _values[index].Add(new DateTimePoint(time, value)); }  public void ClearData(int index) { if (index >= _values.Count) { return; } _values[index].Clear(); } }

CartesianChart использует данные в виде серий, которые добавляются при инициализации графика методом AddSeries(). Метод возвращает индекс серии в коллекции. Его я использую для добавления данных в нужную серию. Таким образом, есть возможность нарисовать несколько серий данных на одном графике.

// Инициализируем график давления. Будет рисовать две линии данных int pressure1Index = PressurePlot.ViewModel.AddSeries("Давление1", new SKColor(25, 118, 210), 2); int pressure2Index = PressurePlot.ViewModel.AddSeries("Давление2", new SKColor(229, 57, 53), 2);  //...   // Подписываемся на команду чтения показаний датчиков и добавляем данные на график ViewModel?.ReadDeviceIndicators .ObserveOn(RxApp.MainThreadScheduler) .Subscribe(indicators => { var currentTime = _clockProvider.Now(); PressurePlot?.ViewModel?.AddData(pressure1Index, currentTime, indicators.Pressure1); PressurePlot?.ViewModel?.AddData(pressure2Index, currentTime, indicators.Pressure2); }).DisposeWith(disposable);

Для вывода линий используется LineSeries c точками DateTimePoint, так как нужно выводить графики зависимости от времени. Коллекция Series является Observable, чтобы иметь возможность динамически добавлять данные и отображать изменения на графике. Необходимо отметить, что оси графика представленны массивом элементов Axis, что позвляет использовать дополнительные оси для отображения серий. Для этого в серии есть свойства ScalesXAt, ScalesYAt, в которых указывается индекс оси.
Напрмер, график давления, использующий данный контрол, в приложении:

Радиальный график использует PieChart

<lvc:PieChart x:Name="Gauge" Width="200"/>

public partial class GaugeControl { public GaugeControl() { InitializeComponent(); ViewModel = new GaugeControlViewModel();  this.WhenActivated(disposable => { this.OneWayBind(ViewModel, vm => vm.Total, v => v.Gauge.Total) .DisposeWith(disposable); this.OneWayBind(ViewModel, vm => vm.InitialRotation, v => v.Gauge.InitialRotation) .DisposeWith(disposable); this.Bind(ViewModel, vm => vm.Series, v => v.Gauge.Series) .DisposeWith(disposable); }); }  public double Total { get { return ViewModel.Total; } set { ViewModel.Total = value; } }  public double InitialRotation { get => ViewModel?.InitialRotation ?? 0.0;  set { ViewModel.InitialRotation = value; } }      /* Поскольку необходимо отображать только текущее зачение,       то вместо добавления элемента, обновляю последнее значение */ public double this[int index] { get => ViewModel.LastValues[index].Value ?? 0.0; set { ViewModel.LastValues[index].Value = Math.Round(value, 2); } } }

public class GaugeControlViewModel: ReactiveObject { public GaugeControlViewModel() { }  public void InitSeries(SeriesInitialize[] seriesInitializes, Func<ChartPoint, string> labelFormatter = null) { var builder = new GaugeBuilder { LabelsSize = 18, InnerRadius = 40, CornerRadius = 90, BackgroundInnerRadius = 40, Background = new SolidColorPaint(new SKColor(100, 181, 246, 90)), LabelsPosition = PolarLabelsPosition.ChartCenter, LabelFormatter = labelFormatter ?? (point => point.PrimaryValue.ToString(CultureInfo.InvariantCulture)), OffsetRadius = 0, BackgroundOffsetRadius = 0 }; LastValues = new(seriesInitializes.Length);  foreach (var init in seriesInitializes) { var defaultSeriesValue = new ObservableValue(0); builder.AddValue(defaultSeriesValue, init.Name, init.DrawColor); LastValues.Add(defaultSeriesValue); }  Series = builder.BuildSeries(); }  [Reactive] public IEnumerable<ISeries> Series { get; set; }  [Reactive] public double Total { get; set; }  [Reactive] public double InitialRotation { get; set; }  [Reactive] public List<ObservableValue> LastValues { get; private set; } }

Индикаторы давления, созданные с помощью этого контрола в приложении:

Я их объединил с помощью контрола Card из библиотеки MaterialDesign. Необходимо отмететь, что PieChart не позволяет их отображать шкалу с метками. Есть PolarChart с шкалой, но он не позволяет нарисовать «пирог». Поэтому тут нужно писать собственную реализацию.

Как я говорил, платная верия обещает лучшую производительность при обновлении данных графиков, но меня вполне удовлетворила бесплатная версия для обновления данных 1 раз в 3-4 секунды.

Заключение

В данной статье рассмотереные некоторые приемы, облегчабщие разработку WPF-приложения. Уделено внимание инфраструктурным моментам: настройка IoC, логгирование, маппинг объектов. Кроме того, приведен способ улучшения визуального представления UI c помощью компонентов из Material Design вместо стандартных серых кнопок и полей. Все используемые библиотеки бесплатны и с открытым кодом. Конечно по своим возможностям они не дотягивают до платных таких пакетов, как Telerik и SyncFusion, но позволяют получить вполне достойное приложение, когда покупка указанных выше компонент не оправдана. Также замечу, что использование Reactive Extensions, LiveCharts2, в принципе, не ограничено desktop-приложениями, возможно какие-то подходы и паттерны могут быть применены и в других областях разработки. Например, Michael Shpilt описал реализацию Job Queue с помощью Reactive Extensions.