Мы живём во время, когда стала актуальной поддержка целого зоопарка платформ и устройств, а .NET Core и .NET Standard существенно упрощают переносимость C#-кода между ними. Однако каждая из платформ предлагает какие-то собственные средства для разработки, причём большая часть из них мысленно застряла где-то во временах MFC и Windows Forms, и не имеет нормальной интеграции с C#. Есть ряд решений, пытающихся привести эти платформы к общему знаменателю и хоть как-то добавить адекватную поддержку MVVM и XAML-вёрстки, но всё это как-то... не то. .NET-разработчики привыкли к возможности стилизовать контролы где угодно и как угодно, к нормальным привязкам списков к коллекциям, богатой системе биндингов. Именно этого и пытается достичь проект AvaloniaUI, продолжающий идеи WPF в open source. Путь проекта нелёгок и тернист — помимо системы для работы привязок, необходимо самостоятельно обрабатывать весь пользовательский ввод, думать о том, как эффективно отрисовать интерфейс, бороться с разного рода несуразностями со стороны целевых платформ, разбираться с отличиями систем отрисовки (так, из-за неадекватной поддержки ArcTo пришлось адаптировать код, изначально предназначенный для правильной отрисовки орбит комет). О том, чего уже удалось достичь, что из этого вы уже сейчас можете использовать, а также о трудностях и интересностях при разработке такого проекта — доклад от одного из его участников.

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14
В чём проблемы обёрток над нативными
контролами?

15. 15
В чём проблемы обёрток над нативными
контролами?

16. 16
В чём проблемы обёрток над нативными
контролами?
● Приведение к платформ общему знаменателю

17. 17
В чём проблемы обёрток над нативными
контролами?
● Приведение к платформ общему знаменателю
● Сложность разработки UI с богатой стилизацией по макету
от дизайнера

18. 18
Чем WPF/UWP лучше остальных?

19. 19
Чем WPF/UWP лучше остальных?
● Система привязок
(обходится XForms, Eto.Forms, MvvmCross)

20. 20
Чем WPF/UWP лучше остальных?
● Система привязок
(обходится XForms, Eto.Forms, MvvmCross)
● Человекочитаемая разметка, в которой можно верстать
(обходится XForms/Eto.Forms, так же нечто похожее есть в Android)

21. 21
Чем WPF/UWP лучше остальных?
● Система привязок
(обходится XForms, Eto.Forms, MvvmCross)
● Человекочитаемая разметка, в которой можно верстать
(обходится XForms/Eto.Forms, так же нечто похожее есть в Android)
● Структура контролов на шаблонах

22. 22

23. 23

24. 24
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" ...>
<ContentPresenter
ContentTemplate="{TemplateBinding ContentTemplate}
Content="{TemplateBinding Content}" .../>
</Border>

25. 25
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFBEE6F
<Setter Property="BorderBrush" TargetName="border" Value="#FF3C7F
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="#FFC4E5F
<Setter Property="BorderBrush" TargetName="border" Value="#FF2C62
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2
<Setter Property="TextElement.Foreground" TargetName="contentPres
</Trigger>
</ControlTemplate.Triggers>

26. 26
Преимущества контролов без внешнего вида
(lookless)
● Отделение логики работы и свойств
контрола от его представления
● Возможность менять вид контрола
практически любым образом по месту
использования

27. 27
ДЕМО

28. 28
Чего мы хотим от UI-фреймворка?
● Все плюшки WPF
● Переносимость
● Open-source
● 100% managed-код
● Рендеринг «пиксель-в-пиксель» везде
● Использование новых фич языка и экосистемы

29. 29
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее

30. 30
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее
Avalonia.Xaml
(netstandard1.1)

31. 31
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее
Avalonia.Xaml
(netstandard1.1)
Avalonia.DefaultTheme
(netstandard1.1)

32. 32
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее
Avalonia.Xaml
(netstandard1.1)
Avalonia.DefaultTheme
(netstandard1.1)
IRuntimePlatform
.NET4.5+/Mono
.NET Core
Xamarin.*

33. 33
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее
Avalonia.Xaml
(netstandard1.1)
Avalonia.DefaultTheme
(netstandard1.1)
IRenderingPlatform
Direct2D
Skia
Cairo
IRuntimePlatform
.NET4.5+/Mono
.NET Core
Xamarin.*

34. 34
Matrix Transform { get; set; }
void Clear(Color color);
void DrawImage(IBitmapImpl src, double opacity, Rect sect, Rect dest)
void DrawLine(Pen pen, Point p1, Point p2);
void DrawGeometry(IBrush brush, Pen pen, IGeometryImpl geometry);
void DrawRectangle(Pen pen, Rect rect, float cornerRadius);
void DrawText(IBrush color, Point origin, IFormattedTextImpl text);
void FillRectangle(IBrush brush, Rect rect, float cornerRadius);
void PushClip(Rect clip);
void PushOpacity(double opacity);
IDrawingContextImpl

35. 35

36. 36
AvaloniaUI
(netstandard1.1)
● биндинги
● logical/visual tree
● рендерер(ы)
● контролы
● прочее
Avalonia.Xaml
(netstandard1.1)
Avalonia.DefaultTheme
(netstandard1.1)
IWindowingPlatform
Win32
GTK#
GTK3
Xamarin.iOS
Xamarin.Android
...
IRenderingPlatform
Direct2D
Skia
Cairo
IRuntimePlatform
.NET4.5+/Mono
.NET Core
Xamarin.*

