WinUI. The modern native Ul platform of Windows

WinUI позволяет быстро создавать приложения Windows, стиль которых адаптируется к целевой платформе

Windows Community Toolkit - комплект инструментов с открытым исходным кодом содержащий десятки элементов управления и других вспомогательных библиотек для WinUI, UWP и Win32

MVVM

WinUI – это набор элементов управления и библиотек с открытым исходным кодом, предназначенных для использования в приложениях UWP и Win32.

Сравнение приложений для Windows 8 и Windows 10

Основное преимущество WinUI по сравнению с UWP заключается в меньшей зависимости приложений Windows от конкретной версии Windows.
Элементы управления, стили и API вынесены за пределы Windows SDK и сопровождаются отдельно

XAML
основан на расширяемом языке разметки (XML)
HorizontalAlignment="Center"
VerticalAlignment="Center">
Text="Name:"
Margin="0,0,2,0"
VerticalAlignment="Center"/>
Text=""/>
HorizontalAlignment="Right"
VerticalAlignment="Top"
Content="Submit"/>

Адаптивный интерфейс
Padding="2">

данные
public class MainViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _name;
public MainViewModel()
{
Name = "Bob Jones";
}
public string Name
{
get
{
return _name;
}
set
{
if (_name == value) return;
_name = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name)));
}
}
}
интерфейс INotifyPropertyChanged - нужен для получения пользовательским интерфейсом событий обновления при изменении привязанных к данным свойств
1. Создание класса MainViewModel

2. Создание экземпляра класса и его задание в качестве свойства на MainPage public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.ViewModel = new MainViewModel();
}
public MainViewModel ViewModel { get; set; }
}

3. Добавление кода привязки к данным в XAML разметку элемента TextBox Grid.Column="1" Text="{x:Bind
Path=ViewModel.Name, Mode=TwoWay}"/>
Режим двусторонней привязки
Расширение разметки
Путь привязки

Стилизация UI с помощью XAML
XAML поддерживает применение стилей в любой области видимости:
Глобально (файл app.xaml)
На ткущей странице (в объявлении Page.Resourses
Внутри любого уровня или вложенного элемента на странице

Пример использования свойства style
Margin="0,4,0,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal"> Margin="0,0,4,0"/>
1. Перемещение кнопки Submit в StackPanel и добавление кнопки Cancel