---
lang: ja-jp
breaks: true
---
# WinUI3 Preview4 ReactivePropertySlim を使用した、レガシーバインディング VisualStudio2019 Preview　2021-04-12

https://www.youtube.com/watch?v=ETYCrVQYs08
https://qiita.com/YSRKEN/items/5a36fb8071104a989fb8

### 環境
* Windows Server 2019
* Microsoft Visual Studio Professional 2019 Preview Version 16.10.0 Preview 1.0
* Microsoft.ProjectReunion 0.5.0
* ReactiveProperty 7.8.3

### VisualStudio 2019 Preview で、「Blank App, Packaged(WinUI 3 in Desktop)」テンプレートよりプロジェクトを作成


### ViewModels/MainWindowsViewModel.csを追加

using Reactive.Bindings;
using Reactive.Bindings.Extensions;
using System;
using System.Linq;
using System.Reactive.Disposables;
using System.Reactive.Linq;

namespace App2.ViewModels
{
    /// <summary>
    /// </summary>
    public class MainWindowsViewModel : IDisposable
    {
        private readonly CompositeDisposable _disposables = new CompositeDisposable();

        private ReactivePropertySlim<string> _input;
        public ReactivePropertySlim<string> Input => _input ??= new ReactivePropertySlim<string>(initialValue: "")
            .AddTo(_disposables);

        private ReadOnlyReactivePropertySlim<string> _output;
        public ReadOnlyReactivePropertySlim<string> Output => _output ??= Input
            .Delay(TimeSpan.FromSeconds(value: 3))
            .ObserveOnUIDispatcher()
            .Select(x => x.ToUpperInvariant())
            .ToReadOnlyReactivePropertySlim()
            .AddTo(_disposables);

        public void Dispose() => _disposables.Dispose();
    }
}

### MainWindow を変更

<Window
    x:Class="App2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="using:App2.ViewModels"
    mc:Ignorable="d"
    >

    <StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <StackPanel.DataContext>
            <viewModels:MainWindowsViewModel />
        </StackPanel.DataContext>
        <TextBox
            Text="{Binding Input.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock
            Text="{Binding Output.Value}" />
    </StackPanel>
</Window>

### 実行

Debug x64 「ソリューション名 (Package)」で実行。


###### tags: `WinUI` `WinUI 3` `Visual Studio 2019 Preview` `ReactiveProperty` `ReactivePropertySlim`