37. 37
Size ClientSize { get; }
double Scaling { get; }
IEnumerable<object> Surfaces { get; }
Action<RawInputEventArgs> Input { get; set; }
Action<Rect> Paint { get; set; }
Action<Size> Resized { get; set; }
Action<double> ScalingChanged { get; set; }
void Invalidate(Rect rect);
void SetInputRoot(IInputRoot inputRoot);
Point PointToClient(Point point);
Point PointToScreen(Point point);
void SetCursor(IPlatformHandle cursor);
Action Closed { get; set; }
ITopLevelImpl

38. 38
Size ClientSize { get; }
double Scaling { get; }
IEnumerable<object> Surfaces { get; }
Action<RawInputEventArgs> Input { get; set; }
Action<Rect> Paint { get; set; }
Action<Size> Resized { get; set; }
Action<double> ScalingChanged { get; set; }
void Invalidate(Rect rect);
void SetInputRoot(IInputRoot inputRoot);
Point PointToClient(Point point);
Point PointToScreen(Point point);
void SetCursor(IPlatformHandle cursor);
Action Closed { get; set; }
ITopLevelImpl

39. 39
TopLevel
Элемент верхнего
уровня
События ввода и
отрисовка
Иерархия виджетов верхнего уровня

40. 40
TopLevel
Элемент верхнего
уровня
События ввода и
отрисовка
WindowBase
Окно на экране
Перемещение,
смена размера, активность,
скрытие
Иерархия виджетов верхнего уровня

41. 41
TopLevel
Элемент верхнего
уровня
События ввода и
отрисовка
WindowBase
Окно на экране
Перемещение,
смена размера, активность,
скрытие
Window
Окно с декорациями
(заголовок, кнопки)
Иерархия виджетов верхнего уровня

42. 42
TopLevel
Элемент верхнего
уровня
События ввода и
отрисовка
WindowBase
Окно на экране
Перемещение,
смена размера, активность,
скрытие
Popup
Topmost окно без рамки
Window
Окно с декорациями
(заголовок, кнопки)
Иерархия виджетов верхнего уровня

43. 43
TopLevel
Элемент верхнего
уровня
События ввода и
отрисовка
WindowBase
Окно на экране
Перемещение,
смена размера, активность,
скрытие
Popup
Topmost окно без рамки
Window
Окно с декорациями
(заголовок, кнопки)
EmbeddableControlRoot
TopLevel с поддержкой передачи
фокуса
Иерархия виджетов верхнего уровня

44. 44
ДЕМО

45. 45
Проблемы наивного метода отрисовки
(рекурсивно бежим по сцене)
● Сложно понять, что надо отрисовывать, а что нет
● Занимаем много времени на UI-потоке
● Полупрозрачная отрисовка тормозит
● Отрисовка с поворотами и масштабированием
тормозит (особенно шрифты)

46. 46

47. 47

48. 48
Button
TextBlock
Button
Border
ContentPresenter
TextBlock
Logical Tree Visual Tree Render Tree

49. 49
Button
TextBlock
Button
Border
ContentPresenter
TextBlock
VisualNode
VisualNode
VisualNode
VisualNode
Logical Tree Visual Tree Render Tree

50. 50
Button
TextBlock
Button
Border
ContentPresenter
TextBlock
VisualNode
VisualNode
VisualNode
VisualNode
FillRectangle
DrawRectangle
DrawText
Logical Tree Visual Tree Render Tree

51. 51
ДЕМО

52. 52
Отличия от WPF
● AvaloniaObject (то же самое, что и DependencyObject)
● Использует ReactiveExtensions
● Другая система стилей
● Отличия в иерархии контролов
● AvaloniaProperty
(как DependencyProperty, но строго типизирована)
- StyledProperty
- DirectProperty

53. 53
public static readonly DirectProperty<TextBox, int>
SelectionEndProperty =
AvaloniaProperty.RegisterDirect<TextBox, int>(
nameof(SelectionEnd),
o => o.SelectionEnd,
(o, v) => o.SelectionEnd = v);

54. 54
public static readonly DirectProperty<TextBox, int>
SelectionEndProperty =
AvaloniaProperty.RegisterDirect<TextBox, int>(
nameof(SelectionEnd),
o => o.SelectionEnd,
(o, v) => o.SelectionEnd = v);
public int SelectionEnd
{
get { return _selectionEnd; }
set { SetAndRaise(SelectionEndProperty, ref
_selectionEnd, CoerceCaretValue(value)); }
}

55. 55
ДЕМО

56. 56
Чего пока нет?
(версия 0.5)
● Стабильности внутреннего API
● Не хватает многих подсистем, таких как API работы со шрифтами и
обработки тач-событий
● Поддержка мобильных устройств на экспериментальном уровне
● «Умный» рендерер пока не в главной ветке
● Для деплоя требует знания целевых платформ
● Документация :(
● Интеграция с IDE
● Выловлены не все проблемы с особенностями платформ

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62
a) 220, 230 б) 230, 220
в) 220, 268 г) 180, 170

63. 63
a) 220, 230 б) 230, 220
в) 220, 268 г) 180, 170
д) правильного ответа
среди вариантов нет

64. 64
Запланировано на 0.6
● Генерация бандлов для OSX и пакетов для линукса в один
клик
● Переезд на Portable.Xaml
● Нативный бакэнд для OSX
● Сделать превьювер для *nix-платформ и интегрировать его
хоть куда-нибудь
● Доделать рендерер в отдельном потоке
● Доработать документацию

65. 65
https://github.com/AvaloniaUI/Avalonia
https://gitter.im/AvaloniaUI/Avalonia
AvaloniaUI.github.io
Спикер
Никита Цуканов
nikita.d.tsukanov@gmail.com Skype: kekekeks